Rendering performance inside out
summary
Explains rendering as numbers in memory—pixels are arrays of three 0–255 bytes (RGB) and shaders are simple blend/filter functions that run per pixel; copying arrays for compositing is far cheaper than repainting, so aim for 60fps by avoiding layout/paint. Shows that canvas/video and 3D transforms become GPU layers, that CSS filters can be composited while equivalent SVG filters may force repaint (Safari drop-shadow example), and that will-change or forcing a layer can turn a slow left animation into a composite-only transform. Uses Chrome DevTools remote inspect and paint flashing to measure and CPU-throttle to test.
AI-written summary · about
chapters (6)
- 0:00Introduction and motivation
- 3:54Pixels and rendering basics
- 11:36Compositing and blending functions
- 22:28Browser rendering pipeline
- 27:08Layers and performance tricks
- 31:20Q&A and closing remarks
related talks
58mRendering performance from the ground up
42mRendering performance from the ground up
39mLife of a pixel: A visual explanation of rendering performance
25mRendering Performance from the Ground Up
25mA visual guide of rendering performance
28mHow to Achieve Performing Rendering in the Browser
59mRendering Performance
49mRendering without lumpy bits