jQuery Selector Data-Attr vs Class (v5)

Revision 5 of this benchmark created on

Description

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

Preparation HTML

<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>

Test runner

Ready to run.

Testing in
TestOps/sec
Attribute & Key
$('div[data-select-me=true]')
ready
Class
$('div.selectMe')
ready
Attribute
$('div[data-select-me]')
ready
Attribute Only
$('[data-select-me]')
ready
Attribute Only With Value
$('[data-select-me=true]')
ready
Class Only
$('.selectMe')
ready
Element, Attribute And Value
$('div[data-select-me=true]')
ready
Id and item
$('#select_Me p.select_p')
ready
item only
$('#select_Me p.select_p')
ready

Revisions

You can edit these tests or add more tests to this page by appending /edit to the URL.