browser memory increasing constantly with javascript ajax calls

Question

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

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
– Ilya Volodin, Commented Mar 9, 2010 at 18:54
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
– MyGGaN, Commented Mar 9, 2010 at 18:58
actually, I have many event handlers. For example I have this events : $("#orders_list .list_table_row").hover( function(){ // mouse over $(this).children().css("background-color","#E0E0E0"); }, function(){ // mouse out $(this).children().css("background-color",""); }); It is a jquery standard function. If I understand correctly, I should unbind all the events from my 3000 nodes before replacing them? — Paul
– Paul, Commented Mar 9, 2010 at 19:18
I found this interesting page : javascriptkit.com/javatutors/closuresleak/index3.shtml — Paul
– Paul, Commented Mar 9, 2010 at 19:29

bcherry · Accepted Answer · 2010-03-09 20:00:02Z

4

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/

answered Mar 9, 2010 at 20:00

bcherry

7,2482 gold badges32 silver badges37 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Paul Over a year ago

Thanks bcherry! Very interesting. I will explore this feature. Actually I used $(".myclass").unbind(/*...*/) before replacing the nodes, and it fixed my issue.

Ilya Volodin · Accepted Answer · 2010-03-09 20:55:15Z

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

answered Mar 9, 2010 at 20:55

Ilya Volodin

11.3k2 gold badges49 silver badges49 bronze badges

1 Comment

Paul Over a year ago

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!

Collectives™ on Stack Overflow

browser memory increasing constantly with javascript ajax calls

2 Answers 2

1 Comment

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related