querySelectorAll vs. select()

JavaScript performance comparison

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() {
  function select(selector, scope, callback) {
    var _scope = scope || document,
      _results = _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
$('#fixture')
var div = $('#fixture');
pending…
$('.fixtureClass')
var div = $('.fixtureClass');
pending…
select('li')
var div = select('li');
pending…
select('.fixtureClass')
var div = select('.fixtureClass');
pending…
document.querySelector('li')
var div = document.querySelector('li');
pending…
select('#fixture')
var div = select('#fixture');
pending…
$('li')
var div = $('li');
pending…
document.querySelector('#fixture')
var div = document.querySelector('#fixture');
pending…
document.querySelector('.fixtureClass')
var div = document.querySelector('.fixtureClass');
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