Under the Browser Hood: How the Event Loop and Compositing Work
summary
Covers how the browser event loop coordinates tasks, microtasks and requestAnimationFrame, and demonstrates a layout thrash bug where mixing geometry writes and reads in the same loop causes repeated reflows and a ~30× slowdown unless split into separate write and read passes. Describes modern multi-threaded rendering with a compositor/GPU that creates layers and GPU textures (memory examples like 100×100 → 30,000 bytes or 60,000 on Retina) and gives concrete fixes: animate transform/opacity/filters or use will-change, precreate layers deliberately, use requestAnimationFrame, and inspect Layers/Performance in DevTools.
AI-written summary · about
chapters (5)
- 0:00Introduction
- 6:14Modern rendering cycle
- 19:18Animations and compositing layers
- 27:30Memory and layer optimization
- 30:43Q&A
related talks
33mWe are all good with browsers made by others
44mWe Are All Good with Browsers Made by Others
30mBrowser Graphics Under the Hood
28mHow to Achieve Performing Rendering in the Browser
35mIn the loop
37mRendering performance inside out
58mRendering performance from the ground up
25mRendering Performance from the Ground Up