Memory Management - Garbage Collection, Memory Leaks

Imagine a paddock that nobody ever clears of leftover feed. For a few days nothing shows, but after a month the T-Rex has nowhere to stand. That is how a memory leak works: the application keeps data it no longer needs and gets slower by the hour. Memory management is one of the most important aspects of performance. Even though JavaScript has an automatic garbage collector, you need to understand how memory works to avoid leaks.

How Memory Works in JavaScript

Memory Lifecycle

Every value goes through three stages: allocation, use and release. You see the first two in your code, and the third is done for you by the garbage collector (GC):

1// Memory lifecycle in JavaScript
2const memoryLifecycle = {
3  // 1. Memory allocation - automatic
4  allocation: () => {
5    const obj = { name: 'John', age: 30 }; // Allocation in heap
6    const arr = [1, 2, 3, 4, 5]; // Allocation in heap
7    const num = 42; // Allocation in stack (primitive)
8
9    return { obj, arr, num };
10  },
11
12  // 2. Memory usage - read/write
13  usage: (data) => {
14    data.obj.name = 'Jane'; // Using allocated memory
15    data.arr.push(6);
16
17    console.log(data.obj, data.arr);
18  },
19
20  // 3. Memory release - automatic by GC
21  release: () => {
22    // When variables go out of scope, they become candidates for GC
23    // GC will run automatically at the appropriate time
24  }
25};
26
27// Demonstration of the cycle
28function demonstrateMemoryLifecycle() {
29  const data = memoryLifecycle.allocation(); // Allocation
30  memoryLifecycle.usage(data); // Usage
31  // After the function ends, 'data' becomes a candidate for GC
32}
33
34demonstrateMemoryLifecycle();

You never call any free(). When data stops being reachable after the function ends, the object becomes a candidate for cleanup, and the GC picks the moment.

Stack vs Heap

It is often said that primitives live on the stack and objects on the heap:

1// Stack - stores primitives and references
2function stackExample() {
3  const a = 5; // Stack
4  const b = 'hello'; // Stack (reference to string in heap)
5  const c = true; // Stack
6
7  console.log('Stack variables:', a, b, c);
8} // After the function ends, everything from stack is removed
9
10// Heap - stores objects and arrays
11function heapExample() {
12  const obj = { x: 1, y: 2 }; // Object in heap, reference in stack
13  const arr = [1, 2, 3]; // Array in heap, reference in stack
14
15  // Modifying object in heap
16  obj.z = 3;
17  arr.push(4);
18
19  return { obj, arr }; // Returning references
20} // References from stack are removed, but objects in heap remain
21
22// Memory allocation visualization
23class MemoryVisualizer {
24  constructor() {
25    this.allocations = [];
26    this.currentId = 0;
27  }
28
29  allocate(type, size, description) {
30    const allocation = {
31      id: this.currentId++,
32      type: type, // 'stack' | 'heap'
33      size: size,
34      description: description,
35      timestamp: Date.now(),
36      freed: false
37    };
38
39    this.allocations.push(allocation);
40    console.log(`Allocated ${type}: ${description} (${size} bytes)`);
41
42    return allocation.id;
43  }
44
45  free(id) {
46    const allocation = this.allocations.find(a => a.id === id);
47    if (allocation) {
48      allocation.freed = true;
49      allocation.freedAt = Date.now();
50      console.log(`Freed: ${allocation.description}`);
51    }
52  }
53
54  getMemoryStats() {
55    const active = this.allocations.filter(a => !a.freed);
56    const freed = this.allocations.filter(a => a.freed);
57
58    return {
59      totalAllocations: this.allocations.length,
60      activeAllocations: active.length,
61      freedAllocations: freed.length,
62      totalActiveSize: active.reduce((sum, a) => sum + a.size, 0),
63      memoryLeaks: active.filter(a => Date.now() - a.timestamp > 30000) // > 30s
64    };
65  }
66}
67
68const memoryViz = new MemoryVisualizer();
69
70// Usage example
71function demonstrateMemoryAllocation() {
72  // Stack allocations
73  const stackId1 = memoryViz.allocate('stack', 8, 'number variable');
74  const stackId2 = memoryViz.allocate('stack', 8, 'string reference');
75
76  // Heap allocations
77  const heapId1 = memoryViz.allocate('heap', 64, 'object {name, age, city}');
78  const heapId2 = memoryViz.allocate('heap', 32, 'array [1,2,3,4,5]');
79
80  // Simulating memory release
81  setTimeout(() => {
82    memoryViz.free(stackId1);
83    memoryViz.free(stackId2);
84    console.log('Memory stats:', memoryViz.getMemoryStats());
85  }, 1000);
86
87  setTimeout(() => {
88    memoryViz.free(heapId1);
89    // heapId2 is not freed - simulating a memory leak
90    console.log('Final memory stats:', memoryViz.getMemoryStats());
91  }, 2000);
92}

This is a simplified model. The ECMAScript specification does not define where values live in memory, so the engine decides: for example, strings and variables captured by closures end up on the heap. MemoryVisualizer only simulates allocations, but it shows well what a leak is: an entry that nobody ever frees.

Garbage Collection in JavaScript

Types of GC Algorithms

Compare two strategies. Reference counting removes an object when nothing points to it. Mark-and-sweep starts from the roots, such as global variables and the call stack, marks everything reachable from them and removes the rest:

1// 1. Reference Counting (old algorithm)
2class ReferenceCountingDemo {
3  constructor() {
4    this.objects = new Map();
5  }
6
7  createObject(id, data) {
8    const obj = {
9      id: id,
10      data: data,
11      refCount: 1,
12      references: []
13    };
14
15    this.objects.set(id, obj);
16    console.log(`Created object ${id} with ref count: 1`);
17    return obj;
18  }
19
20  addReference(fromId, toId) {
21    const fromObj = this.objects.get(fromId);
22    const toObj = this.objects.get(toId);
23
24    if (fromObj && toObj) {
25      fromObj.references.push(toId);
26      toObj.refCount++;
27      console.log(`Object ${toId} ref count increased to: ${toObj.refCount}`);
28    }
29  }
30
31  removeReference(fromId, toId) {
32    const fromObj = this.objects.get(fromId);
33    const toObj = this.objects.get(toId);
34
35    if (fromObj && toObj) {
36      const index = fromObj.references.indexOf(toId);
37      if (index > -1) {
38        fromObj.references.splice(index, 1);
39        toObj.refCount--;
40        console.log(`Object ${toId} ref count decreased to: ${toObj.refCount}`);
41
42        // Auto GC when ref count reaches 0
43        if (toObj.refCount === 0) {
44          this.collectObject(toId);
45        }
46      }
47    }
48  }
49
50  collectObject(id) {
51    const obj = this.objects.get(id);
52    if (obj) {
53      // Recursively decrease reference counts
54      obj.references.forEach(refId => {
55        this.removeReference(id, refId);
56      });
57
58      this.objects.delete(id);
59      console.log(`Collected object ${id}`);
60    }
61  }
62
63  // Problem: Circular references
64  createCircularReference() {
65    const obj1 = this.createObject('circular1', 'First object');
66    const obj2 = this.createObject('circular2', 'Second object');
67
68    // Mutual references - memory leak in reference counting!
69    this.addReference('circular1', 'circular2');
70    this.addReference('circular2', 'circular1');
71
72    console.log('Created circular reference - will never be collected!');
73
74    return { obj1, obj2 };
75  }
76}
77
78// 2. Mark and Sweep (modern algorithm)
79class MarkAndSweepDemo {
80  constructor() {
81    this.objects = new Map();
82    this.roots = new Set(); // Global variables, stack references
83  }
84
85  createObject(id, data) {
86    const obj = {
87      id: id,
88      data: data,
89      references: [],
90      marked: false
91    };
92
93    this.objects.set(id, obj);
94    return obj;
95  }
96
97  addToRoots(id) {
98    this.roots.add(id);
99    console.log(`Added ${id} to GC roots`);
100  }
101
102  removeFromRoots(id) {
103    this.roots.delete(id);
104    console.log(`Removed ${id} from GC roots`);
105  }
106
107  addReference(fromId, toId) {
108    const fromObj = this.objects.get(fromId);
109    if (fromObj && !fromObj.references.includes(toId)) {
110      fromObj.references.push(toId);
111    }
112  }
113
114  // Mark phase - marks all reachable objects
115  markPhase() {
116    console.log('Starting mark phase...');
117
118    // Clear previous marks
119    this.objects.forEach(obj => obj.marked = false);
120
121    // Mark all objects reachable from roots
122    const visited = new Set();
123
124    const markRecursive = (id) => {
125      if (visited.has(id)) return;
126      visited.add(id);
127
128      const obj = this.objects.get(id);
129      if (obj) {
130        obj.marked = true;
131        console.log(`  Marked object ${id}`);
132
133        // Recursively mark references
134        obj.references.forEach(refId => markRecursive(refId));
135      }
136    };
137
138    // Start from all roots
139    this.roots.forEach(rootId => markRecursive(rootId));
140  }
141
142  // Sweep phase - removes unmarked objects
143  sweepPhase() {
144    console.log('Starting sweep phase...');
145
146    const toDelete = [];
147
148    this.objects.forEach((obj, id) => {
149      if (!obj.marked) {
150        toDelete.push(id);
151      }
152    });
153
154    toDelete.forEach(id => {
155      console.log(`Collecting object ${id}`);
156      this.objects.delete(id);
157    });
158
159    console.log(`Collected ${toDelete.length} objects`);
160  }
161
162  // Full GC cycle
163  runGarbageCollection() {
164    console.log('Running garbage collection...');
165    this.markPhase();
166    this.sweepPhase();
167    console.log(`Active objects: ${this.objects.size}`);
168  }
169
170  // Demonstration of resolving circular references
171  demonstrateCircularReferences() {
172    // Creating objects with circular references
173    const obj1 = this.createObject('mark1', 'Object 1');
174    const obj2 = this.createObject('mark2', 'Object 2');
175    const obj3 = this.createObject('mark3', 'Object 3');
176
177    // Circular references
178    this.addReference('mark1', 'mark2');
179    this.addReference('mark2', 'mark3');
180    this.addReference('mark3', 'mark1'); // Circular!
181
182    // Only obj1 is in roots
183    this.addToRoots('mark1');
184
185    console.log('Before GC - objects with circular references');
186    this.runGarbageCollection(); // All will be marked as reachable
187
188    // Remove from roots
189    this.removeFromRoots('mark1');
190
191    console.log('After removing from roots');
192    this.runGarbageCollection(); // All will be collected despite circular references!
193  }
194}

Two objects pointing at each other will fool reference counting, but not mark-and-sweep: when no root leads to them, both disappear. That is why modern engines use mark-and-sweep, and a reference cycle by itself is no longer a leak. After the mark and sweep phases the engine can also compact memory to remove the gaps.

Generational Garbage Collection

Most objects live briefly, so engines split the heap into generations. The young one is cleaned often and quickly, and objects that survive a few cycles move to the old one:

1// Modern JS engines use generational GC
2class GenerationalGCDemo {
3  constructor() {
4    // Different generations of objects
5    this.youngGeneration = new Map(); // New objects
6    this.oldGeneration = new Map();   // Old objects
7    this.permanentGeneration = new Map(); // Very old objects
8
9    this.gcCycles = 0;
10    this.promotionThreshold = 3; // How many GC cycles to survive to be promoted
11  }
12
13  allocateObject(id, data, size = 64) {
14    const obj = {
15      id: id,
16      data: data,
17      size: size,
18      generation: 'young',
19      gcSurvived: 0,
20      allocatedAt: Date.now(),
21      lastAccessed: Date.now()
22    };
23
24    this.youngGeneration.set(id, obj);
25    console.log(`Allocated ${id} in young generation`);
26    return obj;
27  }
28
29  accessObject(id) {
30    let obj = this.youngGeneration.get(id) ||
31              this.oldGeneration.get(id) ||
32              this.permanentGeneration.get(id);
33
34    if (obj) {
35      obj.lastAccessed = Date.now();
36      console.log(`Accessed object ${id}`);
37    }
38
39    return obj;
40  }
41
42  // Minor GC - young generation only
43  runMinorGC() {
44    console.log('Running Minor GC (young generation)...');
45    this.gcCycles++;
46
47    const survivors = [];
48    const toPromote = [];
49
50    this.youngGeneration.forEach((obj, id) => {
51      // Simulation: objects accessed in the last 5 seconds survive
52      const timeSinceLastAccess = Date.now() - obj.lastAccessed;
53
54      if (timeSinceLastAccess < 5000) {
55        obj.gcSurvived++;
56        survivors.push({ id, obj });
57
58        // Promotion to old generation
59        if (obj.gcSurvived >= this.promotionThreshold) {
60          toPromote.push({ id, obj });
61        }
62
63        console.log(`Object ${id} survived (count: ${obj.gcSurvived})`);
64      } else {
65        console.log(`Collected young object ${id}`);
66      }
67    });
68
69    // Clear young generation
70    this.youngGeneration.clear();
71
72    // Restore survivors
73    survivors.forEach(({ id, obj }) => {
74      if (!toPromote.find(p => p.id === id)) {
75        this.youngGeneration.set(id, obj);
76      }
77    });
78
79    // Promote to old generation
80    toPromote.forEach(({ id, obj }) => {
81      obj.generation = 'old';
82      this.oldGeneration.set(id, obj);
83      console.log(`Promoted ${id} to old generation`);
84    });
85
86    console.log(`Minor GC completed. Young: ${this.youngGeneration.size}, Old: ${this.oldGeneration.size}`);
87  }
88
89  // Major GC - all generations
90  runMajorGC() {
91    console.log('Running Major GC (all generations)...');
92
93    const collectFromGeneration = (generation, name) => {
94      const survivors = new Map();
95      let collected = 0;
96
97      generation.forEach((obj, id) => {
98        const timeSinceLastAccess = Date.now() - obj.lastAccessed;
99
100        // Old generation has a longer lifetime
101        const threshold = name === 'old' ? 10000 : 5000;
102
103        if (timeSinceLastAccess < threshold) {
104          survivors.set(id, obj);
105        } else {
106          collected++;
107          console.log(`Collected ${name} object ${id}`);
108        }
109      });
110
111      generation.clear();
112      survivors.forEach((obj, id) => generation.set(id, obj));
113
114      return collected;
115    };
116
117    const youngCollected = collectFromGeneration(this.youngGeneration, 'young');
118    const oldCollected = collectFromGeneration(this.oldGeneration, 'old');
119
120    console.log(`Major GC completed. Collected ${youngCollected + oldCollected} objects`);
121    console.log(`Remaining - Young: ${this.youngGeneration.size}, Old: ${this.oldGeneration.size}`);
122  }
123
124  // Automatic GC based on heuristics
125  autoGC() {
126    const youngSize = this.youngGeneration.size;
127    const oldSize = this.oldGeneration.size;
128
129    // GC triggers
130    if (youngSize > 100) { // Many young objects
131      this.runMinorGC();
132    }
133
134    if (oldSize > 50 || this.gcCycles % 10 === 0) { // Many old objects or every 10 cycles
135      this.runMajorGC();
136    }
137  }
138
139  getGenerationStats() {
140    return {
141      young: this.youngGeneration.size,
142      old: this.oldGeneration.size,
143      permanent: this.permanentGeneration.size,
144      totalGCCycles: this.gcCycles
145    };
146  }
147}
148
149// Generational GC demonstration
150const genGC = new GenerationalGCDemo();
151
152// Simulation of allocation patterns
153function simulateAllocationPattern() {
154  // Creating many short-lived objects
155  for (let i = 0; i < 50; i++) {
156    genGC.allocateObject(`temp_${i}`, `Temporary object ${i}`);
157  }
158
159  // Creating a few long-lived objects
160  for (let i = 0; i < 5; i++) {
161    const longLived = genGC.allocateObject(`long_${i}`, `Long-lived object ${i}`);
162
163    // Simulating regular access
164    setInterval(() => {
165      genGC.accessObject(`long_${i}`);
166    }, 1000);
167  }
168
169  // Automatic GC every two seconds
170  setInterval(() => {
171    genGC.autoGC();
172    console.log('Generation stats:', genGC.getGenerationStats());
173  }, 2000);
174}

The simulation simplifies one thing: a real GC does not check when you last used an object, only whether it is reachable. V8 has a young and an old generation, and the permanent generation is a concept from old Java.

Types of Memory Leaks

Global variables, listeners, timers, closures and the DOM

A leak is an object that is still reachable even though you no longer need it. Here are five typical sources together with their correct versions:

1// Problem: Uncontrolled global variables
2class GlobalVariableLeaks {
3  static demonstrateLeaks() {
4    // BAD: Accidental global variables
5    // Note: code inside a class always runs in strict mode, so both lines below throw here.
6    // This leak happens in a plain script without 'use strict'.
7    function accidentalGlobal() {
8      // Missing 'var', 'let', 'const' - creates a global variable!
9      leakedVariable = 'This will leak!';
10
11      // Also global via 'this' in non-strict mode
12      this.anotherLeak = { data: new Array(1000).fill('leak') };
13    }
14
15    accidentalGlobal();
16
17    // These variables will remain in memory until the end of the application
18    console.log('Leaked variables:', window.leakedVariable, window.anotherLeak);
19  }
20
21  static demonstrateSolutions() {
22    // GOOD: Use strict mode
23    'use strict';
24
25    function properFunction() {
26      // ReferenceError instead of a global variable
27      // notDeclared = 'This will throw error in strict mode';
28
29      let properVariable = 'This is properly scoped';
30      const anotherProper = { data: 'safe' };
31
32      return { properVariable, anotherProper };
33    }
34
35    // GOOD: Module pattern
36    const safeModule = (function() {
37      let privateData = [];
38
39      return {
40        addData: function(item) {
41          privateData.push(item);
42        },
43
44        getData: function() {
45          return privateData.slice(); // Return copy
46        },
47
48        clear: function() {
49          privateData = [];
50        }
51      };
52    })();
53
54    return { safeModule };
55  }
56}
57
58// 2. Event Listeners
59class EventListenerLeaks {
60  constructor() {
61    this.data = new Array(10000).fill('memory consuming data');
62    this.handlers = new Map();
63  }
64
65  // BAD: Event listeners without cleanup
66  addLeakyListeners() {
67    const button = document.getElementById('leaky-button');
68
69    // Problem: listener references an object that may hold a lot of data
70    const handler = () => {
71      console.log('Clicked!', this.data.length);
72    };
73
74    button?.addEventListener('click', handler);
75
76    // When the component is removed, the listener remains!
77    // The entire object cannot be collected by GC
78  }
79
80  // GOOD: Proper cleanup
81  addProperListeners() {
82    const button = document.getElementById('proper-button');
83
84    const handler = (event) => {
85      console.log('Proper click!', event.target.id);
86    };
87
88    this.handlers.set('button-click', handler);
89    button?.addEventListener('click', handler);
90  }
91
92  cleanup() {
93    // Always remove event listeners during cleanup
94    this.handlers.forEach((handler, key) => {
95      if (key === 'button-click') {
96        const button = document.getElementById('proper-button');
97        button?.removeEventListener('click', handler);
98      }
99    });
100
101    this.handlers.clear();
102    console.log('Event listeners cleaned up');
103  }
104
105  // Modern approach: AbortController
106  addModernListeners() {
107    const controller = new AbortController();
108    const signal = controller.signal;
109
110    document.addEventListener('click', (event) => {
111      console.log('Modern click!', event.target);
112    }, { signal });
113
114    // Cleanup all listeners at once
115    setTimeout(() => {
116      controller.abort();
117      console.log('All listeners aborted');
118    }, 10000);
119  }
120}
121
122// 3. Timers and Intervals
123class TimerLeaks {
124  constructor() {
125    this.data = new Array(100000).fill('timer data');
126    this.timers = new Set();
127  }
128
129  // BAD: Timers without cleanup
130  createLeakyTimers() {
131    // Problem: setInterval references the entire class
132    const intervalId = setInterval(() => {
133      console.log('Leaky timer tick', this.data.length);
134    }, 1000);
135
136    // Timer is never cleared!
137    // Object cannot be collected by GC
138
139    return intervalId;
140  }
141
142  // GOOD: Tracked timers
143  createTrackedTimers() {
144    const intervalId = setInterval(() => {
145      console.log('Tracked timer tick');
146    }, 1000);
147
148    this.timers.add(intervalId);
149
150    // Auto cleanup after time
151    const timeoutId = setTimeout(() => {
152      this.clearTimer(intervalId);
153    }, 10000);
154
155    this.timers.add(timeoutId);
156
157    return intervalId;
158  }
159
160  clearTimer(timerId) {
161    clearInterval(timerId);
162    clearTimeout(timerId);
163    this.timers.delete(timerId);
164    console.log(`Timer ${timerId} cleared`);
165  }
166
167  cleanup() {
168    this.timers.forEach(timerId => {
169      clearInterval(timerId);
170      clearTimeout(timerId);
171    });
172
173    this.timers.clear();
174    console.log('All timers cleaned up');
175  }
176
177  // Modern approach: AbortController for async operations
178  createAbortableTimer() {
179    const controller = new AbortController();
180
181    const timer = {
182      start: () => {
183        const interval = setInterval(() => {
184          if (controller.signal.aborted) {
185            clearInterval(interval);
186            return;
187          }
188
189          console.log('Abortable timer tick');
190        }, 1000);
191
192        return interval;
193      },
194
195      stop: () => {
196        controller.abort();
197      }
198    };
199
200    return timer;
201  }
202}
203
204// 4. Closures
205class ClosureLeaks {
206  static demonstrateLeaks() {
207    function createLeakyClosures() {
208      const largeData = new Array(1000000).fill('leak data');
209
210      // Problem: closure holds a reference to the entire scope
211      return {
212        // Even if we only use a small part of the data
213        getSmallPart: function() {
214          return largeData.slice(0, 10);
215        },
216
217        // This function also keeps the entire largeData in memory
218        getLength: function() {
219          return largeData.length;
220        }
221      };
222    }
223
224    const leaky = createLeakyClosures();
225    console.log('Small part:', leaky.getSmallPart());
226
227    // largeData remains in memory even though we only need the length!
228    return leaky;
229  }
230
231  static demonstrateSolutions() {
232    function createOptimizedClosures() {
233      const largeData = new Array(1000000).fill('optimized data');
234
235      // GOOD: Extract only the needed data
236      const smallPart = largeData.slice(0, 10);
237      const dataLength = largeData.length;
238
239      // largeData can be collected by GC
240
241      return {
242        getSmallPart: function() {
243          return smallPart;
244        },
245
246        getLength: function() {
247          return dataLength;
248        }
249      };
250    }
251
252    // GOOD: Null references when done
253    function createCleanClosures() {
254      let data = new Array(100000).fill('clean data');
255
256      const api = {
257        process: function() {
258          const result = data.map(item => item.toUpperCase());
259          data = null; // Explicit cleanup!
260          return result;
261        }
262      };
263
264      return api;
265    }
266
267    return { createOptimizedClosures, createCleanClosures };
268  }
269}
270
271// 5. DOM References
272class DOMReferenceLeaks {
273  constructor() {
274    this.domReferences = new Map();
275    this.observers = [];
276  }
277
278  // BAD: Holding DOM references
279  createDOMLeaks() {
280    // Problem: references to removed DOM elements
281    const elements = document.querySelectorAll('.dynamic-content');
282
283    elements.forEach((element, index) => {
284      this.domReferences.set(`element_${index}`, {
285        node: element, // Direct reference!
286        data: new Array(1000).fill(`data_${index}`)
287      });
288    });
289
290    // Even if elements are removed from the DOM,
291    // they will remain in memory due to these references!
292  }
293
294  // GOOD: WeakMap for DOM references
295  createSafeDOMReferences() {
296    const elementData = new WeakMap();
297
298    const elements = document.querySelectorAll('.safe-content');
299
300    elements.forEach((element, index) => {
301      // WeakMap allows GC of element when it is removed from DOM
302      elementData.set(element, {
303        id: index,
304        data: new Array(1000).fill(`safe_data_${index}`)
305      });
306    });
307
308    return elementData;
309  }
310
311  // Proper cleanup for DOM observers
312  setupDOMObserver() {
313    const observer = new MutationObserver((mutations) => {
314      mutations.forEach(mutation => {
315        console.log('DOM changed:', mutation.type);
316      });
317    });
318
319    observer.observe(document.body, {
320      childList: true,
321      subtree: true
322    });
323
324    this.observers.push(observer);
325
326    // Auto cleanup
327    setTimeout(() => {
328      this.cleanupObservers();
329    }, 30000);
330  }
331
332  cleanupObservers() {
333    this.observers.forEach(observer => {
334      observer.disconnect();
335    });
336
337    this.observers = [];
338    console.log('DOM observers cleaned up');
339  }
340
341  cleanup() {
342    this.domReferences.clear();
343    this.cleanupObservers();
344  }
345}

The most common cause is forgotten event listeners and timers. A listener on an object that lives longer than the component, for example on document, keeps alive everything its closure reaches. AbortController removes many listeners with a single abort(), and a WeakMap does not prevent a DOM element from being collected. In the global variables example, remember that classes run in strict mode, so assigning to an undeclared variable throws a ReferenceError.

Memory Leak Detection and Monitoring

Performance API for Memory Monitoring

A leak gives itself away through steadily growing memory usage. Every few seconds the monitor records the heap size and warns when it keeps growing:

1// Memory monitoring utilities
2class MemoryMonitor {
3  constructor() {
4    this.measurements = [];
5    this.isMonitoring = false;
6    this.alertThreshold = 50 * 1024 * 1024; // 50MB
7  }
8
9  startMonitoring(interval = 5000) {
10    if (this.isMonitoring) return;
11
12    this.isMonitoring = true;
13    console.log('Started memory monitoring');
14
15    const monitor = () => {
16      if (!this.isMonitoring) return;
17
18      const memInfo = this.getMemoryInfo();
19      this.measurements.push({
20        ...memInfo,
21        timestamp: Date.now()
22      });
23
24      this.checkMemoryAlerts(memInfo);
25      this.trimMeasurements();
26
27      setTimeout(monitor, interval);
28    };
29
30    monitor();
31  }
32
33  stopMonitoring() {
34    this.isMonitoring = false;
35    console.log('Stopped memory monitoring');
36  }
37
38  getMemoryInfo() {
39    if (performance.memory) {
40      return {
41        usedJSHeapSize: performance.memory.usedJSHeapSize,
42        totalJSHeapSize: performance.memory.totalJSHeapSize,
43        jsHeapSizeLimit: performance.memory.jsHeapSizeLimit,
44        usedPercent: (performance.memory.usedJSHeapSize / performance.memory.jsHeapSizeLimit) * 100
45      };
46    }
47
48    return {
49      usedJSHeapSize: 0,
50      totalJSHeapSize: 0,
51      jsHeapSizeLimit: 0,
52      usedPercent: 0
53    };
54  }
55
56  checkMemoryAlerts(memInfo) {
57    if (memInfo.usedJSHeapSize > this.alertThreshold) {
58      console.warn('High memory usage detected:', {
59        used: this.formatBytes(memInfo.usedJSHeapSize),
60        percent: memInfo.usedPercent.toFixed(2) + '%'
61      });
62
63      this.triggerMemoryCleanup();
64    }
65
66    // Check for memory leaks (constant growth)
67    if (this.measurements.length > 10) {
68      const recent = this.measurements.slice(-10);
69      const growth = recent[recent.length - 1].usedJSHeapSize - recent[0].usedJSHeapSize;
70      const timeSpan = recent[recent.length - 1].timestamp - recent[0].timestamp;
71      const growthRate = growth / timeSpan; // bytes per ms
72
73      if (growthRate > 1000) { // > 1KB/s growth
74        console.warn('Potential memory leak detected:', {
75          growthRate: this.formatBytes(growthRate * 1000) + '/s',
76          totalGrowth: this.formatBytes(growth)
77        });
78      }
79    }
80  }
81
82  triggerMemoryCleanup() {
83    // Force garbage collection if available (dev tools)
84    if (window.gc) {
85      window.gc();
86      console.log('Forced garbage collection');
87    }
88
89    // Cleanup event
90    window.dispatchEvent(new CustomEvent('memoryCleanup', {
91      detail: { memoryUsage: this.getMemoryInfo() }
92    }));
93  }
94
95  generateMemoryReport() {
96    if (this.measurements.length === 0) {
97      return { error: 'No measurements available' };
98    }
99
100    const latest = this.measurements[this.measurements.length - 1];
101    const oldest = this.measurements[0];
102
103    return {
104      currentUsage: {
105        used: this.formatBytes(latest.usedJSHeapSize),
106        total: this.formatBytes(latest.totalJSHeapSize),
107        limit: this.formatBytes(latest.jsHeapSizeLimit),
108        percent: latest.usedPercent.toFixed(2) + '%'
109      },
110      trend: {
111        totalGrowth: this.formatBytes(latest.usedJSHeapSize - oldest.usedJSHeapSize),
112        timeSpan: this.formatTime(latest.timestamp - oldest.timestamp),
113        measurementCount: this.measurements.length
114      },
115      recommendations: this.generateRecommendations()
116    };
117  }
118
119  generateRecommendations() {
120    const recommendations = [];
121    const latest = this.measurements[this.measurements.length - 1];
122
123    if (latest.usedPercent > 80) {
124      recommendations.push('Memory usage is very high - consider implementing cleanup strategies');
125    }
126
127    if (this.measurements.length > 5) {
128      const recentGrowth = this.measurements.slice(-5);
129      const avgGrowth = recentGrowth.reduce((sum, m, i) =>
130        i === 0 ? 0 : sum + (m.usedJSHeapSize - recentGrowth[i-1].usedJSHeapSize), 0
131      ) / (recentGrowth.length - 1);
132
133      if (avgGrowth > 1024 * 1024) { // > 1MB average growth
134        recommendations.push('Consistent memory growth detected - check for memory leaks');
135      }
136    }
137
138    return recommendations;
139  }
140
141  formatBytes(bytes) {
142    const units = ['B', 'KB', 'MB', 'GB'];
143    let size = bytes;
144    let unitIndex = 0;
145
146    while (size >= 1024 && unitIndex < units.length - 1) {
147      size /= 1024;
148      unitIndex++;
149    }
150
151    return `${size.toFixed(2)} ${units[unitIndex]}`;
152  }
153
154  formatTime(ms) {
155    const seconds = Math.floor(ms / 1000);
156    const minutes = Math.floor(seconds / 60);
157    const hours = Math.floor(minutes / 60);
158
159    if (hours > 0) return `${hours}h ${minutes % 60}m`;
160    if (minutes > 0) return `${minutes}m ${seconds % 60}s`;
161    return `${seconds}s`;
162  }
163
164  trimMeasurements() {
165    // Keep only last 100 measurements
166    if (this.measurements.length > 100) {
167      this.measurements = this.measurements.slice(-100);
168    }
169  }
170}
171
172// Memory leak detector
173class MemoryLeakDetector {
174  constructor() {
175    this.snapshots = [];
176    this.leakPatterns = new Map();
177  }
178
179  takeSnapshot(label = 'snapshot') {
180    const snapshot = {
181      label: label,
182      timestamp: Date.now(),
183      memory: performance.memory ? {
184        used: performance.memory.usedJSHeapSize,
185        total: performance.memory.totalJSHeapSize
186      } : null,
187      objectCounts: this.countObjects()
188    };
189
190    this.snapshots.push(snapshot);
191    console.log(`Memory snapshot taken: ${label}`);
192
193    return snapshot;
194  }
195
196  countObjects() {
197    // Approximate object counting (in reality use dev tools)
198    const counts = {
199      arrays: 0,
200      objects: 0,
201      functions: 0,
202      strings: 0
203    };
204
205    // Simulation - in real implementation use heap snapshot API
206    return counts;
207  }
208
209  compareSnapshots(snapshot1Label, snapshot2Label) {
210    const snap1 = this.snapshots.find(s => s.label === snapshot1Label);
211    const snap2 = this.snapshots.find(s => s.label === snapshot2Label);
212
213    if (!snap1 || !snap2) {
214      console.error('Snapshots not found');
215      return null;
216    }
217
218    const comparison = {
219      memoryGrowth: snap2.memory ? snap2.memory.used - snap1.memory.used : 0,
220      timeSpan: snap2.timestamp - snap1.timestamp,
221      objectGrowth: {},
222      suspiciousGrowth: []
223    };
224
225    // Object growth analysis
226    Object.keys(snap1.objectCounts).forEach(type => {
227      const growth = snap2.objectCounts[type] - snap1.objectCounts[type];
228      comparison.objectGrowth[type] = growth;
229
230      if (growth > 100) { // Suspicious growth threshold
231        comparison.suspiciousGrowth.push({
232          type: type,
233          growth: growth,
234          growthRate: growth / (comparison.timeSpan / 1000) // per second
235        });
236      }
237    });
238
239    return comparison;
240  }
241
242  detectLeakPatterns() {
243    if (this.snapshots.length < 3) return [];
244
245    const patterns = [];
246    const recent = this.snapshots.slice(-3);
247
248    // Check for consistent memory growth
249    const memoryGrowth = recent.map((snap, i) =>
250      i === 0 ? 0 : snap.memory.used - recent[i-1].memory.used
251    ).slice(1);
252
253    const consistentGrowth = memoryGrowth.every(growth => growth > 0);
254
255    if (consistentGrowth) {
256      const avgGrowth = memoryGrowth.reduce((a, b) => a + b) / memoryGrowth.length;
257
258      patterns.push({
259        type: 'consistent_memory_growth',
260        severity: avgGrowth > 1024 * 1024 ? 'high' : 'medium',
261        description: `Memory consistently growing by ${(avgGrowth / 1024 / 1024).toFixed(2)}MB per measurement`,
262        avgGrowth: avgGrowth
263      });
264    }
265
266    return patterns;
267  }
268}
269
270// Global memory monitor instance
271const memoryMonitor = new MemoryMonitor();
272const leakDetector = new MemoryLeakDetector();
273
274// Usage example
275function startMemoryAnalysis() {
276  memoryMonitor.startMonitoring(2000); // Every 2 seconds
277
278  // Take initial snapshot
279  leakDetector.takeSnapshot('initial');
280
281  // Simulate some operations and take snapshots
282  setTimeout(() => {
283    // Simulate memory allocation
284    const data = new Array(100000).fill('test data');
285    leakDetector.takeSnapshot('after_allocation');
286  }, 5000);
287
288  setTimeout(() => {
289    // Generate memory report
290    const report = memoryMonitor.generateMemoryReport();
291    console.log('Memory Report:', report);
292
293    const patterns = leakDetector.detectLeakPatterns();
294    console.log('Leak Patterns:', patterns);
295  }, 10000);
296}