javascript - jQuery data-* vs class selector - performance? - Stack Overflow

admin管理员组

文章数量:1327945

I've seen many examples(including favorite Twitter's bootstrap) where various APIs make use of $("[data-something]") rather than selecting by class $(".something")

Nethertheless I tried to find information about performance between these two different selectors. I was surprised that many performance test did find out that those selectors are equally fast on most of the modern browsers so I decided to do my own test

I'm really confused right now and I don't know if it's my test that are done wrong(somehow?) or is it other tests that I inspected before?

Could anybody provide more information if I'm doing something wrong while testing or are these test correct and data-attribute selector IS in fact pretty much slower than regular class selector?

Thank you

I've seen many examples(including favorite Twitter's bootstrap) where various APIs make use of $("[data-something]") rather than selecting by class $(".something")

Nethertheless I tried to find information about performance between these two different selectors. I was surprised that many performance test did find out that those selectors are equally fast on most of the modern browsers so I decided to do my own test

I'm really confused right now and I don't know if it's my test that are done wrong(somehow?) or is it other tests that I inspected before?

Could anybody provide more information if I'm doing something wrong while testing or are these test correct and data-attribute selector IS in fact pretty much slower than regular class selector?

Thank you

• javascript
• jquery
• jquery-selectors
• performance-testing

Share Improve this question Follow asked Jan 21, 2013 at 8:59 Vytautas ButkusVytautas Butkus 5,53566 gold badges3333 silver badges4545 bronze badges 5

• 2 I think is because data-attribute uses either querySelectorAll or sizzle if needed, while a regular class uses the faster getElementsByClassName. Check jsperf./class-vs-data-1 – elclanrs Commented Jan 21, 2013 at 9:09
• Well I understand that, but as I read before I was surprised to find that some test show equal performance for both selectors that's why I did my own test and now I want some confirmation are those test correct. Or maybe someone can point I out what I did wrong :) – Vytautas Butkus Commented Jan 21, 2013 at 9:12
• I'd say yes, those results seem correct to me. It's trivial though, unless you have like a thousand elements... – elclanrs Commented Jan 21, 2013 at 9:16
• I believe with thousand, or any other big number, elements results should be worse for data-attribute selector, because the DOM would be even bigger for searching right elements – Vytautas Butkus Commented Jan 21, 2013 at 9:35
• Possible duplicate of: stackoverflow./questions/12496884/… – ForOhFor Commented Jan 14, 2017 at 18:46

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 6

When using attribute selectors, performance may vary depending on querySelector support in your browser. jQuery will fall back to a built-in library (called SizzleJS) which is a lot slower.

Selection on class names will be faster because it will always use getElementsByClassName which is monly supported on all mon browsers.

The way I see it, classes serve a different purpose then data attributes. Classes will "categorize" elements so they can be styled properly and create structure.

Data attributes are exactly that: data. Sometimes you need to store additional data in your elements. For instance:

<table>
    <tr data-id="4" data-category="1">
        <td>Name</td>
        <td>Email</td>
    </tr>
</table>

Note that I'm not using the regular "id" attribute because of the same reason.

本文标签： javascriptjQuery data* vs class selectorperformanceStack Overflow