Attribute vs Class selection
JavaScript performance comparison
Info
Tests speed of selection for data attribute selection versus class-based selection.
Preparation code
<ul>
<li id="1" data-cargroup="A" class="js-CarGroup-A">A</li>
<li id="2" data-cargroup="B" class="js-CarGroup-B">B</li>
<li id="3" data-cargroup="C" class="js-CarGroup-C">C</li>
<li id="4" data-cargroup="C" class="js-CarGroup-C">C</li>
<li id="5" data-cargroup="D" class="js-CarGroup-D">D</li>
</ul>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
Preparation code output
- A
- B
- C
- C
- D
Test runner
Warning! For accurate results, please disable Firebug before running the tests. (Why?)
Java applet disabled.
| Test | Ops/sec | |
|---|---|---|
Data-attribute selection |
|
pending… |
Class-based selection |
|
pending… |
Compare results of other browsers
Revisions
You can edit these tests or add even more tests to this page by appending /edit to the URL. Here’s a list of current revisions for this page:
- Revision 1: published by Bernhard Hofmann
- Revision 3: published by Miloš Rašić
- Revision 4: published
- Revision 5: published
- Revision 6: published
- Revision 7: published
- Revision 8: published
- Revision 10: published
- Revision 11: published
- Revision 12: published
- Revision 13: published by MM
- Revision 14: published
- Revision 15: published
- Revision 16: published
- Revision 17: published
- Revision 19: published
1 comment
I think the slight advantage in favour of selection by class comes from the fact that jQuery has to do more in order to parse the attribute selector which is far more complicated than the class selector. Both classes and attributes seem to be stored in the DOM as maps by js implementations.