Solving memory leak in javascript with try-finally

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>

    <script type="text/javascript">

      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;

}

 

or

 

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.

Print | posted on Saturday, November 29, 2008 11:59 AM

Feedback

# re: Solving memory leak in javascript with try-finally

Left by Glenn at 12/1/2008 11:42 AM
Gravatar You'll want to revise your code. IE has a bug where it won't execute your finally statement unless you supply a catch.

see here for details.

http://webbugtrack.blogspot.com/2007/11/bug-184-catch-to-try-catch-finally-in.html

This one had me pulling hair for days! man I hate debuggin in IE!

# re: Solving memory leak in javascript with try-finally

Left by Changhong at 12/1/2008 6:16 PM
Gravatar Thanks Glenn, that is a very useful tip.

# re: Solving memory leak in javascript with try-finally

Left by Joe at 2/21/2009 6:23 AM
Gravatar I'm sure that you've found it, but we used the javascript memory leak detector to potentially find issues: http://blogs.msdn.com/gpde/pages/javascript-memory-leak-detector.aspx

Personally, we only found a couple of items. But, it was nice to know our code was pretty tight. Also, when compared to other sites, we found our site wasn't that bad.

# re: Solving memory leak in javascript with try-finally

Left by Eldev at 9/18/2009 5:33 AM
Gravatar Aha.. Nice way to avoid vicious circles in IE process.. It's rather interesting what memory losses appear in case of applying this trick. It will be even more convincing.

# re: Solving memory leak in javascript with try-finally

Left by JD at 4/30/2013 1:34 PM
Gravatar The MSDN Javascript Memory Leak Detector URL is now http://blogs.msdn.com/b/gpde/archive/2009/08/03/javascript-memory-leak-detector-v2.aspx.

Also, Sieve is a good IE7 emulator for memory leaks in that browser.

# re: Solving memory leak in javascript with try-finally

Left by Anna Shetty at 2/26/2018 4:22 PM
Gravatar Nice post. I appreciate the tips. My training routine is remarkably similar to yours, although I expect I'm slogging along much more slowly than you
Do router login

# re: Solving memory leak in javascript with try-finally

Left by adachi at 3/6/2018 12:24 AM
Gravatar 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!

run 3

# re: Solving memory leak in javascript with try-finally

Left by active directory at 4/7/2018 4:49 PM
Gravatar Wow.. great article shared. what is an active directory

# re: Solving memory leak in javascript with try-finally

Left by velevobowi at 5/18/2018 10:40 PM
Gravatar The company provides customers to talk with an open mind when you participate in the survey. By this survey, the dgcustomerfirst.com company can know about their products and services.

Your comment:





 

Copyright © Changhong Fu

Design by Bartosz Brzezinski

Design by Phil Haack Based On A Design By Bartosz Brzezinski