Pulling Back the Curtains From Your Stylesheets
summary
Explains exactly how browsers parse raw bytes into tokens then DOM and CSSOM, how DOM + CSSOM form the render tree, and the layout → paint → composite pipeline including that paint is usually the costliest step. Gives concrete heuristics: CSS files are render-blocking, transforms and opacity < 1 create stacking contexts, z-index tops out at 2,147,483,647, and painting a floated layout measured ~14 ms versus a flexbox ~3.5 ms. Mentions Houdini as an API path to hook rendering internals.
AI-written summary · about
chapters (25)
- 0:00Intro
- 1:15Why am I talking about CSS
- 2:47Houdini
- 3:37Component Based Styling
- 4:51Browser Components
- 5:55Conversion
- 7:07Parser
- 7:28DOM
- 12:53Render Tree
- 14:16Layout
- 14:35Reflow
- 15:04Paint
- 16:44Painting Order
- 17:32Composite
- 17:49Hardware Acceleration
- 18:23Rendering Performance
- 19:12Summary
- 22:58Positioning
- 24:12ZIndex
- 24:56Stacking Context
- 26:24Stacking Context Rules
- 27:10New Stacking Context
- 27:42Debugging Zindex
- 28:25Recap
- 29:09Conclusion
related talks
20mIt's Not Dark Magic, Pulling Back the Curtains From Your Stylesheets
42mBraces to Pixels
39mCSS. Under the hood.
46mEfficient CSS Animations
22mCSS Houdini
37mModern CSS Rendering Performance - Full-Scale Optimization
44mWe Are All Good with Browsers Made by Others
28mHow to Achieve Performing Rendering in the Browser