querySelectorAll v getElementsByClassName

JavaScript performance comparison

Test case created by

Preparation code

<div id="parent-element">
    <div class="first-level one">
        <span class="second-level one">
        <span class="second-level two">
    </div>
    <div class="first-level two">
        <span class="second-level one">
        <span class="second-level two">
    </div>
</div>
      
<script>
Benchmark.prototype.setup = function() {
  var container = document.getElementById('parent-element');

};
</script>

Preparation code output

<div id="parent-element"> <div class="first-level one"> <span class="second-level one"> <span class="second-level two"> </div> <div class="first-level two"> <span class="second-level one"> <span class="second-level two"> </div> </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
getElementsByClassName
var elements = container.getElementsByClassName('one');
pending…
querySelectorAll
var elements = container.querySelectorAll('.one');
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