getElementById vs. querySelector

JavaScript performance comparison

Revision 321 of this test case created by Brian Knapp

Preparation code


      
      <script>
Benchmark.prototype.setup = function() {
  for (i=0; i<10000; i++) {
    var pEl = document.createElement('p');
    pEl.id = 'string-id-' + i;
    document.body.appendChild(pEl);
  }
  
  var select = function(query){
      return document.getElementById(query.slice(1));
  };

};
</script>

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
getElementById
for (i=0; i<10000; i++) {
  document.getElementById('string-id-' + i);
}
pending…
querySelector
for (i=0; i<10000; i++) {
  document.querySelector('#string-id-' + i);
}
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