Style Recalculation Secrets They Don't Want You To Know
summary
Claim: CSS selector micro‑optimizations rarely matter but can explode in large apps — a stray adjacent sibling rule causes 1 second delay by forcing 5,000 nodes restyled. Investigation uses Firefox Profiler, Chromium DevTools experiments (invalidation tracking, initiator), Edge selector stats, and CDP via Puppeteer/Playwright. Instrumentation inside Blink surfaces invalidation sets, match counts and per‑selector times (hundreds of ms or thousands of match attempts). Practical route: reproduce slow scenario, measure affected nodes, use selector stats to find and fix the hot selector.
AI-written summary · about
chapters (20)
- 0:00Intro
- 2:27Why do we keep hearing this
- 4:09Information Overload
- 5:25Invalidation Recalculation
- 8:17Invalidation Sets
- 9:40CSS Rules
- 10:58Invalidation
- 12:31Style Invalidation
- 16:11Speed Test
- 19:10How to make it slow
- 20:15A true story
- 27:10Two Solutions
- 28:06MicroBenchmark
- 29:49Four Simple Steps
- 30:29Devtools
- 30:59Firefox Profiler
- 38:53Conclusion
- 39:58Papa Roach
- 42:53Chrome Tracing
- 46:01Where to give feedback
