How to avoid memory leaks in your Angular application

ZeroesAndOnes
9 min readApr 6, 2020

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
  • Documents Frames
  • Layouts /sec
  • Style recalcs / sec
Performance monitor for the Angular project while it is in idle mode
Performance monitor for the Angular project while it is in idle mode

In this article I will focus mainly on the following metrics: CPU Usage, JS Heap Size, DOM Nodes and JS Event Listeners.

CPU Usage

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

Heaps in JavaScript are long lived objects, the difference between objects created and deleted. Heaps appear when memory leaks occur. A memory leak is when an object in a program is still consuming memory assigned to it after the code has been read, and the object assessed. The overall significance is a degraded performance for an app.

--

--