getElementById vs. querySelector

JavaScript performance comparison

Revision 317 of this test case created by Carlos Ouro

Preparation code

<p id="bar">Bar</p>

      
<script>
Benchmark.prototype.setup = function() {
  var needleRegex = /^\#[^\s]+$/
  function myQuerySelectorAll(selector){
    if (needleRegex.test(selector)){
      var el = document.getElementById("bar");
      return el !== null ? [el] : []
    } else {
      return document.querySelectorAll(selector)
    }
  }

};
</script>

Preparation code output

<p id="bar">Bar</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
auto-detect
var bar = myQuerySelectorAll("#bar");
pending…
querySelector
var bar = document.querySelector("#bar");
pending…
getElementById
var bar = document.getElementById("bar");
pending…
querySelectorAll
var bar = document.querySelectorAll("#bar");
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

Bar