In this article I will show you an example of a memory leak in a real world example and the proper steps to identify the problem and how to mitigate it.
Memory leak is a resource leak that takes place when a computer program/application incorrectly manages memory allocations where memory that are no longer needed are not being properly released. Another form of memory leak happens when an object which is stored in memory can no longer be accessed by the running code.
In this article we will focus on the latter and we will examine how easy it is to create memory leaks in your application without intending to, the proper steps that we can take to monitor for them, best practices to follow to limit memory leaks as well as helpful tools to use when monitoring your application in action.
Performance Monitor in Chrome DevTools
The Performance Monitor available in Chrome DevTools allows us to get a real-time view of various aspects of a page’s load or runtime performance. Various metrics are available and they could be turned on or off depending on what you are analyzing. Below is a list of what is available:
- CPU usage
- JS heap size
- DOM Nodes
- JS event listeners
- Documents Frames
- Layouts /sec
- Style recalcs / sec
In this article I will focus mainly on the following metrics: CPU Usage, JS Heap Size, DOM Nodes and JS Event Listeners.
The percentage of CPU usages indicates how much of the processor’s capacity is currently in use by the system. When the CPU usage reached 100% there is no more spare capacity to use for running other programs.
JS heap size