jQuery Selector Data-Attr vs Class

JavaScript performance comparison

Revision 5 of this test case created

Info

Selector speed of searching for data attribute versus class $('div.selectMe') vs $('div[data-select-me=true]') vs $('div[data-select-me]')

Preparation code

<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js">
</script>
<div>
  <div id='select_Me' data-select-me='true'>
    <p class="select_p">
      Some paragraph.
    </p>
  </div>
  <div class='selectMe' data-select-me='true'>
    <p>
      Some paragraph.
    </p>
  </div>
  <div class='selectMe'>
    <div data-select-me='true'>
    </div>
  </div>
  <div data-select-me='true'>
    <div class='selectMe'>
    </div>
  </div>
</div>

Preparation code output

Some paragraph.

Some paragraph.

Test runner

Warning! For accurate results, please disable Firebug before running the tests. (Why?)

Java applet disabled.

Testing in unknown unknown
Test Ops/sec
Attribute & Key
$('div[data-select-me=true]')
pending…
Class
$('div.selectMe')
pending…
Attribute
$('div[data-select-me]')
pending…
Attribute Only
$('[data-select-me]')
pending…
Attribute Only With Value
$('[data-select-me=true]')
pending…
Class Only
$('.selectMe')
pending…
Element, Attribute And Value
$('div[data-select-me=true]')
pending…
Id and item
$('#select_Me p.select_p')
pending…
item only
$('#select_Me p.select_p')
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:

0 comments

Add a comment