Rendering Web Performance
summary
Explains how browser rendering works and practical techniques to maximize web performance, focusing on painting and frame rates (from 0 to 60 FPS). Covers how to achieve smooth animations, immediate interactions (clicks, taps, scrolls), and fast content load/paint, and identifies the main causes of poor performance.
AI-written summary · about
chapters (14)
- 0:00Introduction to performance
- 2:36How browsers render
- 7:16Interaction and hit test
- 9:27JavaScript blocking main thread
- 15:32Input delay and warnings
- 15:53Render tree and styles
- 19:07Layout and geometry
- 24:31Update layer tree
- 25:37Painting and rasterization
- 28:06CPU vs GPU in animations
- 31:00Composition and layers
- 34:58Implicit composition
- 37:08Layer optimization
- 39:14Summary and resources
related talks
43mMaximum performance in web browsers
42mMaximum performance
44mFast but not Furious: Debugging User Interaction Performance Issues
28mHow to Achieve Performing Rendering in the Browser
39mPerformance Beyond Page Load
25mRendering Performance from the Ground Up
37mRendering performance inside out
58mRendering performance from the ground up