Solving memory leak in javascript with try-finally

Changhong Fu — Sat, 29 Nov 2008 17:59:32 GMT

In my previous post, I discussed how return statement is executed in try-finally clause. So in following program:

string str = "original string";

try {

return str;

} finally {

str = "changed in finally";

}

the original value will be returned instead of the value changed in finally block. Would this feature be useful anywhere? Well, I can’t find anything in C#, but I can think up an example in javascript.

First, let’s have a look of following javascrip code:

function createDiv() {

var div = document.createElement("div");

div.onclick = function () { }

}

This looks quite ordinary javasript code, doesn’t it? But can you spot a potential memory leak in the code?

To prove there is a memory leak, let’s just open following html page in IE7:

<html>

<body>

function createDiv() {

var div = document.createElement("div");

div.onclick = function () { }

}

for (var i = 0; i < 100000; i++) {

createDiv();

}

</script>

</body>

</html>

This is what happened after I refreshed the page a few times. For each refresh, the memory usage was increased by approximately 100M, and it would never go down. Even I went to another page or closed the tab page, the memory was still held by IE7. Shut down IE is the only way to reclaim the memory back! (Note: this memory leak won’t happen in firefox 3)

The cause of the memory leak is circular reference. As you may know, calling a javascript function will create an object. This object is not accessible from your code, but it is used for javascript to maintain its scope chain. So, in the code above, when createDiv is called, a scope object is created which has a property “div” which points to a div object created by document.createEmelemt(“div”). Then “div” object’s onclick property is assigned with a function object defined inside function “createDiv”. As the function for onclick lives inside the closure, it has a reference of its parent scope object. So, have a look of the following picture, there is clearly a circular reference. That's why it causes memory leak.

So, how can we fix the problem? Of course, the easiest way is to assign div = null or move onclick function outside the createDiv like this:

function createDiv() {

var div = document.createElement("div");

div.onclick = function () { }

div = null;

}

function createDiv() {

var div = document.createElement("div");

div.onclick = handleClick;

}

function handleClick() {};

But what if onclick need to access a variable defined in createDiv and you want to return div from createDiv? Now, try-finally will help.

function createDiv() {

var div = document.createElement("div");

var greeting = "hello world!";

div.onclick = function() { alert(greeting); };

try {

return div;

} finally {

div = null;

}

Now, in the try block, div is returned properly, and the link between createDiv scope object and div object is guaranteed to be broken by assigning createDiv’div variable (note, it is just the div variable, not the div object itself) to null in the finally block.