Ajax Memory Leak

Hi,

For those familiar with the "Ajax In Action" book: I've modeled some code after the final refactored "net.ContentLoader" in Chapter 9 for a Status Application Web Page that I'm building. I'm seeing a bad slowdown in Mozilla 1.7 and Firefox 2.0 for Sun Solaris 10 using prstat; CPU usage goes to 10~15% and stays there while the browser slows to a crawl after a couple hours with the main page open. I also see a nasty memory leak accumulate ~500K at a time using XP's task manager through Netscape 7.1. I have no need to support IE, so most, if not all of the results of google searches have produced no help.

I'll include my js Ajax object and the specific code from ContentLoader causing the leak; specifically the onreadystatechange anonymous function closure) below. The catch to the accumulation of the leak is that I am using setTimeout to call the initialize function once every second. I need to do this in order to display the latest status of the following on my main page: 9 "red/green" status fields, 5 dynamic text fields with status colors, and a large table's html text being built in the php get script of the XHR request. I have several other pages in my site that use Ajax, but this main page is the best example since it has the most updating going on.

Note: I had to modify the exact examples from the book to get the Ajax updating to work initially. I am open to trying anything, but the use of oThis remained necessary in order to capture the context/scope of the code so that the callback can reference that context/scope.

Thanks for any help!
~Cory


In net.js:
..
net.ContentLoader = function(component, url, method, requestParams)
{
this.component = component;
this.url = url;
this.requestParams = requestParams;
this.method = method;
}
...
sendRequest: function()
{
var oThis = this;
var request = new XMLHttpRequest();
request.open(this.method, this.url, true);
request.onreadystatechange = function() { oThis.handleAjaxResponse(request) };
request.send(null);
},
handleAjaxResponse: function(request)
{
if(request.readyState == net.READY_STATE_COMPLETE)
{
if(this.isSuccess(request))
{
this.component.ajaxUpdate(request);
}
else
{
this.component.handleError(request);
}
}
},
...


The Ajax object:
...
function AjaxObj(myID, myType, url, options)
{
this.myID = myID;
this.myType = myType;
this.options = options;
this.url = url;
this.ajaxHelper = new net.ContentLoader(this, url, "GET", []);
this.initializeBehavior(this);
}

AjaxObj.prototype =
{
initializeBehavior: function(oThis)
{
oThis.ajaxHelper.sendRequest();
window.setTimeout(oThis.ajaxHelper.component.initializeBehavior, 1000, oThis);
},
...

If it were IE I'd assume it was the oThis closure in the onreadystatechange, but it is my understanding that those types of circular memory leaks shouldn't happen in Mozilla. Still it can't hurt to try and change it.


handleAjaxResponse: function(request)
{
if(request.readyState == net.READY_STATE_COMPLETE) {
if(this.isSuccess(request)) {
this.component.ajaxUpdate(request);
} else {
this.component.handleError(request);
}
request.onreadystatechange = null;
}
},


That would be my first attempt to fix it for IE.

If you are lucky maybe A1ien will pop in to comment since he wrote the book.

david_kw

Thanks for the reply!

Unfortunately, I've tried setting everything including the kitchen sink equal to null to no avail. I've also modified the code to not create a brand new XHR object on each setTimeout callback, but to reuse the initially created set of XHRs and still see it leak.

~Cory