Sizzle - John Resig's new Selector Engine

[danh2000]

http://github.com/jeresig/sizzle/tree/master

I think we'll see a lot of rewrites to selector engines with the Big 4 browsers all planning on having native querySelectorAll implementations by the end of the year.

I know it's not Ext related, but still relevant and competition can only mean positive things for the end users.

[jmueller]

The Firefox 3.1 alpha includes the native querySelector API (http://www.w3.org/TR/selectors-api/), and there's a CSS selector benchmark (http://webkit.org/perf/slickspeed/) that allows you to compare CSS selection speed in Prototype, jQuery, and Ext to the native speed.

Running this benchmark in today's FF 3.1 nightly build, I got the following results on my machine:

Prototype: 20,212 ms
jQuery: 39,386 ms
Ext: 23,118 ms
Native: 904 ms

I then updated Prototype Selector.findChildElements, and Ext.DomQuery.select and Ext.DomQuery.selectNode to use querySelectorAll and querySelector, if available. Prototype has a bit of overhead "extending" the returned elements, and both Prototype and Ext have some overhead in converting the resulting StaticNodeList to an array, but it still makes quite a large difference:

Prototype: 4,571 ms
jQuery: 39,896 ms
Ext: 3,242 ms
Native: 887 ms

[Animal]

I hope Jack is keeping up with these developments. That's quite a speed boost. I assume you can detect the feature in Ext.DomQuery.select and have it use the feature only if it's present?

Can you show us your code?

[jay@moduscreate.com]

Thanks for posting. Resig is awesome.

[jmueller]

Sure, here's the code. I changed the following two functions in Ext.DomQuery. The bold parts are what I added. It's possible that testing for querySelectorAll just once and storing a boolean might perform better than testing for it on each method call; I haven't really investigated that.


select : function(path, root, type){
if(!root || root == document){
root = document;
}
if(typeof root == "string"){
root = document.getElementById(root);
}

if (root.querySelectorAll)
{
return Array.prototype.slice.call(root.querySelectorAll(path));
}

var paths = path.split(",");
var results = [];
for(var i = 0, len = paths.length; i < len; i++){
var p = paths[i].replace(trimRe, "");
if(!cache[p]){
cache[p] = Ext.DomQuery.compile(p);
if(!cache[p]){
throw p + " is not a valid selector";
}
}
var result = cache[p](root);
if(result && result != document){
results = results.concat(result);
}
}
if(paths.length > 1){
return nodup(results);
}
return results;
},

/**
* Selects a single element.
* @param {String} selector The selector/xpath query
* @param {Node} root (optional) The start of the query (defaults to document).
* @return {Element}
*/
selectNode : function(path, root){
if(!root || root == document){
root = document;
}
if(typeof root == "string"){
root = document.getElementById(root);
}

if (root.querySelector)
{
return root.querySelector(path);
}

return Ext.DomQuery.select(path, root)[0];
}

In addition, when I went to test this, I got an "invalid selector" error out of Ext.Button. I tracked it down to the following line of code in Ext.Button:

buttonSelector:"button:first"

Sure enough, that looks like an invalid selector to me. I changed it to "button:first-child" and it worked fine after that.

[jmueller]

FWIW, I just ran this same benchmark, with my querySelector optimizations for Prototype and Ext, in Google Chrome beta 1, on the same machine as before.

Prototype: 2,086 ms
jQuery: 23,684 ms
Ext: 1,692 ms
Native: 939 ms

[pbuyle]

Sizzle is small (announced as under 4Kb) and does not depends on any JS library/framework. It's also announced as designed to be used as CSS selector engine in larger library/framework and expected to be used in JQuery, MochiKit, Prototype and Dojo.

Is there any plant to use it in a future version of ExtJS ?

[Animal]

I'm just trying this out. We have a comlpex, large GridPanel which is being manipulated heavily, so I'm guessing we're doing a lot of DOM manipulation.

But I'm on FF 3.0.4, and just trying out the call in Firebug, my Elements do not expose a querySelectorAll function.

[silvereen]

Does any one know if there are any plans to add querySelector and querySelectorAll to the core?

Thanks

[aconran]

Yes, integrating querySelectorAll is slated for a future release.