Data Selector with querySelectorAll (v5)

Revision 5 of this benchmark created by Rob on

Description

We're comparing the performance of a querySelector all call that selects a data attribute AND its value, and another without the value

Preparation HTML

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

Setup

var i = 500;
        var ul = $("#test");
        var node = ul.get(0);
        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
node.querySelectorAll('[data-component="list-item"]');
ready
dataSelectorWithOutVal
node.querySelectorAll('[data-component]');
ready
classSelector
node.querySelectorAll('.list-item');
ready
chainedClassSelector
node.querySelectorAll('.list-item.my-other-class');
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