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."],[[["Achieving 60 frames per second (fps) in web projects is vital for user engagement and overall success, as it ensures smooth and responsive interactions."],["Chrome's rendering pipeline involves JavaScript execution, style calculations, painting, and compositing, all within a 16ms timeframe for each frame."],["Excessive or unnecessary paint work can lead to performance bottlenecks known as \"paint storms,\" negatively impacting frame rates."],["Utilizing layers effectively allows for caching of painted elements, reducing redundant rendering and improving performance."],["Minimizing the use of input handlers, such as touch and mousewheel listeners, is crucial for maintaining responsiveness and avoiding performance issues."]]],[]]
