Simple jquery ajax call leaks memory in ie.

Posted by Thomas Lane on Stack Overflow See other posts from Stack Overflow or by Thomas Lane
Published on 2010-03-11T22:09:44Z Indexed on 2010/04/02 16:03 UTC
Read the original article Hit count: 1240

Filed under:
|
|

I created a web page that makes an ajax call every second. In Internet Explorer 7, it leaks memory badly (20MB 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 does nothing with it. I use setTimout 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>

Anyone have an idea how to plug this leak? I have a real application that updates a large table this way, but left unattended will eat up Gigabytes of memory.

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 IE8. 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.

© Stack Overflow or respective owner

Related posts about jQuery

Related posts about AJAX