Attribute vs Class selection

JavaScript performance comparison

Test case created by Bernhard Hofmann


Tests speed of selection for data attribute selection versus class-based selection.

Preparation code

<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>
<script src=""></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';
Class-based selection

Compare results of other browsers


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.

Comment form temporarily disabled.

Add a comment