Welcome to OStack Knowledge Sharing Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
278 views
in Technique[技术] by (71.8m points)

Simple jQuery Ajax call leaks memory in Internet Explorer

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.

question from:https://stackoverflow.com/questions/2429056/simple-jquery-ajax-call-leaks-memory-in-internet-explorer

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Answer

0 votes
by (71.8m points)

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.


与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome to OStack Knowledge Sharing Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

2.1m questions

2.1m answers

60 comments

57.0k users

...