querySelectorAll vs jQuery $() vs select()

JavaScript performance comparison

Revision 2 of this test case created by Todd Henderson

Preparation code

<div id='fixture'> </div>
<div class='fixtureClass'> </div>
<ul id='fixtureList'>
<li class='fixtureListElement'></li>
<li class='fixtureListElement'></li>
<li class='fixtureListElement'></li>
</ul>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>

      
<script>
Benchmark.prototype.setup = function() {
  		/**
  		 * Returns a list of the elements within the scope that match the specified group of selectors.
  		 *
  		 * @param {string} selector -  A CSS selector to be queried.
  		 * @param {HTMLElement} [scope=document] - Scope for query.
  		 * @param {selectCallback} callback - Passes the results
  		 * @returns {HTMLElement[]|bull} Returns a non-live array of HTMLElement if a callback function
  		 * is not passed or null if no matching element found.
  		 * @public
  		 */
  
  		function select(selector, scope, callback) {
  		  /**
  		   * Selector scope
  		   *
  		   * @type {HTMLElement}
  		   * @private
  		   */
  		  var _scope = scope || document,
  		    _results;
  
  
  		  if (selector.indexOf("#") === 0 && selector.indexOf(" ") === -1 && selector.indexOf(".") === -1) {
  		    _results = [_scope.getElementById(selector.slice(1))];
  		  } else if (selector.indexOf(".") === 0 && selector.indexOf("#") === -1 && selector.indexOf(":") === -1) {
  		    _results = [].slice.call(_scope.getElementsByClassName(selector.replace(/./g, " ")));
  		  } else if (/^[a-zA-Z]+$/.test(selector)) {
  		    _results = [].slice.call(_scope.getElementsByTagName(selector));
  		  } else {
  		    _results = [].slice.call(_scope.querySelectorAll(selector));
  		  }
  
  		  if (typeof callback === 'function') {
  		    callback(null, _results);
  		  } else {
  		    return _results;
  		  }
  		}

};
</script>

Preparation code output

<div id='fixture'> </div> <div class='fixtureClass'> </div> <ul id='fixtureList'> <li class='fixtureListElement'></li> <li class='fixtureListElement'></li> <li class='fixtureListElement'></li> </ul>

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
document.querySelector('#fixture')
var div = document.querySelector('#fixture');
pending…
document.querySelector('.fixtureClass')
var div = document.querySelector('.fixtureClass');
pending…
document.querySelector('.fixtureListElement')
var div = document.querySelector('.fixtureListElement');
pending…
$('#fixture')
var div = $('#fixture');
pending…
$('.fixtureClass')
var div = $('.fixtureClass');
pending…
$('.fixtureListElement')
var div = $('.fixtureListElement');
pending…
select('#fixture')
var div = select('#fixture');
pending…
select('.fixtureClass')
var div = select('.fixtureClass');
pending…
select('.fixtureListElement')
var div = select('.fixtureListElement');
pending…
select('li')
var div = select('li');
pending…
document.querySelector('li')
var div = document.querySelector('li');
pending…
$('li')
var div = $('li');
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