[Javascript] AJAX app causing excessive browser memory usage

Rick Emery rick at emery.homelinux.net
Thu May 18 18:12:55 CDT 2006


I have a web application in which the data in a table is refreshed  
every 30 seconds. I'm using AJAX to get the data.

When the response comes back, I have code similar to that below (I  
can't paste the exact code; it's much larger and proprietary to my  
employer, so please forgive any syntax/typos. To reduce the length of  
the code, I've removed most of the error checking/handling. I also  
apologize in advance for any wrapping issues):

var xmlList = xhr.responseXML;
if (xmlList && xmlList.getElementsByTagName("eventNbr").length > 0) {
    var tbody = document.createElement("tbody");
    tbody.id = "elbody";
    for (var idx = 0;
         idx < xmlList.getElementsByTagName("eventNbr").length;
         idx++) {

       var priority =
          xmlList.getElementsByTagName("priority").item(idx).firstChild.data;
       var type =
          xmlList.getElementsByTagName("type").item(idx).firstChild.data;

       var trow = document.createElement("tr");

       var tdPriority = document.createElement("td");
       tdPriority.appendChild(document.createTextNode(priority));
       trow.appendChild(tdPriority);
       tdPriority = null;

       var tdType = document.createElement("td");
       tdType.appendChild(document.createTextNode(type));
       trow.appendChild(tdType);
       tdType = null;

       tbody.appendChild(trow);
       trow = null;
    }

    oldBody = document.getElementById("elbody");
    tmpBody = document.getElementById("eltable").replaceChild(tbody, oldBody);
    oldBody = null;
    tmpBody = null;
}
xmlList = null;

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.

I've triple-checked the code to make sure I'm setting any object I  
create to null. The problem may be a gap in my knowledge; I've read a  
few AJAX and JavaScript books and numerous articles and tutorials, but  
won't pretend to know everything :-)

Can anyone point out what I'm missing?

Thanks in advance,
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




More information about the Javascript mailing list