A visual guide of rendering performance
summary
Shows that the real win is avoiding pixel painting: a sliding drawer demo uses left transitions and triggers the repaint disco (layout → paint → composite) while switching the same animation to translate3d moves work to GPU compositing and eliminates repaints. Uses browser devtools timeline and repaint flashing, demos CSS filters and WebGL-style shaders, mentions Houdini, IntersectionObserver and PerformanceObserver as tooling, and reports the translate3d approach actually stops costly paints.
AI-written summary · about
chapters (4)
- 0:00Start
- 2:281. Browser rendering pipeline 2. A real world example
- 4:12Part 1: Rendering pipeline
- 23:24Compositing • requires layers (images)
related talks
25mRendering Performance from the Ground Up
37mRendering performance inside out
39mLife of a pixel: A visual explanation of rendering performance
42mRendering performance from the ground up
58mRendering performance from the ground up
30mBrowser Graphics Under the Hood
28mHow to Achieve Performing Rendering in the Browser
49mRendering without lumpy bits