HTMLElement.querySelector vs jQuery

JavaScript performance comparison

Revision 11 of this test case created

Preparation code

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<script>
Benchmark.prototype.setup = function() {
    var element = document.createElement("div");
    element.innerHTML = "<div id='info' class='info'><div id='name' class='name'>Name Here</div><div id='address' class='address'>Address Here</div><div id='city' class='city'>City Here</div><div id='state' class='state'>State Here</div></div>";
   
    document.body.appendChild(element);
};

Benchmark.prototype.teardown = function() {
    document.body.removeChild(element);
};
</script>

Test runner

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

Java applet disabled.

Testing in unknown unknown
Test Ops/sec
querySelector
var cityDiv = element.querySelector("div.info > div.city");
pending…
jQuery
var cityDiv = $(element).find("#city");
pending…
DOM with getElementById
var cityDiv = document.getElementById("#city");
pending…
DOM with getElementByClassName
var cityDiv = document.getElementsByClassName("city");
pending…
jQuery without find
var cityDiv = $("#city");
pending…
jQuery by class
var cityDiv = $(".city");
pending…
document.querySelector
var cityDiv = document.querySelector("#city");
pending…
document.querySelector by class
var cityDiv = document.querySelector(".city");
pending…
document.querySelector nested class
var cityDiv = document.querySelector("div.info > div.city");
pending…
document.querySelector nested class w/ ID
var cityDiv = element.querySelector("div.info > #city");
pending…
element.querySelector
var cityDiv = element.querySelector("#city");
pending…
$(element.querySelector)
var cityDiv = $(element.querySelector("#city"));
pending…
$( #, element)
var cityDiv = $("#city", element);
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