First Child of getElementsByTagName vs. querySelector

JavaScript performance comparison

Test case created by Miles Elam and last updated

Preparation code

<style>p,q,b,i,u{display:none}</style>
<script>
  var els = "p q b i u".split( ' ' );
  for ( var i=0; i<10000; i+=1 ) {
    var name = els[i%els.length],
        el = document.createElement( name );
    el.innerHTML = '<span class="' + name + '">Test</span>';
    document.body.appendChild( el );
  }
</script>

Preparation code output

Test runner

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

Java applet disabled.

Testing in unknown unknown
Test Ops/sec
getElementsByTagName
[].push(document.getElementsByTagName("p")[0]);
pending…
querySelector (tag)
document.querySelector("p");
pending…
querySelectorAll (tag)
document.querySelectorAll("p")[0]
pending…
getElementsByClassName
[].push(document.getElementsByClassName("p")[0]);
pending…
querySelector (class)
document.querySelector(".p");
pending…
querySelectorAll (class)
document.querySelectorAll(".p");
pending…

You can edit these tests or add even more tests to this page by appending /edit to the URL.

Compare results of other browsers

0 comments

Add a comment