querySelectorAll vs Custom Query Method

JavaScript performance comparison

Revision 31 of this test case created by Valerio Mazza

Preparation code

<script>

function Y(f) {
    return (function(h) {
        return h(h);
    })(function(h) {
        return f(function() {
            return h(h).apply(this, arguments);
        });
    });
}

var doc = this.document,
	getElementById = doc.getElementById,
	getElementsByClassName = doc.getElementsByClassName,
	getElementsByTagName = doc.getElementsByTagName,
	querySelectorAll = doc.querySelectorAll;

function select(selectors, context) {
context = context || doc;
	var selectors = selectors.split(',');
	return (Y(_selects)).apply(context, [selectors, context]);
}

function _selects(selectors, context) {
 context = context || doc;
		return function(ss) {
		    return (ss.length === 0) ? _select.apply(context, [ss, context]) :	_selects.apply(context, [ss[ss.length--], context]);
	}
}

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

function _select(selector, context) {
context = context || doc;
    if(simpleRe.test(selector)) {
        switch(selector[0]) {
            case '#':
                return [getElementById.call(context, selector.slice(1))];
            case '.':
                return slice.call(getElementsByClassName.call(context, selector.slice(1)));
            default:
                return slice.call(getElementsByTagName.call(context, selector));
		}
    }
    return slice.call(querySelectorAll.call(context, selector));
}

function Ymem(F, cache) {
	if (!cache)
		cache = {} ; // Create a new cache.
	
	return function(arg) {
		if (cache[arg])
			return cache[arg] ; // Answer in cache.
  
		var answer = (F(function(n){
			return (Ymem(F,cache))(n);}))(arg); // Compute the answer.
  
		cache[arg] = answer ; // Cache the answer.
		return answer ;
	};
}
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/zepto/1.2.0/zepto.min.js">
</script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/blissfuljs/1.0.4/bliss.min.js">
</script>

<div id="foo" class="item"></div> <div class="item"><div class="sub"><a class="link"><span class="inner"></span></a></div></div> <div class="item"><div class="sub"><a class="link"><span class="inner"></span></a></div></div><div class="item"><div class="sub"><a class="link"><span class="inner"></span></a></div></div><div class="item"><div class="sub"><a class="link"><span class="inner"></span></a></div></div><div class="item"><div class="sub"><a class="link"><span class="inner"></span></a></div></div><div class="item"><div class="sub"><a class="link"><span class="inner"></span></a></div></div><div class="item"><div class="sub"><a class="link"><span class="inner"></span></a></div></div><div class="item"><div class="sub"><a class="link"><span class="inner"></span></a></div></div><div class="item"><div class="sub"><a class="link"><span class="inner"></span></a></div></div><div class="item"><div class="sub"><a class="link"><span class="inner"></span></a></div></div><div class="item"><div class="sub"><a class="link"><span class="inner"></span></a></div></div><div class="item"><div class="sub"><a class="link"><span class="inner"></span></a></div></div>
    

Preparation code output

<div id="foo" class="item"></div> <div class="item"><div class="sub"><a class="link"><span class="inner"></span></a></div></div> <div class="item"><div class="sub"><a class="link"><span class="inner"></span></a></div></div><div class="item"><div class="sub"><a class="link"><span class="inner"></span></a></div></div><div class="item"><div class="sub"><a class="link"><span class="inner"></span></a></div></div><div class="item"><div class="sub"><a class="link"><span class="inner"></span></a></div></div><div class="item"><div class="sub"><a class="link"><span class="inner"></span></a></div></div><div class="item"><div class="sub"><a class="link"><span class="inner"></span></a></div></div><div class="item"><div class="sub"><a class="link"><span class="inner"></span></a></div></div><div class="item"><div class="sub"><a class="link"><span class="inner"></span></a></div></div><div class="item"><div class="sub"><a class="link"><span class="inner"></span></a></div></div><div class="item"><div class="sub"><a class="link"><span class="inner"></span></a></div></div><div class="item"><div class="sub"><a class="link"><span class="inner"></span></a></div></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
blissful
var list = $$('.item .sub a span'), len = list.length, i = 0, result;

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

Revisions

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

0 Comments