Data Selector Performance

JavaScript performance comparison

Revision 12 of this test case created by Eamon Nerbonne

Preparation code

<ul id="test" style="overflow-y:scroll; height:100px; font-size:6px">
</ul>
<script src="//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>
<script>
Benchmark.prototype.setup = function() {
    window.noDeadCodeElim = null;
};
</script>

Preparation code output

Test runner

Warning! For accurate results, please disable Firebug before running the tests. (Why?)

Java applet disabled.

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

Compare results of other browsers

Revisions

You can edit these tests or add even more tests to this page by appending /edit to the URL. Here’s a list of current revisions for this page:

0 comments

Add a comment