querySelectorAll vs Custom Query Method

JavaScript performance comparison

Revision 5 of this test case created by Ryan Morr

Preparation code 

<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>

Preparation code output

<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

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
querySelectorAll 
document.querySelectorAll('.item');
 pending…
query 
query('.item');
 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