Causes of memory leaks
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.
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.
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.