Menu
I created a web page that makes an Ajax call every second. In Internet Explorer 7, it leaks memory badly (20 MB in about 15 minutes).
The program is very simple. It just runs a JavaScript function that makes an Ajax call. The server returns an empty string, and the JavaScript code does nothing with it. I use setTimeout to run the function every second, and I'm using Drip to watch the thing.
Here is the source:
<html> <head> <script type="text/javascript" src="http://www.google.com/jsapi"></script> <script type="text/javascript"> google.load('jquery', '1.4.2'); google.load('jqueryui', '1.7.2'); </script> <script type="text/javascript"> setTimeout('testJunk()',1000); function testJunk() { $.ajax({ url: 'http://xxxxxxxxxxxxxx/test', // The url returns an empty string dataType: 'html', success: function(data){} }); setTimeout('testJunk()',1000) } </script> </head> <body> Why is memory usage going up? </body> </html> How to plug this leak? I have a real application that updates a large table this way, but left unattended it will eat up gigabytes of memory.
Edit: okay, so after some good suggestions, I modified the code to:
<html> <head> <script type="text/javascript" src="http://www.google.com/jsapi"></script> <script type="text/javascript"> google.load('jquery', '1.4.2'); google.load('jqueryui', '1.7.2'); </script> <script type="text/javascript"> setTimeout(testJunk,1000); function testJunk() { $.ajax({ url: 'http://xxxxxxxxxxxxxx/test', // The url returns an empty string dataType: 'html', success: function(data){setTimeout(testJunk,1000)} }); } </script> </head> <body> Why is memory usage going up? </body> </html> It didn't seem to make any difference, though. I'm not doing anything with the DOM, and if I comment out the Ajax call, the memory leak stops. So it looks like the leak is entirely in the Ajax call. Does jQuery Ajax inherently create some sort of circular reference, and if so, how can I free it? By the way, it doesn't leak in Firefox.
Someone suggested running the test in another VM and see if the results are the same. Rather than setting up another VM, I found a laptop that was running XP Home with Internet Explorer 8. It exhibits the same problem.
I tried some older versions of jQuery and got better results, but the problem didn't go away entirely until I abandoned Ajax in jQuery and went with more traditional (and ugly) Ajax.
472
Here's a link to the bug over on jQuery, along with this as a suggested fix for jQuery 1.4.2:
--- jquery-1.4.2.js 2010-04-08 12:10:20.000000000 -0700 +++ jquery-1.4.2.js.fixed 2010-04-08 12:10:38.000000000 -0700 @@ -5219,7 +5219,7 @@ // Stop memory leaks if ( s.async ) { - xhr = null; + xhr.onreadystatechange = null; xhr.abort = null; xhr = null; } } }; NOTE: This is officially fixed in jQuery 1.4.4, so your best bet is to just upgrade now.
160
The problem appears to be with jQuery 1.4 in Internet Explorer, and to a lesser extent, versions 1.2 and 1.3.
1.4.0, 1.4.1, and 1.4.2 all exhibited the severe memory leak.
1.2.3, 1.2.6, 1.3.0, 1.3.1, and 1.3.2 all exhibited a much smaller leak (about 100 KB after 10 minutes).
I also tried a version of my program that calls Ajax in a more traditional way:
<html> <head> <script language="javascript" type="text/javascript"> function getHTTPObject() { var xmlhttp; /*@cc_on @if (@_jscript_version >= 5) try { xmlhttp = new ActiveXObject("Msxml2.XMLHTTP"); } catch (e) { try { xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); } catch (E) { xmlhttp = false; } } @else xmlhttp = false; @end @*/ if (!xmlhttp && typeof XMLHttpRequest != 'undefined') { try { xmlhttp = new XMLHttpRequest(); if (xmlhttp.overrideMimeType) { xmlhttp.overrideMimeType("text/xml"); } } catch (e) { xmlhttp = false; } } return xmlhttp; } var ajaxObject = getHTTPObject(); setTimeout(testJunk,1000); function testJunk() { ajaxObject.open('POST', 'http://XXXXXXXXXXXXXXX/delme2', true); ajaxObject.onreadystatechange = handleAjaxResponse; ajaxObject.send(null); } function handleAjaxResponse() { if (ajaxObject.readyState==4) { setTimeout(testJunk,1000); } } </script> </head> <body> <div id="test">Why is memory usage going up?</div> </body> </html> This got rid of the leak entirely.
So it looks like I'll have to do my repeating Ajax calls the ugly old way until the jQuery folks iron out this problem.
33
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With