Browser Graphics Under the Hood
summary
Shows a Lemmings demo comparing margin animation, transform, will-change layers, canvas and WebGL and reports what actually changes in the browser pipeline. Finds layout (margins) forces style + reflow + paint each frame, transforms with compositing avoid layout, canvas/WebGL bypass style and paint every frame, and CSS animations run on the compositor so they keep smooth even under main thread pauses. Emphasizes GPU not faster universally, compositing trades paint for memory, concurrency is the real win. The demo works and exposes concrete tradeoffs.
AI-written summary · about
chapters (22)
- 0:00Intro
- 0:16Why should you crawl under the hood
- 3:15Style
- 7:20Paint
- 8:16Problem
- 8:56Compositing
- 10:08CPU vs GPU
- 12:10Paper cutouts
- 12:50Concurrency
- 14:52Demo
- 16:00Preparing
- 16:22Layout
- 17:11Raster
- 17:38Paint Flashing
- 18:08When to use Layout
- 18:55Translate 2D
- 20:08WillChange
- 22:23Lemming
- 23:28Canvas
- 26:19CSS Animations
- 27:23Concurrent Concurrency
- 28:02Summary
related talks
58mRendering performance from the ground up
44mUnder the Browser Hood: How the Event Loop and Compositing Work
42mRendering performance from the ground up
44mWe Are All Good with Browsers Made by Others
37mRendering performance inside out
25mRendering Performance from the Ground Up
46mEfficient CSS Animations
49mRendering without lumpy bits