In the scenario you discuss, the most likely cause of a memory leak is
event handlers on the elements you're replacing. For instance, say you
have a div "foo" with a couple of divs inside it:

    <div id='foo'>
        <div class='watchme'>Stuff</div>

...and you're watching for clicks on the first of the inner divs:


Then you replace the content of 'foo':

    $('foo').update(/* new content */);

The memory associated with the event handler on the old inner div is
not released, e.g., leaks.

There are two ways to address this:

1. Wherever possible, use event delegation and only watch for events
on parts of the structure that don't change. For instance, in my
example above, there's no reason we have to watch the inner div, we
could just watch the outer div ("foo") and then respond to clicks only
when the click originated in the inner div.

    $('foo').observe('click', delegatedClickHandler);

...where delegatedClickHandler looks like this:

    function delegatedClickHandler(event) {
        var thewatchdiv = event.findElement('div.watchme');
        if (thewatchdiv) {
            /* ... do your stuff ... */

This works because most events bubble up the DOM from the element on
which the event occurred to its parent, and its parent, and its
parent, right the way up to the root document.

2. If you have to hook events on the elements that you'll be
replacing, just ensure that you remove those event handlers before you
replace the elements. In most cases, this falls out naturally as part
of your application logic. So if you're doing this when setting up


...you do this when tearing it down:


That removes the `clickHandlerFunction` from the 'click' event of the
element. You can be more general and remove all click handlers from
the element:


...or even _more_ general and remove all handlers from all events on
the element:


Some related reading:
* http://api.prototypejs.org/dom/event/findelement/
* http://api.prototypejs.org/dom/element/stopobserving/

T.J. Crowder
Independent Software Engineer
tj / crowder software / com
www / crowder software / com

On Oct 12, 5:20 am, Rob Cluett <rob.clu...@gmail.com> wrote:
> All, I'm a relatively new javascript programmer and like many I've
> successfully been able to implement prototype.js in a relatively
> complex application.  However, the little expertise I have seems to
> have reached it's limits.  I have an application which constantly
> adds, updates and deletes DOM elements.  This can approach 100's of
> elements with each call.  Some event handlers are attached.  It
> typically does these adds, updates and deletes once once every 60
> seconds.  In an effort to monitor memory utilization in the browser I
> bumped it up to 5 seconds and in no time the memory consumed reaches
> epic levels.  It basically forces the browser to come to a halt.
> The issue is that I'm not sure how to both track down the memory leak
> or inspect my code to which I can find the culprit.  I'm wondering if
> this arena is a good starting point to ask for help.  If I can get
> past this hurdle then I can continue to develop the application.
> Without getting past it the 6 months of work I've done thus far will
> be a waste :( Is there anyone who wouldn't mind helping and educating
> me?

You received this message because you are subscribed to the Google Groups 
"Prototype & script.aculo.us" group.
To post to this group, send email to prototype-scriptacul...@googlegroups.com.
To unsubscribe from this group, send email to 
For more options, visit this group at 

Reply via email to