JavaScript Memory Leaks

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.


23 responses

  1. 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!

  2. I believe this is one of the most significant info for me.
    And i’m glad studying your article. However should observation on some basic things, The web site taste
    is ideal, the articles is in reality great : D.
    Excellent process, cheers

  3. Simply desire to say your articoe is as amazing. The clarity too ykur post is simply excelklent and i could
    suppose you are a professional on this subject. Well with your permission lett me to
    grab your RSS feed to stay uup to date with imminent post.
    Thank you a million and please continue the rewarding work.

    my web site; delray beach summer camps activities – Ivey -

  4. I genuinely enjoy studying on this website, it holds good content. Never fight an inanimate object. by P. J. O’Rourke. gcafedededce

  5. I don’t even know how I ended up here, but I thought this post was great.
    I do not know who you are but definitely you’re going to a famous blogger
    if you are not already ;) Cheers!

  6. I don’t quite understand the third source of leak, DOM Insertion Order. Is that one still an issue for modern browsers, IE > 9, Firefox > 20 and Chrome > 28 ?

  7. Nice post. I learn something totally new and challenging on blogs I stumbleupon everyday.
    It’s always helpful to read articles from other authors and
    practice a little something from other websites.

  8. Admiring the time and effort you put into your site and in depth information you offer.
    It’s good to come across a blog every once in a while that isn’t the
    same outdated rehashed material. Excellent read! I’ve saved your site and I’m adding your RSS feeds to my Google account.

    my site – viagra

  9. hi,
    Read you post. Found it to be good.
    I just have a suggestion that the post would have been better if the section 3: What are the major causes for memory leak in JavaScript contained examples (demo code) for each sub topic.
    Anyway thanks for the post.

  10. Great tutorial.I have 1 doubt i.e. if I want to debug memory leakage in IE or Firefox, can you please suggest something.I have already used Chrome Profiler which doesn’t show any more leakage but still IE11 and Firefox show lot of memory leakage in our Big Application.I have tried IE11 profiler, “about:memory”, “about:ccdump” for firefox also, but nothing helped.Please suggest something for IE or Firefox.

Leave a Reply

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