Style Recalculation Secrets They Don’t Want You To Know | Patrick Brosset | CSS Day 2023

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?.

Published by Bramus!

Bramus is a frontend web developer from Belgium, working as a Chrome Developer Relations Engineer at Google. From the moment he discovered view-source at the age of 14 (way back in 1997), he fell in love with the web and has been tinkering with it ever since (more …)

Leave a comment

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.