Maximum performance in web browsers
summary
A deep-dive into how browsers render pages and practical techniques to maximize web performance, aiming to reach smooth 60 frames per second by explaining painting and rendering processes. Covers measuring perceived performance, mobile-specific optimizations, the effect of micro-optimizations, and whether Web Workers help, with a focus on modern mobile-first constraints.
AI-written summary · about
chapters (19)
- 0:00Introduction
- 1:29Modern web evolution
- 3:36Performance vs speed feel
- 7:12How browsers paint
- 10:15Paint frame processes
- 12:42requestAnimationFrame and frame execution
- 15:57Prioritize main thread interactions
- 17:25Main execution thread
- 19:13CPU vs GPU rendering
- 21:44GPU memory optimization
- 25:20Styles and layout calculation
- 27:05Layout and reflow
- 27:46CSS contain property
- 28:50Painting and compositing
- 30:37Promote to GPU layers
- 33:06Implicit compositing and repaint
- 34:30Using will-change
- 35:14DevTools animation inspection
- 36:05Q&A
related talks
42mMaximum performance
47mRendering Web Performance
44mWe Are All Good with Browsers Made by Others
39mPerformance Beyond Page Load
38mThe future of the browser
44mFast but not Furious: Debugging User Interaction Performance Issues
28mHow to Achieve Performing Rendering in the Browser
58mPanel 3: Performance