querySelectorAll vs Custom Query Method (v7)

Revision 7 of this benchmark created by Ryan Morr on

Description

Testing the performance of the native querySelectorAll method against a custom solution that employs getElementById, getElementsByTagName, and getElementsByClassName for simple selectors to improve performance.

Preparation HTML

<script>
(function(win){
    'use strict';

    var doc = win.document, simpleRe = /^(#?[\w-]+|\.[\w-.]+)$/, periodRe = /\./g, slice = [].slice;

    win.query = function(selector, context){
        context = context || doc;
        if(simpleRe.test(selector)){
            switch(selector.charAt(0)){
                case '#':
                    return context.getElementById(selector.substr(1));
                case '.':
                    return slice.call(context.getElementsByClassName(selector.substr(1).replace(periodRe, ' ')));
                default:
                    return slice.call(context.getElementsByTagName(selector));
            }
        }
        return slice.call(context.querySelectorAll(selector));
    };
    
})(this);
</script>

<div id="foo" class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>

Test runner

Ready to run.

Testing in
TestOps/sec
querySelectorAll
var list = document.querySelectorAll('.item'), len = list.length, i = 0, result;

for(; i < len; i++){
    result = list[i];
}
ready
query
var list = query('.item'), len = list.length, i = 0, result;

for(; i < len; i++){
    result = list[i];
}
ready

Revisions

You can edit these tests or add more tests to this page by appending /edit to the URL.