getElementById vs. querySelector

JavaScript performance comparison

Revision 71 of this test case created

Info

Compare the speed of the multitude of ways to select a node in JavaScript.

Preparation code

<div>Padding for a more fair reflection of selection work being done</div>
<div>Padding for a more fair reflection of selection work being done</div>
<div>Padding for a more fair reflection of selection work being done</div><div>Padding for a more fair reflection of selection work being done</div>
<div>Padding for a more fair reflection of selection work being done</div>
<div>Padding for a more fair reflection of selection work being done</div>
<div>Padding for a more fair reflection of selection work being done</div>
<div>Padding for a more fair reflection of selection work being done</div>
<div>Padding for a more fair reflection of selection work being done</div>
<div id="find-me">
<div class="find-me"/>
<div class="find-me"/>
<div class="find-me"/>
</div>
<div>Padding for a more fair reflection of selection work being done</div>
<div>Padding for a more fair reflection of selection work being done</div>
<div>Padding for a more fair reflection of selection work being done</div>
<div>Padding for a more fair reflection of selection work being done</div>
<div>Padding for a more fair reflection of selection work being done</div>
<div>Padding for a more fair reflection of selection work being done</div>
<div>Padding for a more fair reflection of selection work being done</div>

Preparation code output

Padding for a more fair reflection of selection work being done
Padding for a more fair reflection of selection work being done
Padding for a more fair reflection of selection work being done
Padding for a more fair reflection of selection work being done
Padding for a more fair reflection of selection work being done
Padding for a more fair reflection of selection work being done
Padding for a more fair reflection of selection work being done
Padding for a more fair reflection of selection work being done
Padding for a more fair reflection of selection work being done
Padding for a more fair reflection of selection work being done
Padding for a more fair reflection of selection work being done
Padding for a more fair reflection of selection work being done
Padding for a more fair reflection of selection work being done
Padding for a more fair reflection of selection work being done
Padding for a more fair reflection of selection work being done
Padding for a more fair reflection of selection work being done

Test runner

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

Java applet disabled.

Testing in unknown unknown
Test Ops/sec
getElementById
var found = document.getElementById("find-me");
pending…
getElementsByClassName
var found = document.getElementsByClassName(".find-me")[1];
pending…
querySelector(id)
var found = document.querySelector("#find-me");
pending…
querySelector(class)
var found = document.querySelector(".find-me")[1];
pending…
querySelector(tag#id)
var found = document.querySelector("div#find-me");
pending…
querySelector(tag.class)
var found = document.querySelector("div.find-me");
pending…
getElementsByTagName
var found = document.getElementsByTagName("div")[0];
pending…
querySelector(#id .class)
var found = document.querySelector("#find-me .find-me")[1];
pending…
getElementById(id).getElementsByClassName(class)
var found = document.getElementById("find-me").getElementsByClassName("find-me")[1];
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