JavaScript memory management pitfalls?

Question

I know that JavaScript has a garbage collector. Therefore, using delete remove only a reference to the object, and when there is no more reference to this object, it is deleted by the GC.

JavaScript is tricky, with the closures, the fuzzy name space and the prototype inheritance, it's not always obvious to know when to now or why.

I am coding a fairly large JavaScript project and would like to avoid memory leak, while limiting the global memory usage. I am not at all in the optimizing stage (let's get the stuff work first :-)), but it would be nice to know the good practices for memory management in order to avoid writing crappy code.

• So when should I use delete?
• What are the traps I should avoid, using objects?
• Some stuff to know about closures?
• Some good practices to highlight?

Answer 1

From my experience, Garbage Collectors are well/poorly implemented depending on the browser. Applying good Object Oriented programming practices is a good start.

My only advice: do not create memory leaks by connecting DOM & javascript objects (circular references that won't be cleared by DOM and JS GCs). These mistakes will eat far more memory than any object you will instantiate within your application.

More details on DOM/JS memory leaks. http://msdn.microsoft.com/en-us/library/bb250448%28VS.85%29.aspx

Answer 2

• In IE, at least in older versions, a DOM element was kept in memory after you removed it using removeChild if it had an event listener attached. The only way to remove it from memory was to detach the event before removing it from the DOM.
• As long as you don't create and remove elements often, you don't really have to worry about this. If you create lots of elements when the application starts, but don't create new objects after that, then don't worry too much about memory leaks.