JavaScript Memory Leaks

Posted on

1. What is memory leak?
Memory leak refers to memory allocated for the application which is unable to be reallocated even after it’s not being used. Normally, garbage collectors collect the DOM elements and event handlers when they are not referenced or unreachable. However, memory leaks are unforgiving for earlier versions of IE, IE 7 and before, because the memory manager does not understand the JavaScript cycle and will not reclaim the memory until the cycles are broken explicitly which can be done by assigning to null.

2. Why do you need to be aware?
Memory leak is a common unintentional programming mistake in large web applications. Memory leaks reduce the performance of a web application until it becomes unusable when the wasted memory grows beyond what the system can afford. As a web developer, developing a web application to meet the functional requirements is just the first step, performance requirements are as important for the success of a web application, not to mention the possible failure of the application or a browser crash.

3. What are the major causes for memory leak in JavaScript?
1) Circular References
A simple example is a DOM object which is referred by a JavaScript object and at the same time is referring to the same or another JavaScript object, this DOM object may cause memory leak. The reference of the DOM object won’t be collected by garbage collector even after the script stops. This pattern usually happens with a chain of object references and it’s hard to detect. To beak the circular reference, either the object referencing the DOM object or the reference of the DOM object needs to be assigned as null.

2) JavaScript Closure
Because of the limitation of the JavaScript scope, a lot of implementations rely on the JavaScript closure. Please check out my previous blog post JavaScript Scope and Closure if you want to know more about closures.

Closure can cause memory leak because the inner function holds a reference to the outer function’s variables so the inner function can continually access private variables defined in the outer function even after the function has returned. It is the best practice for JavaScript programmer to disconnect all the event handlers before the page unloads.

3) DOM Insertion Order
A temporary object is created whenever two DOM objects with different scopes attached together. When the DOM objects changes the scope to document, the temporary object is trapped. With that said, DOM objects should be attached in the order from the current existing DOM element on the page top down to the rest of the DOM objects so they will always share the document scope and no temporary objects are created.

4. How to detect?
Memory leaks are usually hard to detect for developer because they are caused by some unintentional mistakes within large amount of code and it doesn’t affect the functionality of the application until the memory starvation occurs in the system. It is why there is performance testing when performance metrics of the application are collected during a long term testing period.

The simplest way to detect memory leak is to check the memory usage with task manager. Open the application in a separate tab in chrome and check if the memory usage keeps going up as time passes. There are other debugging tools providing memory monitor feature such as Chrome Developer Tools. Here is a tutorial in Google Developers on the Heap Profiling feature.

References:
1. http://javascript.crockford.com/memory/leak.html
2. http://msdn.microsoft.com/en-us/library/Bb250448
3. http://www.ibm.com/developerworks/web/library/wa-memleak/


8 thoughts on “JavaScript Memory Leaks

  1. Pingback: JavaScript Memory Leaks | Ying’s Blog « Justin Cooney – Programming Tips

  2. Pingback: JavaScript: What are known code patterns that cause memory leaks in JavaScript? - Quora

  3. Pingback: javascript: developing for performance « Share… What?

  4. Pingback: Javascript内存泄露 | 滴洋

  5. I seriously love your website.. Excellent colors & theme.
    Did you make this website yourself? Please reply back as I’m wanting to
    create my own personal site and would like to learn where
    you got this from or what the theme is called. Cheers!

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>