The Web's Black Magic
summary
A small demo game reveals concrete rules: DOM insertion then immediate style changes need a setTimeout(0) so the engine updates styles before transitions start; reading innerText triggers style recalc and doing reads and writes in the same loop causes O(n^2) relayouts, so separate all gets then all sets; adding translateZ(0) creates GPU-backed layers and moves work to fast compositing at the cost of memory; simple counts (535 pixel fills, ~32k per second, ~2M at larger sizes) show the tradeoffs.
AI-written summary · about
chapters (7)
- 0:00Start
- 7:09Event Handling Code
- 15:00Compositing Mode
- 16:06Compositing and Rendering
- 16:23Rendering
- 22:52Compositing
- 28:02Webkit Debug Borders
related talks
30mBrowser Graphics Under the Hood
58mRendering performance from the ground up
33mSaving the Web 16 Milliseconds at a Time
37mPractical Web Animation
42mRendering performance from the ground up
37mRendering performance inside out
39mLife of a pixel: A visual explanation of rendering performance
49mRendering without lumpy bits