Life of a pixel: A visual explanation of rendering performance
summary
Explains how HTML/CSS turn into pixels and gives concrete rules: translate3d forces a compositor layer so moving UI avoids costly repainting, devtools paint flashing shows when pixels redraw, and CSS filters run as GLSL-like shaders illustrated by a grayscale shader example. Benchmarks show canvas2d drops around 500 sprites while WebGL handles 10k–50k images with steadier 60fps. A demo replaces left transitions with 3D transforms to prove smoother animation and reduced painting.
AI-written summary · about
chapters (10)
- 0:00Intro
- 3:15Pixels
- 5:55Pixies
- 7:48Painting
- 10:18Copying
- 11:45CPU vs GPU
- 19:04Compositing
- 22:33Surprise
- 24:12Filters
- 26:15Real world example
related talks
37mRendering performance inside out
58mRendering performance from the ground up
42mRendering performance from the ground up
25mA visual guide of rendering performance
26mSVG, Canvas, and WebGL: The Power, the Beauty, and the Cost
25mRendering Performance from the Ground Up
28mTurbo charging 2D on the web
30mBrowser Graphics Under the Hood