browser memory increasing constantly with javascript ajax calls

Question

Hi,

I have a strange behaviour. I am using a rather heavy page (4000 nodes) meant to display a dispatch system for delivery operations. Every 30 sec. I am refreshing with jquery, the list of operations (3000 nodes over 4000). It works perfectly well, but... each time, the memory of both firefox and chrome is increasing by 3 to 6ko. Of course, after a while, the browser crashes...

Does anybody have any kind of idea why? Is it a memory leak? Does javascript fail to somewhere? I checked, and after each refresh I have the same number of nodes which means the replacement is performed properly.

After each refresh operation I reset a couple of events : here is an example

$("#orders_list .list_table_row").hover(
            function(){
            //  mouse over
                $(this).children().css("background-color","#E0E0E0");   
            },
            function(){
            //  mouse out
                $(this).children().css("background-color","");  
            });

Any suggestion is really welcome, hints, anything...

I found 2 interesting links : http://www.javascriptkit.com/javatutors/closuresleak/index3.shtml and http://www.jibbering.com/faq/faq_notes/closures.html

Thanks, Paul

Revision 1 - added code sample and links

Answer 1

Your problem is probably the event handlers. Managing the binding and unbinding of all those nodes every refresh is probably over-complex.

Try using event delegation instead. jQuery's .live() method is what you want. It will make the refreshes faster and remove the event handler complexity and leaks.

Instead of $(".myclass").click(/*...*/) use $(".myclass").live("click", /*...*/). You only have to do it once, at page load, and it will work for all future elements with that class, even following your ajax refreshes.

See documentation: http://api.jquery.com/live/

Answer 2

You have to unbind (and preferably destroy) event handlers before removing nodes that those events are bound to. Failing to do so will leak memory.
IE also has a problem with leaking memory when using closures, if the closure is orphaned at some point and not properly destroyed, in some causes garbage collector will not be able to pick it up. There are a few tools available to trace memory leaks (Firefox one is noted above in comments), IE Leak Detector, JavaScript Memory Leak Detector
Some more information about Memory Leaks in the browsers (mostly IE):
Understanding and Solving Internet Explorer Leak Patterns
Closures Leaks in IE