getElementById vs. querySelector

JavaScript performance comparison

Revision 137 of this test case created by ro

Preparation code

<div id="holdem">
</div>
<script>
for (var i = 0; i < 1000; i++) {
    var elem = document.createElement('div');
    if (i !== 500) {
      elem.className = 'dontFind';
      elem.id = "dontFind";
    } else {
      elem.className = 'findMe';
      elem.id = "findMe";
    }
    document.querySelector("#holdem").appendChild(elem);
}
</script>
    

Preparation code output

<div id="holdem"> </div>

Test runner

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

Java applet disabled.

Testing in CCBot 2.0.0 / Other 0.0.0
Test Ops/sec
getElementById
var found = document.getElementById("findMe");
pending…
getElementsByClassName
var found = document.getElementsByClassName("findMe");
pending…
querySelector(id)
var found = document.querySelector("#findMe");
pending…
querySelector(class)
var found = document.querySelector(".findMe");
pending…
querySelector(tag#id)
var found = document.querySelector("div#findMe");
pending…
querySelector(tag.class)
var found = document.querySelector("div.findMe");
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.

0 Comments