Browser Memory Increasing Constantly With Javascript Ajax Calls

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 l

Solution 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/

Solution 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 PatternsClosures Leaks in IE