Style Recalculation Secrets: Optimizing CSS Selector Performance

Dive deep into the intricacies of style recalculations and CSS selector performance in this 50-minute conference talk from CSS Day 2023. Explore how browsers recalculate styles when webpages change and discover the impact of CSS writing techniques on recalculation speed. Learn about browser engine reactions to DOM changes, style reapplication processes, and practical examples through case studies. Gain insights into developer tools for investigating style performance bottlenecks. Access accompanying slides and speaker information for a comprehensive understanding of the topic. Discover invaluable techniques for optimizing CSS performance, including invalidation sets, CSS rules, and style invalidation. Explore real-world scenarios, conduct speed tests, and learn how to effectively use browser developer tools like Firefox Profiler and Chrome Tracing for performance analysis.

Intro
Why do we keep hearing this
Information Overload
Invalidation Recalculation
Invalidation Sets
CSS Rules
Invalidation
Style Invalidation
Speed Test
How to make it slow
A true story
Two Solutions
MicroBenchmark
Four Simple Steps
Devtools
Firefox Profiler
Conclusion
Papa Roach
Chrome Tracing
Where to give feedback