current community

your communities

more stack exchange communities

Stack Exchange
tour help
stack overflow careers
Take the 2-minute tour ×
Stack Overflow is a question and answer site for professional and enthusiast programmers. It's 100% free, no registration required.
up vote 2 down vote favorite

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

share|improve this question
    
Code (even minified) would be welcome... ;) –  Bobby Mar 9 '10 at 18:51
1  
Some more information would be nice. Like for example, does any of the 4000 nodes you are replacing have event handlers attached to them, are you using closures, etc. All of those could be a reason for memory leaks. –  Ilya Volodin Mar 9 '10 at 18:54
1  
There is a memory leak monitor plugin for FF, I've not tried it much (just installed it). Maybe it could give you a hint? addons.mozilla.org/en-US/firefox/addon/2490 –  MyGGaN Mar 9 '10 at 18:58
    
Are you using JSONP? –  Andy E Mar 9 '10 at 19:13
1  
I found this interesting page : javascriptkit.com/javatutors/closuresleak/index3.shtml –  Paul Mar 9 '10 at 19:29

2 Answers 2

up vote 4 down vote accepted

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/

share|improve this answer
    
Thanks bcherry! Very interesting. I will explore this feature. Actually I used $(".myclass").unbind(/*...*/) before replacing the nodes, and it fixed my issue. –  Paul Mar 9 '10 at 21:51
up vote 2 down vote

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

share|improve this answer
    
thanks Ilya! I think the events are the problem with the closure issue. I did unbound all events before replacing and it fixed the issue. Thanks for your help! Cheers! –  Paul Mar 9 '10 at 21:50

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.