Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

javascript memory leak

I have a some javascript (used with google maps api) that I am testing on IE and Chrome and noticed memory leak symptoms in IE only: when I refresh the page continuously, the amount of memory used in IE keeps growing (fast), but in Chrome it stays constant. Without posting all of the code (as it is rather long), can I get some suggestions as to what to look out for? What could cause the memory to keep growing like this in IE on page refreshes?

Like I said I know its hard without code, but I'd like to see if any generic advice works first. Thanks.

Update: thanks for the responses so far. As a sanity check, I ran the google maps api "Hello World" code from google to see what would happen in IE (the code is shown below). When running this code in IE, when I keep refreshing the page over and over again, the memory keeps growing and growing. Is this a memory leak? This doesnt seem like intended functionality...

<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
  function initialize() {
    var latlng = new google.maps.LatLng(-34.397, 150.644);
    var myOptions = {
      zoom: 8,
      center: latlng,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
  }

</script>
</head>
<body onload="initialize()">
  <div id="map_canvas" style="width:100%; height:100%"></div>
</body>
</html>

Update 2: So is there no way to get this google Hello World map api code to run without leaking memory in IE? I noticed that if I run the same experiment on maps.google.com there doesn't seem to be a leak...It would be great if someone could help me modify the hello world code so that it does not leak in IE; this way I can build off of it (I don't mind using JQuery if this would help, but I tried it on the Hello World code and it was still leaking in IE). Thanks again

like image 459
hhj Avatar asked Jun 07 '10 12:06

hhj


3 Answers

  • Use JSLint.com to test your code it gives great recommendations about probably problems in your code.
  • There is also a memory leak detector by Microsoft! (It moved here http://www.outofhanwell.com/ieleak/index.php?title=Main_Page , other download and description about the tool called drip: http://www.smallworkarounds.net/2009/04/jquery-leaking-memory-be-careful-while.html)
  • There is also an article by Corckford about mem leaks.
  • jQuery has some build in mechanisms to avoid memory leaks. There are a lot of documentations out there about this problems.
  • Other memory detector by Microsoft
  • Remind: Google announced that they will drop support for IE6.
  • Google Chrome has build in memory profiling (Update on July 2013)

Update:

I tested the code above with drip.exe and it seems that there is really something like a memory leak. The memory usage went steadily up while running the code with auto refreshing for some minutes.

Update 2:

I think this is the bug: http://code.google.com/p/gmaps-api-issues/issues/detail?id=1555&can=1&q=unload&colspec=ID%20Type%20Status%20Introduced%20Fixed%20Summary%20Internal%20Stars

like image 162
powtac Avatar answered Oct 13 '22 15:10

powtac


One well-known source of IE memory leaks is the (deliberate or accidental) trapping of Javascript "stuff" in closures (functions) bound as event handlers to DOM elements. Most frameworks try hard to clean out event handlers explicitly for that reason.

like image 22
Pointy Avatar answered Oct 13 '22 17:10

Pointy


You need to also execute GUnload before leaving the page. Simply add an "unload" event:

<body onload="initialize()" onunload="GUnload()">

Read more about this leak at the Google Maps API

like image 38
Andrew Avatar answered Oct 13 '22 15:10

Andrew