Rendering performance from the ground up
summary
Starts from a pixel and traces parsing → DOM/CSSOM → layout → paint → composite, showing that streaming HTML parsing and CSSOM drive costly relayouts; DevTools’ paint flashing and FPS/memory meters reveal where repainting kills frames. Canvas2D drops below 60 fps once hundreds of draw calls occur, while WebGL sustains smooth output across thousands. Use will-change or translateZ to trigger compositing, but remember layers eat GPU memory on mobile — measure first.
AI-written summary · about
chapters (25)
- 0:00Start
- 2:52Streaming Parser
- 4:33Parsing
- 5:00Parse Websites
- 5:57Style Sheets
- 7:17Order Matters
- 10:31Layout Algorithm
- 11:57Painting
- 12:12What Is the Pixel
- 15:35Sprites
- 16:19Blend Modes
- 17:56Screen Blend
- 19:13Grayscale
- 19:50Grayscale Function
- 20:23Compositing
- 21:21Scales
- 23:183d Transformations
- 29:11Practical Examples
- 29:45Lessons Learned
- 30:32Dev Tools
- 35:072d and Webgl
- 35:22Test Case
- 36:52Slide Show
- 37:28Webgl
- 50:29Servo Server
related talks
25mRendering Performance from the Ground Up
37mRendering performance inside out
42mRendering performance from the ground up
39mLife of a pixel: A visual explanation of rendering performance
59mRendering Performance
49mRendering without lumpy bits
30mBrowser Graphics Under the Hood
28mHow to Achieve Performing Rendering in the Browser