Using Sizzle with Prototype

Recently, John Resig of jQuery fame released the selector engine used in the new version of jQuery called Sizzle.  Sizzle is a new take on using CSS selectors within Javascript and aims to be far more efficient than the methods commonly used by most current Javascript libraries.

Currently, I’m working on a large project that is nearly ready to deploy.  Most of the Javascript for this project has been written using the Prototype framework; however, we wanted to leverage the speed of the new Sizzle selectors engine in our project.  Given that we are deep in the QA process of the project, large code changes are discouraged to ensure code stability.  What we needed was a quick way to integrate Sizzle with Prototype.

The following code can be added to your Prototype 1.6.x file and will ensure that prototype’s main element collection methods (Element#select and $$) both use Sizzle.  I’ve written before on how slow $$ can be, so these are two quick wins for Prototype performance.

//Overwrite findChildElements to use Sizzle http://sizzlejs.com
Selector.findChildElements = function(element, expression){
    expression = expression.join(", ");
    var results = Sizzle(expression, element);
    if(results.length > 0){
        for(var i=0; i < results.length; i++){
            results[i] = Element.extend(results[i]);
        }
    }
    return results;
};