Updating DOM via Javascript causing memory leaks (only in Firefox?)

Question

I know this question has been asked before, but none of the answers seem to resolve the issue. I'm testing an AJAX webpage which updates elements in the DOM via javascript.

Every minute, the server is queried for new data and the DOM is updated accordingly. From what I can tell, the memory usage for this page in Chrome grows, but not too much (it starts around 40 MB and reaches maybe 80 MB max). In Firefox, however, the memory usage starts around 120 MB and can expand to over 400 MB. I've stepped through the Javascript with Firebug and it seems like the memory expands the most when the DOM is updated via my Javascript methods.

The DOM manipulation is simple, such as:

var myTable = document.createElement("table");

var thead = document.createElement("thead");
var tr = document.createElement("tr");
var th = document.createElement("th");
th.appendChild(document.createTextNode("column1"));
tr.appendChild(th);

for(var test in obj.testObjs){
    th = document.createElement("th");
    th.appendChild(document.createTextNode(obj.testObjs[test].myVar));
    tr.appendChild(th);
}

Before appending new data to the nodes in the DOM, I first clear the existing data. I've tried a number of ways, including what is described here: How to remove DOM elements without memory leaks?

As well as a simple way such as:

function clearChildren(node){
    if(node != null){
        while (node.hasChildNodes()) node.removeChild(node.firstChild);
    }
}

I've also read ( Cyclic adding/removing of DOM nodes causes memory leaks in JavaScript? ) that browsers only start collecting garbage when it reaches a certain level? Can that be confirmed? I feel that my PC is running sluggish after a while due to the growing memory.

I feel there has to be a solution to this, because commercial sites I've tested that perform the same functional steps do not cause memory usage to grow.

Any help would be greatly appreciated.

Thank you.

Answer 1

Can that be confirmed?

It depends.

In general, browsers will GC when they feel like it, and the heuristics can change pretty often. I suspect that if you try a Firefox nightly you will see pretty different behavior from what you describe above. There have been at least 2 GC heuristics changes since the Firefox 5 release.

Answer 2

innerHTML=''

Is the wrong way to prepare a variable for GC handling.
You need to use the delete function on the element and every element this element references.
A lot, right?
That is why we have JS libraries where it was written for us. I checked the code in Mootools (download it and search for destroy) and it seems to me to be written correctly.
I guess it will be the same in the other libraries too.