jQuery Selector Data-Attr vs Class

Benchmark created by jsantell on

Description

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

Preparation HTML

<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js">
</script>
<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
Select by Data Attr Value
$('div[data-select-me=true]')
ready
Select by Class
$('div.selectMe')
ready

Revisions

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