1. What is memory leak?
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.
1) Circular References
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.