jQuery Selector Data-Attr vs Class (v8)

Revision 8 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-me2]') vs $('div#selectMe')

Preparation HTML

<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js">
</script>
<div>


  <div id='selectMe' class='selectMe' data-select-me2 data-select-me='true'>
    <p>
      Some paragraph.
    </p>
  </div>


  <div class='selectMe'>
    <div data-select-me='true'>
    </div>
  </div>

 <div id='selectMe'>
    <div data-select-me='true'>
    </div>
  </div>


  <div data-select-me='true'>
    <div class='selectMe'>
    </div>
  </div>

  <div data-select-me2>
    <div class='selectMe'>
    </div>
  </div>


</div>

Test runner

Ready to run.

Testing in
TestOps/sec
Select by Data Attr Value
$('div[data-select-me=true]')
ready
Select by Class
$('div.selectMe')
ready
Select by id
$('div#selectMe')
ready
Select by Data Attr
$('div[data-select-me]')
ready

Revisions

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