views:

66

answers:

1

I do a lot of ajax calls on my site and was using jQuery 1.4.2 until I noticed that it was leaking. It was leaking with IE, Firefox, and Chrome. After some investigation I found the IE fix for it. I tried it but it didn't fix it for any of the three browsers. I then found a posting on here where the person compared Yahoo's Javascript library to jQuery. Yahoo's didn't leak for that person. I switched to Yahoo's and it did stop the leak in IE and Firefox (I even used the Firefox leak addon). But Chrome is still leaking. Chrome builds up to around 200MB of memory and then crashes my tab. The ajax call is every second. It takes about an hour before the tab crashes. If I leave the page the memory is released. Again, IE and Firefox the problem is now gone.

What's the best way of determining where the problem is for Chrome? I looked for an add-on but haven't found one yet. I also did some searching on Google but haven't really found anything there either. I took heap snapshots but I just see big numbers next to (closure) and (code).

I liked the Firefox one (Leak Monitor), made it easy to see the problem. Anything like that for Chrome or any suggestions for finding the leak?

A: 

The framework isn't causing the leak, it's your code. Let me guess at what your code looks like.

$.get('//url/',function(){
   //lets do fun stuff!
   function(){
     //more fun expensive stuff for the browser to do
   }
};

//A more efficient way (doesn't create closures)
function expensivefn(){
  //Do expensive stuff here
}
$.get('//url',expensivefn);

This is only one possible way your code could be inefficient. I don't commonly create pages that infinitely loop, usually I look for a set amount of time then ask the user if he still wants to poll. The loop you are using could be creating unnecessary closures just like the above example. For example,

//Bad! setInterval(function(){ //Expensive stuff }, 1000)

//Good function expensivestuff(){ //Expensive stuff } setInterval(expensivestuff,1000);

Drew
I'm not using jQuery any more I'm using Yahoo's library. But yes, the first example you should is similar to what I was doing (excluding the function inside the function). I found it an a jQuery tutorial for making ajax calls. I was asking about a tool to find the leak like what's available for Firefox. IE and Firefox are now happy, but Chrome still isn't.
GregInWI2
Actually looking at the old jQuery code, I wasn't doing that. This what it looks like: $('#ajax').load(url); That was leaking.
GregInWI2
Can you post your fix to IE? How did you determine this line was leaking or in general that your JS code was leaking, what tools did you use
Drew
Leak Monitor addon for Firefox was saying it was coming from within the jQuery library. When I changed my ajax calls to use Yahoo's it stopped saying there was a leak. I let IE, Firefox, and Chrome run for a while and watched the memory usage. IE and Firefox were fine, but Chrome still wasn't.
GregInWI2