[Javascript] AJAX app causing excessive browser memory usage

[Rick Emery]

Quoting Matt Warden <mwarden at gmail.com>:

> -----BEGIN PGP SIGNED MESSAGE-----
> Hash: SHA1
>
> Rick Emery wrote:
>> var xmlList = xhr.responseXML;
>
> Where is the code which handles the AJAX request? That's the most likely
> place for a memory leak. And then let us see the code that handles
> readystate change, too.

Sorry. I just assumed the problem would be in handling the response,  
not making the request. This is the function that runs every 30 seconds.

function getList()
{
    if (!isEventListWorking && xhr) {
       xhr.open("GET", "getXMLeventlist.php", true);
       xhr.onreadystatechange = handleELResponse();
       isEventListWorking = true;
       xhr.send(null);
    }
}

The code I sent earlier is from inside the handleELResponse()  
function, and the only thing I left out was that it's enclosed within:

if (HTTP_REQ_COMPLETE == xhr.readyState) {
    // This is from the eventcache script; I remove all of the existing
    // events from the old table before creating the new table.
    eventlistEvents.flush();
    // All of the code I sent previously is in here, along with:
    isEventListWorking = false;
}

>>       tdPriority = null;
> ...
>>       tdType = null;
> ...
>>       trow = null;
>
> These aren't helping you at all, so don't bother. The equivalent happens
> when the variables fall out of scope.

I thought that was the case, but I added them when I saw the memory problem.

>>    tmpBody = document.getElementById("eltable").replaceChild(tbody,
>> oldBody);
>
> If you don't need the result of the right hand side, then don't assign
> it to a variable.

I found online that the replaceChild() method returns the replaced  
object. Again, because of the memory issue, I thought that perhaps a  
reference to the replaced object was hanging around. I just assigned  
it to this variable so I could specifically null it out.

>> xmlList = null;
>
> Keep this one.

Why wouldn't this, like the others, happen when it fell out of scope  
(i.e., when the handleELResponse() function exited)?

>> In both Internet Explorer and Firefox, I can see that, each time the
>> xhr response is received and the data updated, the memory consumption
>> of the browser  process increases. I expect this if the new table body
>> has more rows than the old table, but it happens even when there are
>> fewer rows. If I let it run over the weekend, it will eventually
>> consume all of the available memory of the machine. Closing the  browser
>> is the only way to free the memory.
>
> Well you're creating a new XHR object every 30 seconds. Not a problem if
> you're handling its destruction properly, but I have a hunch you are not.

I'm actually not creating a new one every 30 seconds; I create the xhr  
object when the page first loads, and reuse it every 30 seconds to  
send the request (and process the response).

> But we need to see that code.
>
> In the meantime, do yourself a favor and download Drip:
> http://outofhanwell.com/ieleak/index.php?title=Main_Page

I'll check this out, but I failed to mention that I'm using an  
eventcache script to handle the "IE memory leak" already.

I know that my inability to send exactly the code I'm using makes it  
difficult to troubleshoot; I was mostly looking for validation that  
I'm doing things right, or tips for how to do it better. I really  
appreciate your help and patience.

Thanks for the reply and the tips,
Rick
-- 
Rick Emery

"When once you have tasted flight, you will forever walk the Earth
  with your eyes turned skyward, for there you have been, and there
  you will always long to return"
                                               -- Leonardo Da Vinci