JQuery (2.0.2) empty () html () memory consumption is constantly growing

Question

I have been struggling with this problem for 3 days and hope that someone has some information that I have not yet met to help me (I am in despair!). To provide some context:

Browser: IE9.0.8112.16421 (64 bit); JQuery Version: 2.0.2

Essentially, I make a simple ahax call and retrieve some information that I insert into the element through a success handler. The corresponding lines of code are shown below:

var onLoadViewGroupSuccess = function(data) { var target = $("#viewGroupContent"); //for(var i=0;i<1000;i++) { target.empty().html(data); //} } 

The target corresponds to the following html tag:

 <tr id="viewGroupContent">...</tr> 

The loop written above is intended to increase the problem (which is difficult to detect with single-event triggers). Essentially, when the loop is in place, the memory for one call goes from 46 MB to ~ 113 MB.

Subsequent calls exhibit the same behavior as memory is constantly growing. Initially, I thought it was a problem with some kind of event handler that I could not clear, but solved it, since I commented on almost all of my JavaScript logic, so the above is essentially all there is (i.e. no related event handlers, no custom objects or functions are called) - i.e. no problem closing.

Moving the for loop outside the ajax call (so 1000 ajax calls) results in the same memory profile (thus eliminating any obscure ajax memory leak). The content that I insert is a TD tag containing a significant amount of content (for example, instances of each HTML tag that you can include in images), therefore asking the question how I insert the content is somehow responsible for the leak.

I read some interesting blog posts regarding IE's ability to clean up after itself, including the following that seem to be the most promising ( http://com.hemiola.com/2009/11/23/memory-leaks-in-ie8/ ). Unfortunately, there are no solutions or workarounds yet.

I am at a loss as I removed my application on bare bones and not much can be done with $(...).empty().html(...) . A memory leak is slow but constant ....

Also, as FYI, I tried jQuery-free solutions using innerHTML, DOM methods to remove the table row and rebuild it, then insert the ajax contents into the table cells, moving the dropped content to the DIV bin, and then calling innerHTML, all to no avail , and in many cases make it difficult to leak ...

Answer 1

See my last comment above, it seems that I perceive that these memory leaks were objects expecting GC'd, but due to the nature of my application (i.e. 99% of navigations made through ajax). IE just wasn't running the full GC until the actual page navigation (e.g. window.top unloaded) happened. It happened to notice this when leaving the system, and suddenly the memory for my IE instance fell from 200-63 MB ... I tried to manually call GC (but this does not seem to work ...). So now, replacing every nth ajax navigation with actual page navigation to clear things up ... not perfect, but will do it for now, until I can find a better way.

Answer 2

Try updating the jQuery library to see if it has some improvements.

And remove the "empty ()" function. This is not necessary because html () will override all chills. This can help you avoid memory usage.

Answer 3

Did you try to put the received data into a shell element that you delete during the next iteration?

 var onLoadViewGroupSuccess = function(data) { var target = $("#viewGroupContent"); //for(var i=0;i<1000;i++) { target.find('>div').remove(); target.append($('<div>').html(data)); //} } 

If any leak is associated with the clean() API, you will get rid of it.

Answer 4

I have the same problem and solve it like this:

JQuery setInterval with added extended memory

You should compare if the data matches the target. If not, insert the data, otherwise do nothing.