Selector Performance

by termi

HTML

<script src="http://javascript.nwbox.com/NWMatcher/nwmatcher.js"></script>
<script src="https://raw.github.com/ded/qwery/master/src/qwery.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/dojo/1/dojo/dojo.js"></script>
<script src="https://raw.github.com/jquery/sizzle/master/sizzle.js"></script>
<a href="#" id="linky"></a>

JavaScript

jQuery.noConflict();

var html = "";
for ( var i = 0; i < 100; i++ ) {
    html = "<div class='power'>" + html + "</div>";
}
jQuery("body").append( html );

var qsa = document.querySelectorAll;

var engines = {
    "qsa": "document.querySelectorAll(s)",
    "NW": "NW.Dom.select(s)",
    "qwery": "qwery(s)",
    "dojo": "dojo.query(s)",
    "Sizzle": "Sizzle(s)"
};

function test( selector ) {
    console.log( "========" + selector + "=========" );
    for ( var name in engines ) {
        console.time( name );
        var select =
            new Function("s", "return " + engines[ name ]);
        try {
            for ( var j = 0; j < 1000; j++ )
                select( selector );
        } catch( e ) {
            console.log( e );
        }
        console.timeEnd( name );
        if ( name === "qsa" ) {
            document.querySelectorAll = null;
        }
    }
    document.querySelectorAll = qsa;
}

test("#linky");
test("#linky.power");
test(".power");
test("div.power");
test("div");
test("body");
test("body>div");
test("[class='power']");
test("div div");
test("div>div");
test("div+div");
test("body>div+div");
test("body div div div");