Data Selector Performance (v12)

Revision 12 of this benchmark created by Eamon Nerbonne on

Preparation HTML

<ul id="test" style="overflow-y:scroll; height:100px; font-size:6px">
</ul>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js">
</script>
<script>
var jqUl = $("#test");
var lis = [];
for(var i=0; i<100; i++)
  lis.push($("<li data-component=\"list-item-"+i+"\" data-component-"+i+" class=\"list-item-"+i+" my-other-class\">List Item " + i + "</li>"));

jqUl.empty().append(lis);
var ul = jqUl[0];

function jq(selector) { 
  window.noDeadCodeElim = $(selector); 
}
function qsa(selector) { 
  window.noDeadCodeElim = document.querySelectorAll(selector); 
}
</script>

Setup

window.noDeadCodeElim = null;

Test runner

Ready to run.

Testing in
TestOps/sec
jQuery attribute+value
jq("[data-component=\"list-item-42\"]")
ready
jQuery class
jq(".list-item-42")
ready
jQuery classes
jq(".list-item-42.my-other-class")
ready
jQuery attribute
jq("[data-component-42]", ul)
ready
qsa attribute+value
qsa("[data-component=\"list-item-42\"]", ul)
ready
qsa class
qsa(".list-item-42", ul)
ready
qsa classes
qsa(".list-item-42.my-other-class", ul)
ready
qsa attribute
qsa("[data-component-42]", ul)
ready

Revisions

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