How to Achieve Performing Rendering in the Browser
summary
A step-by-step explanation of the browser rendering pipeline (DOM → render tree → layout → paint → GPU compositing) with concrete DevTools diagnostics (Timeline, Rendering, Layers). Demonstrates the 16 ms per-frame budget, shows that many DOM updates (200 updates → 98 ms ≈10 FPS) cause forced layouts, and explains practical fixes: promote elements to their own layers using transform/opacity to move work to the GPU, batch reads/writes, use requestAnimationFrame, measure GPU memory, and avoid offscreen or out-of-viewport work that kills FPS.
AI-written summary · about
chapters (13)
- 0:00Introduction
- 3:17Browser page changes
- 6:50Rendering layers & optimization
- 9:22Analyzing with Performance tool
- 10:26FPS and performance
- 13:35Forced synchronous layouts
- 16:25Updating 200 elements
- 18:11Layer management for performance
- 20:59GPU memory usage
- 22:03Animation best practices
- 23:51Rendering optimization tips
- 24:13Further learning
- 25:16Q&A
related talks
25mRendering Performance from the Ground Up
44mWe Are All Good with Browsers Made by Others
37mRendering performance inside out
58mRendering performance from the ground up
47mRendering Web Performance
44mUnder the Browser Hood: How the Event Loop and Compositing Work
42mRendering performance from the ground up
33mWe are all good with browsers made by others