Our latest news, updates, and stories by Paul Lewis.
Layout is where the browser figures out the geometric information for elements - their size and location in the page. Each element will have explicit or implicit sizing information based on the CSS that was used, the contents of the element, or a parent element. The process is called Layout in Chrome.
JavaScript is often the trigger for visual changes. Sometimes that's directly through style manipulations, and sometimes it's calculations that will result in visual changes, like searching or sorting some data. Badly-timed or long-running JavaScript can be a common cause of performance issues, and you should look to minimize its impact where you can.
Paint is the process of filling in pixels that eventually get composited to the users' screens. It is often the longest-running of all tasks in the pipeline, and one to avoid if at all possible.
Input handlers are a potential cause of performance problems in your apps, as they can block frames from completing, and can cause additional and unnecessary layout work.
JavaScript often triggers visual changes. Sometimes that's directly through style manipulations, and sometimes it's calculations that result in visual changes, like searching or sorting data. Badly-timed or long-running JavaScript is a common cause of performance issues. You should look to minimize its impact where you can.
Users notice if sites and apps don't run well, so optimizing rendering performance is crucial!
Compositing is where the painted parts of the page are put together for displaying on screen.
Learn how to animate between two views in your apps.
Animations must perform well, otherwise they will negatively impact the user experience.
Modal views block the user interface to display important messages. Learn how to animate modal views in your apps.
Go offroad and create totally custom animations for your projects.
Learn how to soften and give weighting to your animations.
You can animate with CSS or JavaScript. Which should you use, and why?
Breaking symmetry provides contrast and appeal to your projects. Learn when and how to apply this to your projects.
Choose the appropriate easing for your project, whether that's easing in, out, or both. Maybe even use bounces for extra fun!
