querySelector vs querySelectorAll vs getElementById vs getElementsByClassName vs getElementsByTagName vs getElementsByName

JavaScript performance comparison

Revision 52 of this test case created by Skateside

Preparation code

<div class="test">test</div>
<div class="test">test</div>
<div class="test">test</div>
<div class="test">test</div>
<div class="test">test</div>
<div class="test">test</div>
<div class="test">test</div>
<div class="test">test</div>
<div class="test">test</div>
<div class="test">test</div>
<div class="test">test</div>
<div class="test">test</div>
<div class="test">test</div>
<div class="test">test</div>
<div class="test">test</div>
<div class="test">test</div>
<div class="test">test</div>
<div class="test">test</div>
<div class="test">test</div>
<div class="test">test</div>
<div class="test">test</div>
<div class="test">test</div>
<div class="test">test</div>
<div class="test">test</div>
<div id="test">test</div>

      
<script>
Benchmark.prototype.setup = function() {
  var dom = {
  
      toArray: function (nodes) {
  
          var array = [];
  
          if (nodes) {
  
              array = typeof nodes.length === 'number' ?
                      Array.prototype.slice.call(nodes) :
                      [nodes];
  
          }
  
          return array;
  
      },
  
      byId: function (id, context) {
  
          var start = context || document;
  
          return this.toArray(start.getElementById(id));
  
      },
  
      byClass: function (className, context) {
  
          var start = context || document;
  
          return this.toArray(start.getElementsByClassName(className));
  
      },
  
      byTag: function (tag, context) {
  
          var start = context || document;
  
          return this.toArray(start.getElementsByTagName(tag));
  
      },
  
      byQuery: function (query, context) {
  
          var start = context || document;
  
          return this.toArray(start.querySelectorAll(query));
  
      },
  
      get: function (query, context) {
  
          var found = null,
              name  = query.slice(1);
  
          if (/^#\w+$/.test(query)) {
              found = this.byId(name, context);
          } else if (/^\.\w+$/.test(query)) {
              found = this.byClass(name, context);
          } else if (/^\w+$/.test(query)) {
              found = this.byTag(query, context);
          } else {
              found = this.byQuery(query, context);
          }
  
          return found;
  
      },
  
      get2: function (query, context) {
  
          var reg   = /(^#\w+$)|(^\.\w+$)|(^\w+$)/,
              match = query.match(reg),
              name  = query.slice(1),
              found = null;
  
          if (match) {
  
              found = match[1] ?
                      this.byId(name, context) :
                      match[2] ?
                              this.byClass(name, context) :
                              this.byTag(query, context);
  
          } else {
              found = this.byQuery(query, context);
          }
  
          return found;
  
      }
  
  };

};
</script>

Preparation code output

<div class="test">test</div> <div class="test">test</div> <div class="test">test</div> <div class="test">test</div> <div class="test">test</div> <div class="test">test</div> <div class="test">test</div> <div class="test">test</div> <div class="test">test</div> <div class="test">test</div> <div class="test">test</div> <div class="test">test</div> <div class="test">test</div> <div class="test">test</div> <div class="test">test</div> <div class="test">test</div> <div class="test">test</div> <div class="test">test</div> <div class="test">test</div> <div class="test">test</div> <div class="test">test</div> <div class="test">test</div> <div class="test">test</div> <div class="test">test</div> <div id="test">test</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
getElementById
dom.toArray(document.getElementById('test'));
pending…
getElementsByClassName
dom.toArray(document.getElementsByClassName('test'));
pending…
getElementsByTagName
dom.toArray(document.getElementsByTagName('div'));
pending…
querySelectorAll
dom.toArray(document.querySelectorAll('div#test'));
pending…
get (ID)
dom.get('#test');
pending…
get (class)
dom.get('.test');
pending…
get (tag)
dom.get('div');
pending…
get (query)
dom.get('div#test');
pending…
get2 (ID)
dom.get2('#test');
pending…
get2 (class)
dom.get2('.test');
pending…
get2 (tag)
dom.get2('div');
pending…
get2 (query)
dom.get2('div#test');
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

test
test
test
test
test
test
test
test
test
test
test
test
test
test
test
test
test
test
test
test
test
test
test
test
test