getElementById vs. querySelector

JavaScript performance comparison

Revision 101 of this test case created by

Preparation code

<p id="foo">Foo <span class="secondary">Bar</span></p>
<p id="bar">Bar <span class="secondary">Baz</span></p>
<p id="baz">Baz <span class="secondary">Qaz</span></p>

      
<script>
Benchmark.prototype.setup = function() {
  document.body.id = "body";

};

Benchmark.prototype.teardown = function() {
  document.body.id = "";

};
</script>

Preparation code output

<p id="foo">Foo <span class="secondary">Bar</span></p> <p id="bar">Bar <span class="secondary">Baz</span></p> <p id="baz">Baz <span class="secondary">Qaz</span></p>

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
Selector("#bar > .secondary")
var el = document.querySelector("#bar > .secondary");
if (!el) throw new Error("NO ELEMENT");
pending…
body.Selector("#bar > .secondary")
var el = document.body.querySelector("#bar > .secondary");
if (!el) throw new Error("NO ELEMENT");
pending…
body.Selector("#bar .secondary")
var el = document.body.querySelector("#bar .secondary");
if (!el) throw new Error("NO ELEMENT");
pending…
Selector("#bar .secondary")
var el = document.querySelector("#bar .secondary");
if (!el) throw new Error("NO ELEMENT");
pending…
Id("bar").ClassName("secondary")[0]
var el = document.getElementById("bar").getElementsByClassName("secondary")[0];
if (!el) throw new Error("NO ELEMENT");
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

Foo Bar

Bar Baz

Baz Qaz