Are data attribute css selectors faster than class selectors?

Question

A few months ago this article pointed out that classes could actually be avoided all together from website development.

My question is, how efficient are the data selectors compared to class selectors?

A simple example would be to compare querying for elements with data-component='something' versus elements with class='class1 class2 something anotherClass'.

The [data-<attr>='<value>'] selector will check the value as a whole versus the class string that should be split. With this in mind, data atributes should be faster.

So, to refine the question, in the case of CSS, are we better off with class selector or data selector? And from a javascript point of view, will jQuery("[data-component='something']") be more efficient than jQuery(".something")?

Solution 1

I wouldn't call it conclusive, but it does appear class selectors are faster... I just put this together for a quickie test.

http://jsperf.com/data-selector-performance

EDIT:

Based on Vlad's and my jsperf tests... if performance is a concern (especially IE)... classes are still the way to go

Solution 2

After checking out BLSully's answer and the test page he provided, here are the actual figures for comparison.

jQuery class selector performance vs jQuery data attribute selector performance operations per second:

• 31% faster in Chrome 27.0.1453
• 140% faster in Firefox 15.0.1
• 131% faster in Firefox 21.0
• 1,267% faster in IE 9.0
• 1,356% faster in IE 10.0

Solution 3

I have the impression that the performance of the selectors are fast enough right now even in the mobile browsers out there. Unless you really plan to use selectors a lot, data-attributes or class based, (in which case I would suggest to revisit your code to try to cache the already queried selectors) we can consider them not that bad. And I would even say that is not dramatic to use style over the others.

I think browsers vendors have spent more time improving the most used scenario (query against classes) than querying against selectors. This is changing and I would not be surprised if they start optimizing other cases too.

Comments

[Pointy]

I don't know what sort of web programming is relevant to the sophistry of that article, but I'm pretty sure it has nothing to do with what I do. Also, if you read that article closely, I suspect its author would have just as much concern with data- attributes as with classes; they both represent the same "crime" after all.

[Pointy]

As to your question, some jsperf tests might help answer the question. I suspect that any modern browser with querySelectorAll() etc. will have little difficulty with either approach.

[Vlad Nicula]

The more I think about data atributes and styling them instead of adding classes the more I like them. For example, the fact that a block element (like a search box) is hidden can be indicated by data-state='hidden'. This seems easier for me, a developer to read, than 'component widget-header touchable hidden rounded-top'.

[Vlad Nicula]

It seems BLSully is kinda right, sadly. This is shocking... If there's no more answers in a few hours, I'll close this question.

[BoltClock]

They're called attribute selectors, not data selectors. You could just as easily switch .something for [class~="something"] and you have an attribute selector. No need to add needless data attributes so you can flippantly change your selector style.

[Pointy]

@VladNicula well it's a matter of taste I guess; I don't see why data-state=hidden is really much different than a "hidden" class. In any case, your approach goes against the theme of that article in exactly the same way that classes do. The point of the article is that invented decorators on standard HTML elements are not inherently understandable, and are inferior to a structural approach to presentation description augmented by explicit readable content.

[Vlad Nicula]

@Pointy, we have our preferences. I understand data-state more than just hidden as a class name. Experimenting in such ways is productive sometimes :). This time, it was a dead end from the performance point of view, but it's a nice thought imo.

[Vlad Nicula]

I'm testing the classes too, adding some querySelectorAll to my test case.

[Vlad Nicula]

jsperf.com/testing-data-atribute-selectors yep, it seems even querySelectorAll is slower on data atributes. This is shocking! I was expecting them to be faster since there is no string split to get the actual value within the \"\".

[BLSully]

Wow.... test in IE9... single class selector blows away the data selector...and it's even faster than chrome for that one test.. IE 6300 ops/sec vs Chrome's 4800...

[Jon z]

I don't know why this is surprising, with a given CSSOM there is a known set of classes that can affect style, but attribute selectors will always need to be processed dynamically. That said, I don't really think css selector performance is something that should be considered at the expense of legibility, and dom-attributes that modify visual display seems like it could get thorny pretty quickly if not used with discipline.

[miltonb]

I am not sure if one instance of each is enough to proof the case. How much different are the times for each approach as I could not run your snippet?

[Vlad Nicula]

Maybe now, after a few years after the question has been asked and browsers have had time to update their query engines things are faster with data attributes. Good thing pointing this out. Maybe we should update the question to match today's standards.

[Vlad Nicula]

@SeaBass nope, and I don't think this is a relevant question anymore. I think that the test of time proved to us that both classes and data attributes are useful for different reasons. My interest in this topic is non existent now, as class names and data attributes are now available via document.querySelector, and I never really query more than a dozen items to get what I am looking for (in react, angular, etc).