the meaning of life, the universe and everything

"The Internet Explorer web browser (verified on versions 4 to 6 (6 is current at
the time of writing)) has a fault in its garbage collection system that prevents
it from garbage collecting ECMAScript and some host objects if those host
objects form part of a "circular" reference. The host objects in question are
any DOM Nodes (including the document object and its descendants) and ActiveX
objects. If a circular reference is formed including one or more of them, then
none of the objects involved will be freed until the browser is closed down, and
the memory that they consume will be unavailable to the system until that
happens. "

says Jim Ley.

And Laurens proposes a solution for it: http://laurens.vd.oever.nl/weblog/items2005/closures/

After examining the code, I thought, that much lines of code was kinda over-complication of the problem.

Since I am ill; for the time being, I am spending my whole weekend at home and to reduce the boredom I wanted to propose another solution.

I created several test cases to see how the modern browsers handle the memory leakage problem:

I use four seperate HTML files.

But before starting, you may want to download the entire project (366Kb) along with png and gif images and test files. However use them with caution. I do not take any responsibility if your system crashes, your favorite browser hangs, an earthquake strikes your pc whatsoever.

I've slightly modified Laurens' HTML. I have two test cases:

Here is the HTML for IE .
And HTML For Mozilla-based browsers.

As you may see from the code, the pages refresh themselves every 1 second to demonstrate the leak scenario.

I've tested the "ie test case" in IE, the "mozilla test case" in mozilla.

I've tested both test cases in Opera since it can behave like IE
or like Mozilla (i.e. it can handle both attachEvent and addEventListener)

The CPU utilization and memory graphs are as follows:

Internet Explorer

1. click to view the image.

2. after closing the browser.

As you can see, mozilla shows a ramp as well. Although IE's ramp is steeper, mozilla also has memory leak problems. Besides mozilla exhibits an exceptionally high CPU utilization (which shows that its not as good as IE in Array operations and String manipulation.

Opera

I think I'm gonna change my browser preference. Opera (8) was the best of all those browsers both in terms of CPU utilization and memory stability.

1. Here is opera using attachEvent.

2. Opera using addEventListener.

I did not test it in Netscape because it either uses IE's or Mozilla's rendering engine. So the results would not be worth examining.

Having seen the leakage issue here is my solution for it:

just add the bold line for IE and you are done.

window.onload=function(evt){
...
/*Make sure we see the leak*/
element.bigString = new Array(1000).join(new Array(200).join("XXXXX"));
/*schedule for cleanup*/
window.onunload=function(){ element.detachEvent("onclick",fnc); };
...
}

And for mozilla the fix is similar:

window.onload=function(evt){
...
/*Make sure we see the leak*/
element.bigString = new Array(1000).join(new Array(200).join("XXXXX"));
/*schedule for cleanup*/
window.onunload=function(){element.removeEventListener("click", fnc, false); };
...
};

One line of code and you are done.

If you want something cross-browser, you may try sardalya's EventHandler object (which is in some revision, but the current version works okay none the less.), which utilizes an EventRegistry and unloads the registered events so that you do not need to write the unload code yourself.

And here are the screens after the fix

1. internet explorer after applying the fix.

2. mozilla after applying the fix.

3. Opera after applying the fix. (attachEvent version)

4. Opera after applying the fix. (addEventListener version)

Look ma! No ramps in memory usage! Not difficult huh?

* * *

And here are those three browsers' rankings according to the test results.

garbage collection:

Opera -> gold medal
Mozila -> silver medal (the memory leak ramp was hardly recognizable)
IE -> disqualified (sorry for that)

String & Array Manipulation:

IE -> gold medal.
Opera -> Silver medal (very close to IE but IE eats 1-2% lesser CPU and seems more stable)
Mozilla -> disqualified (sorry good friend, 90% CPU utilization on the average, whereas others use around 8-10% of CPU.)

Overall Memory Usage (in fixed mode):

IE -> gold medal
Opera -> silver medal
Mozilla -> bronze medal

Of course you should keep in mind that I am using a W2K Server box, so it may use memory more efficiently in MS-friendly apps.

That much talk for today,
Hope it helps someone.

Cheers!