Chapter 29. CSS Selector Performance Has Changed! (For the Better)
Great articles, like Dave Hyattâs âWriting Efficient CSSâ, helped developers adapt to a rudimentary selector matching landscape. We learned from Steve Souders (and others) that selectors match from right to left, and that certain selectors were particularly arduous to match and should best be avoided. For example, we were told that descendant selectors were slow, especially when the right-most selector matched many elements on the page. All this was fantastic information when we had none, but as it turns out, times have changed. Thanks to some amazing work by Antti Koivisto there are many selectors we donât need to worry about anymore.
Antti Koivisto contributes code to WebKit core and recently spent some time optimizing CSS selector matching. In fact, after finishing his work, he said:
My view is that authors should not need to worry about optimizing selectors (and from what I see, they generally donât), that should be the job of the engine.
Wow! That sounds fantastic to me. Iâd love to be able to use selectors in a way that makes sense for my architecture and let the rendering engine handle selector optimization. So, what did he do? Not just one thing, rather he created multiple levels of optimizationâweâll take a look at four optimizations in particular:
Style sharing
Rule hashes
Ancestor filters
Fast path
Style Sharing
Style sharing allows the browser to figure out that one element in ...
Get Web Performance Daybook Volume 2 now with the O’Reilly learning platform.
O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.