Browser memory is constantly increasing with javascript ajax calls

Question

I have strange behavior. I use a rather heavy page (4000 nodes) designed to display a dispatch system for delivery operations. Every 30 sec I am updating using jquery operations list (3000 nodes over 4000). It works fine, but ... every time the memory of both firefox and chrome increases by 3 - 6ko. Of course, after some time the browser will crash ...

Does anyone have any ideas why? Is it a memory leak? Is javascript crashing somewhere? I checked, and after each update I have the same number of nodes, which means that the replacement is working correctly.

After each update operation, I reset several events occur: 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, tips, 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

Version 1 - added sample code and links

Answer 1

Your problem is probably related to event handlers. Managing the binding and unpinning of all these nodes with each update is probably too complicated.

Try using event delegation. The jQuery .live() method is what you want. This will speed up the upgrade and eliminate the complexity and leaks of the event handler.

Instead of $(".myclass").click(/*...*/) use $(".myclass").live("click", /*...*/) . You need to do this only once, when loading the page, and it will work for all future elements with this class, even after updating ajax.

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

Answer 2

You must untie (and, preferably, destroy) the event handlers before deleting the nodes to which these events are attached. Otherwise, a memory leak will occur.
IE also has a memory leak problem when using closures, if the closure was orphaned at some point and was not properly destroyed, in some cases the garbage collector will not be able to pick it up. There are several tools for tracking memory leaks (Firefox one noted above in the comments), IE Leak Detector , JavaScript memory leak detector
Additional information about memory leaks in browsers (mainly IE):
Understanding and resolving Internet Explorer leak patterns
IE leak closure