CSS. Under the hood.
summary
Browser parsing builds DOM and CSSOM in parallel but CSSOM creation blocks JavaScript execution, so external stylesheets stall the critical render path. A demo app renders 5000 elements test and measures inline styles doing extra work — inline style triple-loop in React — producing hundreds of milliseconds of extra render time versus class-based styles. Bundled CSS Modules ≈ CSS classes for speed, while styled-components shows higher cost. Advice: keep critical CSS small, ship styles early, avoid heavy per-element inline style churn.
AI-written summary · about
chapters (15)
- 0:00Start
- 5:18Modeling DOM tree nodes
- 6:07Javascript blocks HTML parsing by default
- 8:09Modeling CSSOM tree nodes
- 9:14What CSSOM tree building impacts
- 15:38What can impact CSSOM tree building
- 18:23How JS execution time works
- 20:48Render tree
- 21:24Calculate layout
- 22:11Some of the CSS can require more work
- 25:02React style attribute a.k.a inline styles
- 27:07Case study - 5 elements
- 27:17Case study - 5000 elements
- 28:22Empty all old style properties
- 28:59When iterating over new props repeats the loop
