getElementById vs. querySelector

JavaScript performance comparison

Revision 140 of this test case created by

Preparation code

<div id="id1">1</div>
<div id="id2">2</div>
<div id="id3">3
  <div id="id3a">3a</div>
  <div id="id3b">3b</div>
  <div id="id3c">3c</div>
  <div id="id3d">3d</div>
  <div id="id3e">3e</div>
  <div id="id3f">3f</div>
</div>
<div id="id4">4</div>
<div id="id5">5</div>
<div id="id6">6</div>
    

Preparation code output

<div id="id1">1</div> <div id="id2">2</div> <div id="id3">3 <div id="id3a">3a</div> <div id="id3b">3b</div> <div id="id3c">3c</div> <div id="id3d">3d</div> <div id="id3e">3e</div> <div id="id3f">3f</div> </div> <div id="id4">4</div> <div id="id5">5</div> <div id="id6">6</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
querySelector
var id3 = document.getElementById("id3");
var id3a = id3.querySelector("#id3a");
var id3b = id3.querySelector("#id3b");
var id3c = id3.querySelector("#id3c");
var id3d = id3.querySelector("#id3d");
var id3e = id3.querySelector("#id3e");
var id3f = id3.querySelector("#id3f");
pending…
getElementById
var id3 = document.getElementById("id3");
var id3a = document.getElementById("id3a");
var id3b = document.getElementById("id3b");
var id3c = document.getElementById("id3c");
var id3d = document.getElementById("id3d");
var id3e = document.getElementById("id3e");
var id3f = document.getElementById("id3f");
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

1
2
3
3a
3b
3c
3d
3e
3f
4
5
6