Rendering performance from the ground up
summary
Walks through concrete rendering steps: DOM + CSSOM → layout → painting → compositing, and explains why GPUs (thousands of simple cores) win at repeated matrix work using shaders for compositing. Shows CSS filters can be composited while SVG filters cause repaint (green flash), and that hints like will-change only suggest layer creation. Demonstrates Canvas becoming a slideshow at roughly 500 drawn objects while WebGL reaches ~10k before slowdowns, and notes WebGL gives shaders and speed at the cost of far more setup code.
AI-written summary · about
chapters (10)
- 0:00Start
- 8:19Painting
- 11:13Paint & composite
- 14:22How does it work?
- 14:38Rendering pipeline
- 23:06A real shader
- 24:16Grayscale filter
- 24:33Interlude
- 30:12Compositing
- 37:44Canvas vs. WebGL
related talks
37mRendering performance inside out
58mRendering performance from the ground up
25mRendering Performance from the Ground Up
39mLife of a pixel: A visual explanation of rendering performance
25mA visual guide of rendering performance
30mBrowser Graphics Under the Hood
28mHow to Achieve Performing Rendering in the Browser
44mUnder the Browser Hood: How the Event Loop and Compositing Work