Speeding Up Prototype’s $$ Selector
Prototype, as I've stated in the past, is our Javascript library of choice for Ajax at Plymouth State University and in the current re-writing of MasterWish. As of version 1.5 of Prototype there has been a sweet Selector function $$ which is best used when manipulating more than one dom element of the same type...i.e. updating all buddies in a buddy list at MasterWish with some property.
Here's a simple example that we use at MasterWish:
-
mw_b.prototype.checkAll = function()
-
{
-
$$('.buddy_checkbox').each(function(e){e.checked=true;});
-
};
All that example does is iterates over all elements in the DOM that have the class buddy_checkbox and sets their checked value to true. Short and sweet. However, with version 1.5 of Prototype, it could be dog slow at times with more complex selector queries.
I was ecstatic when I found (via Ajaxian) that Sylvain Zimmer has sped up the $$ function quite a bit. I implemented it in the test area of MasterWish and have been very pleased with the results! Here's what Sylvain has to say on his mod:
Prototype’s current code is quite elegant (as always!) but very slow, so I wrote an add-on that makes this function up to 20 times faster in most usual cases (tested on IE6, Firefox 1.5 and Opera).
[...]
Here are the main ideas of this add-on :
- Forwarding the call to the old $$ if the selector expression is too complicated (currently : if it uses attributes)
- Replacing regular expressions with a simple parser
- Minimizing the number of operations done on each iteration.
- Trying to use getDocumentById() instead of getDocumentByTagName() when possible.
- Avoiding recursive functions with return values.
- Not being afraid of some “old-style” code if it speeds up the execution ;-)
All you need do is get his mod and include it in a script tag after the Prototype inclusion. Simple as that!
Discuss This Article
|
|
