q vs. getElementById vs. getElementsByClassName vs. jQuery

JavaScript performance comparison

Revision 150 of this test case created by ZAlexz

Preparation code

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
</script>
<p id="bar" class="my-bar">
  Bar
</p>
<div id="coo" class="my-foo">
  <div id="car" class="my-bar">
    <div id="caz" class="my-bar">
<div id="hoo" class="my-boo">
  <div id="har" class="my-bar">
    <div id="haz" class="my-bar">
<div id="yoo" class="my-boo">
  <div id="yar" class="my-bar">
    <div id="yaz" class="my-bar">
<div id="zoo" class="my-boo">
  <div id="zar" class="my-bar">
    <div id="zaz" class="my-bar">

      <span id="baz" class="my-baz">Baz</span>

    </div>
  </div>
</div>
    </div>
  </div>
</div>
    </div>
  </div>
</div>
    </div>
  </div>
</div>
      
<script>
Benchmark.prototype.setup = function() {
  var zaz = document.getElementById('zaz');
  
  function El(el){ this._el = el; }
  El.prototype.append = function append(el){ this._el.appendChild(el); return this; }
  
  function q(id){ return new El(document.getElementById(id)); }
  function qq(_class){ return document.getElementsByClassName(_class); }
  function qqTag(tag){ return document.getElementsByTagName(tag); }
  
  function qs(selector){ return new 
      El(document.querySelector(selector)); }
  // NOTE: querySelectorAll() is, like JQuery, which is even WORSE... incredibly SLOW & to be avoided at all cost!
  
  function $q(selector){
    if (typeof selector === 'object'){
      return new El(selector);
    } else {
      if (selector.indexOf('#') === 0) return q(selector.substr(1));
      if (selector.indexOf('.') === 0) return qq(selector.substr(1));
      if (selector.match( /[\#\.\[\ \:]/ ) ) return qs(selector);
      else return qqTag(selector);
    }
  }
  
  
  function DOMcomb(parent, elems, filter_callback) {
      var cs = parent.children, len = cs.length; 
      if (filter_callback(parent)) elems.push(parent);
      if (len) for (var i = 0; i < len; ++i) DOMcomb(cs[i], elems, filter_callback);
  }
  

};
</script>

Preparation code output

<p id="bar" class="my-bar"> Bar </p> <div id="coo" class="my-foo"> <div id="car" class="my-bar"> <div id="caz" class="my-bar"> <div id="hoo" class="my-boo"> <div id="har" class="my-bar"> <div id="haz" class="my-bar"> <div id="yoo" class="my-boo"> <div id="yar" class="my-bar"> <div id="yaz" class="my-bar"> <div id="zoo" class="my-boo"> <div id="zar" class="my-bar"> <div id="zaz" class="my-bar"> <span id="baz" class="my-baz">Baz</span> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </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
var baz = document.getElementById("baz");
pending…
q(id)
var baz = q('baz');
pending…
el.getElementsByClassName
var baz = zaz.getElementsByClassName('my-baz');

/// can we make this faster somehow, with DOMcomb()?!
pending…
qq(class)
var baz = qq('my-baz');
pending…
DOMcomb(el)
var elems = [ ];
DOMcomb(zaz, elems,
  function(el){ return (el.className.indexOf('my-baz') >= 0);
});
pending…
$q(#id)
var baz = $q("#baz");
// that's right, we're still 4x faster than the JQuery base case!
// >> var baz = $("#baz");
pending…
$(el)
var zaz = $(zaz);
// JQuery is just pitiful on the straight Element pass in... must be all of those object type tests?!
pending…
$q(el)
var zaz = $q(zaz);
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

Baz