Attribute vs Class selection

JavaScript performance comparison

Test case created by Bernhard Hofmann

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.

Testing in unknown unknown
Test Ops/sec
Data-attribute selection
$('li').filter(function(index) {
 return $(this).attr('data-cargroup') === 'C';
});
pending…
Class-based selection
$('li.js-CarGroup-C');
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:

1 comment

Miloš Rašić commented :

I don't think using the filter function is the best way to select by attribute. Check out my revision 3 which compares the same class selector with the attribute selector on the same piece of html. Selection by class seems only slightly faster on my Chrome. Looking forward to seeing results for more browsers.

Add a comment