Top 21 Techblog

Boosting the performance of jQuery 1.3.2 with the Sizzle selector engine 1.0 of jQuery 1.4.2

First of all Sizzle is a standlone project that was first integrated into jQuery 1.3. It can still be seen as standlone when exploring the code further down in this article.

The problem

For one of our JSF projects we´ve been using Richfaces 3.3.3 that bundles jQuery 1.3.2. During development we´ve have been faced to a problem with this version of jQuery including Sizzle selector engine 0.9.3 that appears in combination with Firefox 3.0: It´s a problem of the selector engine in combination with the way some browsers handle case sensitivness of node element names in the dom tree. To stick into the problem just read this ticket from the jQuery bugtracker or this ticket in Richfaces Jira.

Why not just wait for a patch of your framework that includes the latest version of jQuery?

Well in our case we know that Richfaces 3.3.3 as being the main framework of our project will never been upgraded to jQuery 1.4.x, read this comment from Nick Belaevski (who is the chief developer of Richfaces). Running an external jQuery 1.4.x in parallel to Richfaces 3.3.x also might lead to problems - see this ticket.

So what can we do then?

If you just want to get rid of bugs like described above that are problems of the Sizzle selector engine or if you want the performance boost of the latest Sizzle version this is the way of how to modify jQuery 1.3.2:

1. download jQuery-1.3.2.js
2. download jQuery-1.4.2.js
3. open both files in your favorite editor
4. replace the code of the sizzle selector engine from jQuery 1.3.2 with the one from jQuery 1.4.2

What you can see when editing the files is that sizzle-1.0.js is packed into jQuery-1.4.2.js - just search for this comment:

...
/*!
 * Sizzle CSS Selector Engine - v1.0
 *  Copyright 2009, The Dojo Foundation
 *  Released under the MIT, BSD, and GPL Licenses.
 *  More information: http://sizzlejs.com/
 */
(function(){
...

Now, just take everything from this comment in line 2624 down to line 3688 (which is the complete code-block of Sizzle):

window.Sizzle = Sizzle;

})();

...and replace it in jQuery-1.3.2.js where the Sizzle code starts in line 1414:

/*!
 * Sizzle CSS Selector Engine - v0.9.3
 *  Copyright 2009, The Dojo Foundation
 *  Released under the MIT, BSD, and GPL Licenses.
 *  More information: http://sizzlejs.com/
 */
(function(){

and goes down to line 2428:

window.Sizzle = Sizzle;

})();

After the replacement you´re almost done - but sizzle 0.9.3 had some special functions related to jQuery 1.3.2 - we have to re-add the functions in your modified jQuery version like shown here:

...
// EXPOSE
jQuery.find = Sizzle;
jQuery.expr = Sizzle.selectors;
jQuery.expr[":"] = jQuery.expr.filters;
jQuery.unique = Sizzle.uniqueSort;
jQuery.text = getText;
jQuery.isXMLDoc = isXML;
jQuery.contains = contains;

/*
START: re-add functions for usage in jQuery 1.3.2
*/
Sizzle.selectors.filters.hidden = function(elem){
	return elem.offsetWidth === 0 || elem.offsetHeight === 0;
};
Sizzle.selectors.filters.visible = function(elem){
	return elem.offsetWidth > 0 || elem.offsetHeight > 0;
};
Sizzle.selectors.filters.animated = function(elem){
	return jQuery.grep(jQuery.timers, function(fn){
		return elem === fn.elem;
	}).length;
};
jQuery.multiFilter = function( expr, elems, not ) {
	if ( not ) {
		expr = ":not(" + expr + ")";
	}

	return Sizzle.matches(expr, elems);
};
jQuery.dir = function( elem, dir ){
	var matched = [], cur = elem[dir];
	while ( cur && cur != document ) {
		if ( cur.nodeType == 1 )
			matched.push( cur );
		cur = cur[dir];
	}
	return matched;
};
jQuery.nth = function(cur, result, dir, elem){
	result = result || 1;
	var num = 0;

	for ( ; cur; cur = cur[dir] )
		if ( cur.nodeType == 1 && ++num == result )
			break;

	return cur;
};
jQuery.sibling = function(n, elem){
	var r = [];

	for ( ; n; n = n.nextSibling ) {
		if ( n.nodeType == 1 && n != elem )
			r.push( n );
	}

	return r;
};
/*
END: re-add functions for usage in jQuery 1.3.2
*/

return;

window.Sizzle = Sizzle;

})();
...

And that´s it! So far we had no problems in using jQuery 1.3.2 in combination with sizzle 1.0 and also our problem mentioned at the beginning was gone when packing this version of jQuery 1.3.2 into the Richfaces 3.3.3 jar ;)