getElementById with getElementsByClassName vs. querySelectorAll

JavaScript performance comparison

Revision 200 of this test case created by lokait

Preparation code

<div id="foo">
<div class="pps"></div>
<div class="pps"></div>
<div class="pps">
<div class="pfr"></div>
<div class="pfr"></div>
<div class="pfr"></div>
</div>
<div class="pps"></div>
<div class="pps"></div>
</div>
<div id="bar">
<div class="pps"></div>
<div class="pps"></div>
<div class="pps">
<div class="pfr"></div>
<div class="pfr"></div>
<div class="pfr"></div>
</div>
<div class="pps"></div>
<div class="pps"></div>
</div>
<div id="baz">
<div class="pps"></div>
<div class="pps"></div>
<div class="pps">
<div class="pfr"></div>
<div class="pfr"></div>
<div class="pfr"></div>
</div>
<div class="pps"></div>
<div class="pps"></div>
</div>
<div id="car">
<div class="pps"></div>
<div class="pps"></div>
<div class="pps">
<div class="pfr"></div>
<div class="pfr"></div>
<div class="pfr"></div>
</div>
<div class="pps"></div>
<div class="pps"></div>
</div>


<div id="batman">

<div class="sss">
<div class="rfr"></div>
<div class="rfr"></div>
<div class="rfr"></div>
</div>

<div class="sss">
<div class="str"></div>
<div class="str"></div>
<div class="str"></div>
</div>

<div class="sss">
<div class="sre"></div>
<div class="sre"></div>
<div class="sre"></div>
</div>

<div class="sss">
<div class="sref"></div>
<div class="sref"></div>
<div class="sref"></div>
</div>

<div class="sss">
<div class="syef"></div>
<div class="syef"></div>
<div class="syef"></div>
</div>

</div>

<div id="rar">
<div class="pps"></div>
<div class="pps"></div>
<div class="pps">
<div class="pfr"></div>
<div class="pfr"></div>
<div class="pfr"></div>
</div>
<div class="pps"></div>
<div class="pps"></div>
</div>
<div id="xaz">
<div class="pps"></div>
<div class="pps"></div>
<div class="pps">
<div class="pfr"></div>
<div class="pfr"></div>
<div class="pfr"></div>
</div>
<div class="pps"></div>
<div class="pps"></div>
</div>

<div id="batman_c">

</div>

<div id="batman_c_two">

</div>
    

Preparation code output

<div id="foo"> <div class="pps"></div> <div class="pps"></div> <div class="pps"> <div class="pfr"></div> <div class="pfr"></div> <div class="pfr"></div> </div> <div class="pps"></div> <div class="pps"></div> </div> <div id="bar"> <div class="pps"></div> <div class="pps"></div> <div class="pps"> <div class="pfr"></div> <div class="pfr"></div> <div class="pfr"></div> </div> <div class="pps"></div> <div class="pps"></div> </div> <div id="baz"> <div class="pps"></div> <div class="pps"></div> <div class="pps"> <div class="pfr"></div> <div class="pfr"></div> <div class="pfr"></div> </div> <div class="pps"></div> <div class="pps"></div> </div> <div id="car"> <div class="pps"></div> <div class="pps"></div> <div class="pps"> <div class="pfr"></div> <div class="pfr"></div> <div class="pfr"></div> </div> <div class="pps"></div> <div class="pps"></div> </div> <div id="batman"> <div class="sss"> <div class="rfr"></div> <div class="rfr"></div> <div class="rfr"></div> </div> <div class="sss"> <div class="str"></div> <div class="str"></div> <div class="str"></div> </div> <div class="sss"> <div class="sre"></div> <div class="sre"></div> <div class="sre"></div> </div> <div class="sss"> <div class="sref"></div> <div class="sref"></div> <div class="sref"></div> </div> <div class="sss"> <div class="syef"></div> <div class="syef"></div> <div class="syef"></div> </div> </div> <div id="rar"> <div class="pps"></div> <div class="pps"></div> <div class="pps"> <div class="pfr"></div> <div class="pfr"></div> <div class="pfr"></div> </div> <div class="pps"></div> <div class="pps"></div> </div> <div id="xaz"> <div class="pps"></div> <div class="pps"></div> <div class="pps"> <div class="pfr"></div> <div class="pfr"></div> <div class="pfr"></div> </div> <div class="pps"></div> <div class="pps"></div> </div> <div id="batman_c"> </div> <div id="batman_c_two"> </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 with getElementsByClassName
var bar = document.getElementById("batman");
var bat = bar.getElementsByClassName("sss");
for (var i = 0; i < bat.length; i++) {
  document.getElementById("batman_c").innerHTML += bat[i].innerHTML;
}
pending…
querySelectorAll
var batTwo = document.querySelectorAll("#batman > .sss");
for (var i = 0; i < batTwo.length; i++) {
  document.getElementById("batman_c_two").innerHTML += batTwo[i].innerHTML;
}
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