How to Detect and Prevent JavaScript Memory Leaks in Frontend Apps

Memory management is crucial in any programming language, and JavaScript is no exception. Although browsers automatically reclaim memory when a page reloads, unnoticed leaks can still cause performance degradation and crashes.

What Is Memory

At the hardware level, memory consists of many flip‑flops, each storing a single bit. These bits form a massive array that can be read and written via unique addresses.

Memory Lifecycle

Allocation : Reserve the required memory.

Usage : Read from and write to the allocated memory.

Release : Return memory when it is no longer needed.

What Is a Memory Leak

A memory leak occurs when a program fails to release memory that is no longer in use. The memory remains allocated, leading to waste and, in severe cases, application slowdown or crash.

JavaScript Memory Management Mechanism

JavaScript automatically allocates memory when variables are created and frees it through garbage collection (GC) when they become unreachable. Developers often assume they need not worry about memory, but understanding the lifecycle helps avoid leaks.

Memory Allocation

let num = 1;
const str = "名字";
const obj = { a: 1, b: 2 };
const arr = [1, 2, 3];
function func(arg) { /* ... */ }

Memory Usage

// continue from above
// write to memory
num = 2;
// read/write memory
func(num);

Memory Reclamation (GC)

Garbage collection automatically frees memory that is no longer reachable. Most leaks happen during the reclamation phase because some references remain unintentionally.

Reference Counting

This simple algorithm frees an object when its reference count drops to zero.

var obj1 = { a: 1, b: 2 };
var obj2 = obj1; // obj2 references the same object
obj1 = 1; // original object now has only obj2 referencing it
obj2 = null; // reference count is zero, object can be reclaimed

Mark‑and‑Sweep

During execution, variables are marked as "in‑scope". When they go out of scope, they become eligible for collection.

var b = 1; // global, lives until page unload
function func() {
  var a = 1; // a is marked when function runs
  return a + b;
}
func(); // after return, a is unmarked and reclaimed, b remains

Common Leak Scenarios

Unexpected Global Variable

function count(num) {
  a = 1; // becomes window.a, never released automatically
  return a + num;
}

Forgotten Timer

Timer continues after component destruction.

// before fix
mounted() {
  setInterval(() => { this.fetchData(); }, 2000);
}
// after fix
mounted() {
  this.timer = setInterval(() => { this.fetchData(); }, 2000);
},
beforeDestroy() {
  clearInterval(this.timer);
}

Forgotten Event Listener

// before fix
mounted() {
  window.addEventListener('resize', () => { /* ... */ });
}
// after fix
mounted() {
  this.resizeHandler = () => { /* ... */ };
  window.addEventListener('resize', this.resizeHandler);
},
beforeDestroy() {
  window.removeEventListener('resize', this.resizeHandler);
}

Forgotten Set

Leaking objects stored in a regular Set:

let testSet = new Set();
let value = { a: 1 };
testSet.add(value);
value = null; // object still retained by the Set

Fix by removing the entry or using WeakSet:

testSet.delete(value);
value = null;
// or
let testSet = new WeakSet();
let value = { a: 1 };
testSet.add(value);
value = null; // weak reference does not prevent GC

Forgotten Map

Leaking objects stored as keys in a regular Map:

let map = new Map();
let key = [1, 2, 3];
map.set(key, 1);
key = null; // key object still retained by the Map

Fix by deleting the entry or using WeakMap:

map.delete(key);
key = null;
// or
let map = new WeakMap();
let key = [1, 2, 3];
map.set(key, 1);
key = null; // weak key does not prevent GC

Forgotten Pub/Sub

// before fix
mounted() {
  EventEmitter.on('test', () => { /* ... */ });
}
// after fix
mounted() {
  EventEmitter.on('test', this.handleTest);
},
beforeDestroy() {
  EventEmitter.off('test', this.handleTest);
}

Forgotten Closure

function closure() {
  const name = '名字';
  return () => name.split('').reverse().join('');
}
const reverseName = closure();
// If reverseName is never called, the captured "name" remains in memory

DOM References

class Test {
  constructor() {
    this.elements = {
      button: document.querySelector('#button'),
      div: document.querySelector('#div')
    };
  }
  removeButton() {
    document.body.removeChild(this.elements.button);
    // this.elements.button = null; // needed to release memory
  }
}
const test = new Test();
test.removeButton();

Detecting Memory Leaks

When a leak occurs, memory usage typically grows periodically. Open Chrome DevTools, go to the Performance panel, enable the Memory checkbox, record while interacting with the page, and observe the memory graph. A steady increase indicates a leak.

Example screenshot:

Locating the Leak Position

Use the Memory panel to take heap snapshots before and after the suspected operation. Compare snapshots to find objects whose retained size keeps growing. Drill down into the heap graph to locate the exact variable (e.g., newArr) responsible for the growth.

Example heap snapshot view:

By identifying the culprit object (such as an array that keeps expanding), you can modify the code to release references, clear timers, or use weak collections, thereby eliminating the leak.