Best IT Recipes

Why is jquery's memory leak so bad?

This will be the result of a question I posted last week: Simple jQuery Ajax causes memory leak in Internet Explorer

I like jquery syntax and all its nice features, but I am having problems with a page that automatically updates table cells through ajax calls, memory leak.

So, I created two simple test pages for experiments. Both pages make an ajax call every 0.1 seconds. After each successful ajax call, the counter increments and the DOM is updated. The script stops after 1000 cycles.

One uses jquery to call ajax and to update the DOM. Another uses the Yahoo API for ajax and does document.getElementById (...). InnerHTML for updating the DOM.

The jquery version has bad memory leaks. Running in a bit (on XP Home with IE7) starts at 9 MB and ends at about 48 MB, while the memory grows linearly all the time. If I comment on the line that updates the DOM, it still ends up at 32 MB, assuming that even simple DOM updates leak a significant amount of memory. The non-jquery version starts and ends about 9 MB, regardless of whether it updates the DOM.

Does anyone have a good explanation of what causes jquery to leak so badly? Am I missing something? Is there a circular link that I don't know about? Or is jquery having serious memory problems?

Here is the source for the jquery version:

<html> <head> <script type="text/javascript" src="http://www.google.com/jsapi"></script> <script type="text/javascript"> google.load('jquery', '1.4.2'); </script> <script type="text/javascript"> var counter = 0; leakTest(); function leakTest() { $.ajax({ url: '/html/delme.x', type: 'GET', success: incrementCounter }); } function incrementCounter(data) { if (counter<1000) { counter++; $('#counter').text(counter); setTimeout(leakTest,100); } else $('#counter').text('finished.'); } </script> </head> <body> <div>Why is memory usage going up?</div> <div id="counter"></div> </body> </html>

And here is the unsafe version:

 <html> <head> <script type="text/javascript" src="http://yui.yahooapis.com/2.8.0r4/build/yahoo/yahoo-min.js"></script> <script type="text/javascript" src="http://yui.yahooapis.com/2.8.0r4/build/event/event-min.js"></script> <script type="text/javascript" src="http://yui.yahooapis.com/2.8.0r4/build/connection/connection_core-min.js"></script> <script type="text/javascript"> var counter = 0; leakTest(); function leakTest() { YAHOO.util.Connect.asyncRequest('GET', '/html/delme.x', {success:incrementCounter}); } function incrementCounter(o) { if (counter<1000) { counter++; document.getElementById('counter').innerHTML = counter; setTimeout(leakTest,100); } else document.getElementById('counter').innerHTML = 'finished.' } </script> </head> <body> <div>Memory usage is stable, right?</div> <div id="counter"></div> </body> </html>
+63
jquery ajax memory memory-leaks
Mar 15 '10 at 21:53
source share
1 answer

My initial thought was that it has something to do with the jQuery ajax method:

but. creates circular links, especially bad for IE

b. creates properties on internal objects that cannot be deleted due to how they were created, and settings for the DontDelete property. See This for more information: http://perfectionkills.com/understanding-delete/

In any case, the garbage collector would be forbidden to collect garbage, which would lead to a memory leak, especially if this suspicious function is performed frequently.

+8
Mar 29 '11 at 19:19
source share


More articles:


All Articles