The Author Online Book Forums are Moving

The Author Online Book Forums will soon redirect to Manning's liveBook and liveVideo. All book forum content will migrate to liveBook's discussion forum and all video forum content will migrate to liveVideo. Log in to liveBook or liveVideo with your Manning credentials to join the discussion!

Thank you for your engagement in the AoF over the years! We look forward to offering you a more enhanced forum experience.

coryj558 (1) [Avatar] Offline
#1
Hi,

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);
},
...