This talk by Patrick Brosset is one of my favorite talks from this year’s CSS Day Conference.
How do browsers actually recalculate styles when webpages change? Can the way you write CSS impact the speed of the recalculation process?
In this talk, we’ll go through the details of how browser engines react to DOM changes and apply styles to the page again. We’ll also take a look at examples and case studies to make things practical. And finally, we’ll review developer tools that will help you investigate style performance bottlenecks.
You can find the slides on Patrick’s site.
As for the invalidation sets Patricks talks about, go check out these docs: Style Invalidation in Blink and Sibling Invalidation in Blink. These docs predate :has(), but that was recently covered in How Blink invalidates styles when :has() in use?.