Browser Memory Leaks

Yesterday, Windows displayed its "virtual memory low" tip, so I opened the Task Manager and discovered that Firefox was consuming about 600,000K of memory. That seemed odd because Firefox only uses about 30K when it starts. That temporarily sidetracked me on a tangent to learn more about browser memory leaks.

The problem seems to be related to sites that deploy rich user interfaces, which I've been evaluating this month. Laszlo, Flex / Flash, dojo, YUI, Ext js, etc. And when I took a hand at writing my own light-weight UI component to dynamically build tables that support keyboard and mouse events, I discovered that it too was a source of a memory leak!

I initially thought, what gives? Don't browsers implement some sort of garbage collection?

After doing some reading, I gathered that browsers deploy at least a couple types of garbage collection, one pertaining to JavaScript and another pertaining to the DOM.

I gather that if you declare a variable in JavaScript, then later set its value to null, that memory becomes subject to garbage collection. But one trap I seemed to fall into pertained to storing references to DOM objects in JavaScript arrays, and setting the array length to 0, but not explicitly destroying the DOM elements referenced from array elements. That seemed to cause a memory leak.

Another trap I seemed to fall into which seemed to cause an even bigger memory leak was attaching events to dynamically generated DOM elements and not explicitly detaching them before explicitly destroying an element. To solve the problem I added a function like:

this.removeClick = function(row) {
if (row.removeEventListener)
row.removeEventListener("click",this.clickRow,false);
else
row.detachEvent("onclick",this.clickRow);
}

In light of the other thread about coding for browser dependencies, you might note that the IE DOM supports the detachEvent() method while the Gecko DOM supports the removeEventListener() method.

Bottom line, I guess this is a head-up for those of us who may be getting into rich UI development.

Nathan.