Avoiding Memory Leaks in JavaScript

Memory management

Efficient memory management is a crucial part of any coding practice. When memory management is poor, memory leaks are created which slows down performance and causes crashes. A memory leak occurs when a section of memory that is no longer being used is still being occupied needlessly instead of being returned to the OS. Different programming languages tackle the task of memory management using different methods. In some languages like C and C++, the programmer manually allocates memory when needed, and then frees up the memory after it is done being used by the program. JavaScript uses an automated management method called garbage collection. The garbage collector periodically checks for “garbage” or memory that is no longer being referenced by any objects in the program. It then frees up this memory to be used. There are some languages that use a combination of both methods to avoid memory leaks.

Causes of memory leaks

Though the garbage collection method is highly effective, it is still possible for memory leaks to occur in JavaScript. Being aware of the reasons memory leaks occur, allows a developer to come up with preventative measures. Listed below are a few of the various reasons a memory leak can occur.

Browser Bugs and Extensions– A well-known reason memory leaks occur is due to browser bugs and problematic extensions. For example, when the Filterset.G updater in Firefox is used with FlashGot, it creates a memory leak. In these cases, uninstalling or updating the extension solves the problem. Previous versions of Internet Explorer such as IE6 used to create memory leaks because they couldn’t handle circular references between DOM objects and JavaScript objects. That was fixed with the release of IE8.  

Event listeners– Failure to remove event listeners can cause memory leaks. While this is not always the case, it can be if the DOM element and its corresponding event listener don’t have the same lifetime. Also important to keep in mind is that if you have a tree of objects, the listeners of the children need to be removed along with the listeners of the objects themselves.

Caches– Be wary of data structures that store large amounts of data. Putting objects in large tables, arrays and linked lists can cause memory leaks. To prevent this always specify an upper bound for large data structures.  

Tools to avoid memory leaks in JavaScript

There are numerous methods and techniques to tackle the problem of memory leaks. Below is a brief overview of a few tools in the browser that can be used to debug or avoid memory leaks. More information about memory management browser tools can be found for Google Chrome and Mozilla at the linked sources.

Task Manager– The Google Chrome task manager monitors a page’s memory usage in real time. It gives you information about activity in native memory and the JS heap. Under the Memory column you will find if DOM nodes are being stored in memory. Under the JavaScript memory column, you will find information about how much memory is being used by reachable objects.    

Timeline– If you want to know how much memory your page is using over a period of time, use the timeline panel. The timeline allows you to make recordings. A forced garbage collection can be recorded and examined to detect problems.

Snapshot– Heap snapshots provide information about memory distribution of the JS objects and DOM nodes at a specific point in time. Snapshots can be examined to detect detached DOM nodes.

about:memory– The simplest way to monitor Firefox’s memory usage is using the about:memory page. You can generate and interpret memory reports to debug your applications. The memory reports are divided into sections and subsections which allow for a thorough and organized analysis of memory usage.

Valgrind– Valgrind provides high quality tools to debug memory management problems including leaks. It comes with a heap profiler, memory error detector, thread error detectors and more. Valgrind can also be used to build your own analysis tools.

Conclusion

Though JavaScript’s garbage collected method does a good job of memory management, leaks can still occur. It is good practice to be aware of the causes of memory leaks and take steps to avoid them. Various tools exist to help with memory leak prevention. Not all memory leaks are noticeable immediately and are found only after some time has passed. It is easier and less time consuming to be proactive in avoiding leaks than finding solutions when a memory leak has already occurred.