60fps Layout and Rendering
Stay organized with collections
Save and categorize content based on your preferences.
Hitting 60fps in your projects directly correlates to user engagement and is crucial to its success. In this talk Nat and Tom talked about Chrome’s rendering pipeline, some common causes of dropped frames and how to avoid them.
Slides
- A frame is 16ms long. It contains JavaScript, style calculations, painting and compositing.
- Painting is extremely expensive. A Paint Storm is where you unnecessarily repeat expensive paint work.
- Layers are used to cache painted elements.
- Input handlers (touch and mousewheel listeners) can kill responsiveness; avoid them if you can. Where you can’t keep them to a minimum.
Except as otherwise noted, the content of this page is licensed under the Creative Commons Attribution 4.0 License, and code samples are licensed under the Apache 2.0 License. For details, see the Google Developers Site Policies. Java is a registered trademark of Oracle and/or its affiliates.
Last updated 2024-08-06 UTC.
[[["Easy to understand","easyToUnderstand","thumb-up"],["Solved my problem","solvedMyProblem","thumb-up"],["Other","otherUp","thumb-up"]],[["Missing the information I need","missingTheInformationINeed","thumb-down"],["Too complicated / too many steps","tooComplicatedTooManySteps","thumb-down"],["Out of date","outOfDate","thumb-down"],["Samples / code issue","samplesCodeIssue","thumb-down"],["Other","otherDown","thumb-down"]],["Last updated 2024-08-06 UTC."],[],["Maintaining 60fps is vital for user engagement. The rendering pipeline involves JavaScript, styling, painting, and compositing within a 16ms frame. Painting is resource-intensive, particularly in \"Paint Storms,\" where it's repeatedly done unnecessarily. Layers cache painted elements to reduce this burden. Input handlers, such as touch and mousewheel listeners, can significantly impact responsiveness; thus, their usage should be minimized.\n"]]
