Surprising differences in Selector Performance

Like so many things in web development, some well-established things are rooted in decade-old information that hasn't been true for awhile. It seems like this is the case here. Still, it also turns out there are some selectors that I use regularly, and at least one that basically everyone uses, which actually are slow (relatively speaking, anyway)!

🔗 Links

⌚ Timestamps
00:00 - Introduction
01:39 - How we’re doing the tests
05:21 - Class vs. Attribute selectors
08:28 - comma-separated selectors vs. :is(), :where, and :not()
13:30 - The universal selector
15:38 - Is it worth worrying about?

#css

--

Come hang out with other dev's in my Discord Community

Keep up to date with everything I'm up to

Come hang out with me live every Monday on Twitch!

---

Help support my channel

---

---

I'm on some other places on the internet too!

If you'd like a behind the scenes and previews of what's coming up on my YouTube channel, make sure to follow me on Instagram and Twitter.

---

And whatever you do, don't forget to keep on making your corner of the internet just a little bit more awesome!

[Gearyco]

The amount of work it takes to create content like this is significant. Thanks for doing this. I hope people appreciate it.

[tikeyike]

So in short, don't worry too much about what kind of selectors you use because we're in 2023. Great video as always!

[nelpantoja]

I didn't know about this tool in Edge. Thank you for this Kevin! I definitely agree with your point that we are better off at optimizing other things rather than CSS.

[dealloc]

Great video to show that browsers improve. Harry has written awesome articles about the performance implications at the time. But as browser has improved they are less relevant today. In fact, Microsoft Edge team wrote an article "The truth about CSS selector performance" in January this year which I highly recommend checking out.

What could affect performance is not so much rendering the page once–unless you have a lot of HTML, but rather updating the DOM nodes (adding/removing nodes, changing class attributes and other things that requires styles to be recalculated) from JavaScript over time. These are sometimes real concerns in larger apps that I have had to deal with because it can result in really poor UX.

For example, setting a class attribute that updates a transform requires style recalculation. But setting it directly inline won't. So if you're doing animations or transitions with JS it can some times be beneficial to do them with inline styles.

[gykonik]

Awesome information! Maybe you could consider doing some sort of series "How CSS works under the hood"? You mentioned some things like "CSS parses the selectors from right to left" and stuff that I didn't know before. Moreover, I think many of us have no clue how CSS really works, and just know how to use it. (And you could build upon that series by another series about optimization :D)

Would love to see something like that! 😊

[robertsilver]

Thank you so much for researching this and showing us how to do our own timings. Also, hope you’re blowing raspberries at the people who doubted you.

[confused_horse]

I just came across this channel and it really annoys me that I'm lurking on YouTube pretty much all day and never came across it. This is probably the single most interesting content I've seen in years.

[bart]

I love this type of video, i.e. a report on a rabbit hole dive. You probably spent a lot of time investigating this, so this saved us a lot of time while still getting a feel of investigating this ourselves. Awesome.

[AyudhKumarGupta]

I used to have discussions with my colleagues about CSS performance, thanks for making a video on it. Didn't know about this feature in Edge dev tools :)

[xbsidesx]

Thank you for your research! I'm also interested in seeing this in different renders. Also, the reminder that "some info is rooted in very long time ago knowledge" is very good.

[lstom]

It's so funny that people worry about CSS performance, but use huge amounts and overheads of JS 😂

[sophnoch]

Thank you! This was very informative and helpful! Love your videos! Always learning something new in your channel!

[_ric]

The thing about the "*" selector being slower is that, in general, it's only called once. You can use it anywhere, of course, but I tend to see it predominantly used for a cheep reset .. * { margin:0 } ..for example, meanwhile things like ">" will be used constantly throughout the stylesheet. Although I will admit I was as surprised as you to see that "div > div" seems more inefficient than "div div".

[VasilyPavlik]

Nice topic, Kevin!

I spent several weeks in optimizing some huge corporate project. It was 5 or 6 years ago. And it had to be working under IE9-10.
So, replacing of attributes with classes gained me THREE TIMES faster rendering than before. Under Chrome/Firefox it was about 30-35% better and it was also significant.

Since then I usually avoid atttributes in my CSS.

[vincentjacquet]

Thanks for this interresting video, instructive in more than one way.
I have always thought that avoiding HTML bloat and reducing the number of selectors was a more efficient way of optimizing our pages than avoiding some selectors.

[aCitizenJOSerased]

Thank you so much for your effort and your excellently presented research!

[ErickLeonBolinaga]

Thank you for the real performance testings. I think, although the difference is minimal, in today's web apps, where you might be ending with several libraries with their own styles, the final style could result on several tens of thousands of CSS lines, so it makes sense to worry about not having super complex or/and expensive selectors.

[kylebloom]

I ran into a css selector speed issue with a font app I made. I tried using the data attribute as the css selector. It worked fine on my computer with like 100 fonts, but it fell over on my wife's computer with like 7000 fonts. Switched it back to a class and everything worked without issue.

[UncleElder]

I appreciate you taking the time to do this experiment. And thanks for the tips on using Edge. Is it possible to do a side-by-side summary of the results in order of fastest to slowest?

[ddmozz]

This is awesome.. great video man. I enjoy obsessing over performance for some reason lol