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:
JavaScript:
-
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
Leave a Reply
(1347) - prototype selectors (87) - prototype selector (56) - prototype checked (42) - prototype class selector (17) - prototype $$ selector (10) - prototype (8) - prototype checkall (6) - selectors prototype (5) - prototype ie slow (4) - prototype isChecked (4) - prototype ie6 slow (4) - checked prototype (4) - prototype selector $$ (3) - prototype slow in ie (3) - prototype slow (3) - prototype set checked (3) - prototype ajax slow (3) - prototype slow ie (3) - prototype regex selectors (2) - Selector prototype (2) - prototype selector regex (2) - slow ajax prototype (2) - prototype if checked (2) - regex prototype selectors (2) - prototype $$ checked (2) - selectors in prototype $$ (1) - $$() prototype all checked (1) - prototype each slow (1) - prototype getWidth slow (1) - prototype selectors example (1) - prototype selectors class (1) - PROTOTYPE type (1) - prototype [checked] (1) - IE javascript recursive function slow (1) - IE6 javascript very slow prototype (1) - prototype slow ie6 (1) - prototype .each() ie (1) - prototyp selectors (1) - speeding ie6 (1) - prototype $$ selector ie problem (1) - getDocumentBytagName in javascript (1) - prototype selector regular expression (1) - ie6 prototype up function (1) - regex prototype selector (1) - prototype slow explorer (1) - $$ selectors prototype (1) - prototype viewportoffset ie (1) - slow prototype up (1) - prototy slow on internet explorer (1) - speeding up ajax prototype (1) - prototype selectors regex (1) - prototype each IE (1) - viewportOffset slow ie6 (1) - prototype slow in explorer (1) - prototype $ selector (1) - prototype $A selectors (1) - ie prototype each (1) - prototype viewportOffset slow (1) - checked with prototype (1) - $$ slow in ie prototype (1) - prototype $$ selector each function (1) - prototype IE slowness (1) - prototype $$ selector problems (1) - prototype $ selectors (1) - prototype selectors $$ (1) - prototype each slowness (1) - prototype on checked (1) - prototype class selectors (1) - prototype selector slow IE6 (1) - prototype is checked (1) - Prototype check all (1) - prototype is slow (1) - prototype ie (1) - prototype Internet Explorer slow (1) - javascript prototype slow (1) - class selector prototype (1) - prototype Selector examples (1) - prototype $$ slow (1) - writing prototype selectors (1) - prototype _getElementsByXPath slow (1) - IE slow with prototype (1) - prototype selector support (1) - prototype selector .getElementsBySelector() (1) - prototype each IE slow (1) - selector prototype event (1) - prototype Type selector or (1) - prototype get checked (1) - prototype isChecked() (1) - prototype using $$ selector (1) - prototype selector :checked (1) - prototype slow ie 6 (1) - slow prototype (1) - prototype class selector problem (1) - prototype.ie ie6 (1) - prototype each function slow (1) - _getElementsByXPath IE (1) - prototype $().checked (1) - eventselectors (1) -
