Question

The topic of memory leaks in JavaScript is not brought up often. However, I stumbled upon this article, written in 2007. The authors state:

Internet Explorer and Mozilla Firefox are the two Web browsers most
commonly associated with memory leaks in JavaScript.

Should I still be worrying about JavaScript memory leaks in 2011? If so, what should I be careful about?

Answer 1

A good javascript developer would be aware of various design patterns that can lead to memory leaks and you’d avoid coding anything that could turn in to a leak in pretty much all the pages you code.

For example, keeping a reference to any DOM object in a javascript variable will keep that DOM object alive in memory even if it’s long since been removed from the DOM and you intended for it to be freed.

Practically speaking, leaks are only significant in some circumstances. Here’s where I specifically worry about them:

1. Anything I’m doing repetitively on a timer, particularly if it can be left running for a long time. For example, if you have a slideshow that might just loop forever, you have to make absolutely sure that nothing in the slideshow is an accumulating leak of either JS or DOM objects.
2. A web page that works like an app and the user may stay on the same page for a long time, interacting with the page, doing ajax calls, etc… For example a web mail app might be open and on the same actual browser document for a very long time doing lots and lots of user and server interactions.
3. A web page that regularly creates and destroys lots of DOM elements like something that regularly uses ajax to fetch a bunch of new HTML.

Places where I don’t really worry about leaks:

1. A web page that doesn’t have a long running set of interactions the user can do.
2. A web page that doesn’t stay on screen very long before some other page is loaded or this page is reloaded.

Some of the key things I keep an eye out for.

1. Any lasting JS variables or properties that contain references to DOM elements when DOM elements are being created/destroyed.
2. Any properties of a DOM object that contain references to other DOM objects or references to JS objects that contain reference to other DOM objects (this can create circular references and cross references between JS/DOM that some older browsers have trouble freeing).
3. Any large data structures that I load for temporary use. I make sure that no references to these large data structures are every kept around.
4. Any data caches. Make sure nothing really large gets cached that you don’t want cached. Make sure all caches that get used repeatedly don’t accumulate forever and have some sort of aging mechanism to get rid of old objects.