Data Selector performance without values

Benchmark created by paceaux on

Description

We're comparing the performance of a jQuery selector that selects a data attribute AND its value, and another without the value

Preparation HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<ul id="test">
</ul>

Setup

var i = 500;
        var ul = $("#test");
        ul.html('');
        while (i > 0) {
          ul.append("<li data-component=\"list-item\" class=\"list-item my-other-class\">List Item " + i.toString() + "</li>");
          i -= 1;
        }

Teardown


     ul.html('');

Test runner

Ready to run.

Testing in
TestOps/sec
dataSelectorWithVal
$('[data-component="list-item"]', ul)
ready
dataSelectorWithOutVal
$('[data-component]', ul)
ready
classSelector
$(".list-item", ul)
ready
chainedClassSelector
$(".list-item.my-other-class", ul)
ready

Revisions

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

  • Revision 1: published by paceaux on
  • Revision 2: published by Mario Estrada on
  • Revision 3: published by AdrienBrault on
  • Revision 4: published by Rob on
  • Revision 5: published by Rob on