getElementById vs. querySelector (v140)

Revision 140 of this benchmark created on

Description

Compare the speed of getElementById to querySelector

Preparation HTML

<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

Ready to run.

Testing in
TestOps/sec
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");
ready
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");
ready

Revisions

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