Zarządzanie pamięcią - garbage collection, memory leaks

Wyobraź sobie wybieg, z którego nikt nie wywozi resztek karmy. Przez kilka dni nic nie widać, a po miesiącu T-Rex nie ma gdzie stanąć. Tak działa wyciek pamięci (memory leak): aplikacja trzyma dane, których już nie potrzebuje, i z każdą godziną zwalnia. Zarządzanie pamięcią jest jednym z najważniejszych aspektów wydajności. Mimo że JavaScript ma automatyczny garbage collector, musisz rozumieć, jak działa pamięć, aby unikać wycieków.

Jak działa pamięć w JavaScript

Memory lifecycle

Każda wartość przechodzi trzy etapy: alokację, użycie i zwolnienie. Dwa pierwsze widzisz w kodzie, trzeci wykonuje za Ciebie garbage collector (GC):

1// Cykl życia pamięci w JavaScript
2const memoryLifecycle = {
3  // 1. Alokacja pamięci - automatyczna
4  allocation: () => {
5    const obj = { name: 'John', age: 30 }; // Alokacja w heap
6    const arr = [1, 2, 3, 4, 5]; // Alokacja w heap
7    const num = 42; // Alokacja w stack (primitive)
8
9    return { obj, arr, num };
10  },
11
12  // 2. Użycie pamięci - odczyt/zapis
13  usage: (data) => {
14    data.obj.name = 'Jane'; // Użycie zaalokowanej pamięci
15    data.arr.push(6);
16
17    console.log(data.obj, data.arr);
18  },
19
20  // 3. Zwalnianie pamięci - automatyczne przez GC
21  release: () => {
22    // Gdy zmienne wychodzą poza scope, stają się kandydatami do GC
23    // GC uruchomi się automatycznie w odpowiednim momencie
24  }
25};
26
27// Demonstracja cyklu
28function demonstrateMemoryLifecycle() {
29  const data = memoryLifecycle.allocation(); // Alokacja
30  memoryLifecycle.usage(data); // Użycie
31  // Po zakończeniu funkcji, 'data' staje się kandydatem do GC
32}
33
34demonstrateMemoryLifecycle();

Nie wywołujesz żadnego free(). Gdy data przestaje być osiągalne po zakończeniu funkcji, obiekt staje się kandydatem do sprzątnięcia, a moment wybierze GC.

Stack vs Heap

Często mówi się, że prymitywy żyją na stosie (stack), a obiekty na stercie (heap):

1// Stack - przechowuje prymitywy i referencje
2function stackExample() {
3  const a = 5; // Stack
4  const b = 'hello'; // Stack (reference do string w heap)
5  const c = true; // Stack
6
7  console.log('Stack variables:', a, b, c);
8} // Po zakończeniu funkcji, wszystko ze stack zostaje usunięte
9
10// Heap - przechowuje obiekty i tablice
11function heapExample() {
12  const obj = { x: 1, y: 2 }; // Obiekt w heap, referencja w stack
13  const arr = [1, 2, 3]; // Tablica w heap, referencja w stack
14
15  // Modyfikacja obiektu w heap
16  obj.z = 3;
17  arr.push(4);
18
19  return { obj, arr }; // Zwracamy referencje
20} // Referencje ze stack są usuwane, ale obiekty w heap pozostają
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// Przykład użycia
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  // Symulacja zwalniania pamięci
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 nie zostaje zwolniony - symulacja memory leak
90    console.log('Final memory stats:', memoryViz.getMemoryStats());
91  }, 2000);
92}

To uproszczony model. Specyfikacja ECMAScript nie określa, gdzie w pamięci leżą wartości, więc decyduje silnik: na przykład napisy i zmienne złapane przez domknięcia trafiają na stertę. MemoryVisualizer tylko symuluje alokacje, ale dobrze pokazuje, czym jest wyciek: wpisem, którego nikt nie zwolni.

Garbage Collection w JavaScript

Typy algorytmów GC

Porównaj dwie strategie. Zliczanie referencji (reference counting) usuwa obiekt, gdy nic na niego nie wskazuje. Mark-and-sweep zaczyna od korzeni (roots), takich jak zmienne globalne i stos wywołań, oznacza wszystko, co da się z nich osiągnąć, a resztę usuwa:

1// 1. Reference Counting (stary algorytm)
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    // Wzajemne referencje - memory leak w 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 (nowoczesny algorytm)
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 - oznacza wszystkie osiągnalne obiekty
115  markPhase() {
116    console.log('Starting mark phase...');
117
118    // Wyczyść poprzednie oznaczenia
119    this.objects.forEach(obj => obj.marked = false);
120
121    // Oznacz wszystkie obiekty osiągnalne z 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        // Rekurencyjnie oznacz referencje
134        obj.references.forEach(refId => markRecursive(refId));
135      }
136    };
137
138    // Rozpocznij od wszystkich roots
139    this.roots.forEach(rootId => markRecursive(rootId));
140  }
141
142  // Sweep phase - usuwa nieoznaczone obiekty
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  // Pełny cykl GC
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  // Demonstracja rozwiązywania circular references
171  demonstrateCircularReferences() {
172    // Tworzenie obiektów z 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    // Tylko obj1 jest w roots
183    this.addToRoots('mark1');
184
185    console.log('Before GC - objects with circular references');
186    this.runGarbageCollection(); // Wszystkie będą oznaczone jako osiągalne
187
188    // Usuwamy z roots
189    this.removeFromRoots('mark1');
190
191    console.log('After removing from roots');
192    this.runGarbageCollection(); // Wszystkie będą zebrane mimo circular references!
193  }
194}

Dwa obiekty wskazujące na siebie nawzajem oszukają zliczanie referencji, ale nie mark-and-sweep: gdy żaden korzeń do nich nie prowadzi, znikają oba. Dlatego nowoczesne silniki używają mark-and-sweep, a sam cykl referencji nie jest już wyciekiem. Po fazach mark i sweep silnik może jeszcze zagęścić pamięć (compact), żeby usunąć dziury.

Generational Garbage Collection

Większość obiektów żyje krótko, więc silniki dzielą stertę na generacje. Młodą sprzątają często i szybko, a obiekty, które przetrwają kilka cykli, trafiają do starej:

1// Nowoczesne silniki JS używają generational GC
2class GenerationalGCDemo {
3  constructor() {
4    // Różne generacje obiektów
5    this.youngGeneration = new Map(); // Nowe obiekty
6    this.oldGeneration = new Map();   // Stare obiekty
7    this.permanentGeneration = new Map(); // Bardzo stare obiekty
8
9    this.gcCycles = 0;
10    this.promotionThreshold = 3; // Ile cykli GC przeżyć aby zostać promowanym
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 - tylko young generation
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      // Symulacja: obiekty używane w ostatnich 5 sekundach przeżywają
52      const timeSinceLastAccess = Date.now() - obj.lastAccessed;
53
54      if (timeSinceLastAccess < 5000) {
55        obj.gcSurvived++;
56        survivors.push({ id, obj });
57
58        // Promocja do 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    // Wyczyść young generation
70    this.youngGeneration.clear();
71
72    // Przywróć survivors
73    survivors.forEach(({ id, obj }) => {
74      if (!toPromote.find(p => p.id === id)) {
75        this.youngGeneration.set(id, obj);
76      }
77    });
78
79    // Promuj do 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 - wszystkie generacje
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 ma dłuższy czas życia
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  // Automatyczny GC na podstawie heurystyk
125  autoGC() {
126    const youngSize = this.youngGeneration.size;
127    const oldSize = this.oldGeneration.size;
128
129    // Triggers dla GC
130    if (youngSize > 100) { // Dużo młodych obiektów
131      this.runMinorGC();
132    }
133
134    if (oldSize > 50 || this.gcCycles % 10 === 0) { // Dużo starych obiektów lub co 10 cykli
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// Demonstracja generational GC
150const genGC = new GenerationalGCDemo();
151
152// Symulacja allocation patterns
153function simulateAllocationPattern() {
154  // Tworzenie wielu krótkotrwałych obiektów
155  for (let i = 0; i < 50; i++) {
156    genGC.allocateObject(`temp_${i}`, `Temporary object ${i}`);
157  }
158
159  // Tworzenie kilku długotrwałych obiektów
160  for (let i = 0; i < 5; i++) {
161    const longLived = genGC.allocateObject(`long_${i}`, `Long-lived object ${i}`);
162
163    // Symulacja regularnego dostępu
164    setInterval(() => {
165      genGC.accessObject(`long_${i}`);
166    }, 1000);
167  }
168
169  // Automatyczny GC co dwie sekundy
170  setInterval(() => {
171    genGC.autoGC();
172    console.log('Generation stats:', genGC.getGenerationStats());
173  }, 2000);
174}

Symulacja upraszcza jedno: prawdziwy GC nie sprawdza, kiedy ostatnio użyłeś obiektu, tylko czy jest osiągalny. V8 ma generację młodą i starą, a generacja permanent to pojęcie z dawnej Javy.

Rodzaje Memory Leaks

Zmienne globalne, listenery, timery, domknięcia i DOM

Wyciek to obiekt wciąż osiągalny, choć już go nie potrzebujesz. Oto pięć typowych źródeł wraz z poprawnymi wersjami:

1// Problem: Niekontrolowane globalne zmienne
2class GlobalVariableLeaks {
3  static demonstrateLeaks() {
4    // BAD: Przypadkowe globalne zmienne
5    // Uwaga: kod w klasie zawsze działa w trybie strict, więc tutaj obie linie rzucą błąd.
6    // Taki wyciek powstaje w zwykłym skrypcie bez 'use strict'.
7    function accidentalGlobal() {
8      // Brak 'var', 'let', 'const' - tworzy globalną zmienną!
9      leakedVariable = 'This will leak!';
10
11      // Też globalnie przez 'this' w non-strict mode
12      this.anotherLeak = { data: new Array(1000).fill('leak') };
13    }
14
15    accidentalGlobal();
16
17    // Te zmienne pozostaną w pamięci do końca działania aplikacji
18    console.log('Leaked variables:', window.leakedVariable, window.anotherLeak);
19  }
20
21  static demonstrateSolutions() {
22    // GOOD: Używaj strict mode
23    'use strict';
24
25    function properFunction() {
26      // ReferenceError zamiast globalnej zmiennej
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: Moduł 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 bez cleanup
66  addLeakyListeners() {
67    const button = document.getElementById('leaky-button');
68
69    // Problem: listener referencje obiekt, który może mieć dużo danych
70    const handler = () => {
71      console.log('Clicked!', this.data.length);
72    };
73
74    button?.addEventListener('click', handler);
75
76    // Kiedy komponent jest usuwany, listener pozostaje!
77    // Cały obiekt nie może być zebrany przez 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    // Zawsze usuń event listeners podczas 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 wszystkich listeners na raz
115    setTimeout(() => {
116      controller.abort();
117      console.log('All listeners aborted');
118    }, 10000);
119  }
120}
121
122// 3. Timers i Intervals
123class TimerLeaks {
124  constructor() {
125    this.data = new Array(100000).fill('timer data');
126    this.timers = new Set();
127  }
128
129  // BAD: Timers bez cleanup
130  createLeakyTimers() {
131    // Problem: setInterval referencje całą klasę
132    const intervalId = setInterval(() => {
133      console.log('Leaky timer tick', this.data.length);
134    }, 1000);
135
136    // Timer nigdy nie zostaje wyczyszczony!
137    // Obiekt nie może być zebrany przez 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 po czasie
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 dla 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 trzyma referencję do całego scope
211      return {
212        // Nawet jeśli używamy tylko małej części danych
213        getSmallPart: function() {
214          return largeData.slice(0, 10);
215        },
216
217        // Ta funkcja też trzyma całe largeData w pamięci
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 pozostaje w pamięci mimo że potrzebujemy tylko length!
228    return leaky;
229  }
230
231  static demonstrateSolutions() {
232    function createOptimizedClosures() {
233      const largeData = new Array(1000000).fill('optimized data');
234
235      // GOOD: Wyciągnij tylko potrzebne dane
236      const smallPart = largeData.slice(0, 10);
237      const dataLength = largeData.length;
238
239      // largeData może być zebrany przez 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: referencje do usuniętych elementów DOM
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    // Nawet jeśli elementy zostaną usunięte z DOM,
291    // pozostaną w pamięci przez te referencje!
292  }
293
294  // GOOD: WeakMap dla 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 pozwala na GC elementu gdy zostanie usunięty z 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 dla 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}

Najczęstsza przyczyna to zapomniane event listenery i timery. Listener na obiekcie, który żyje dłużej niż komponent, na przykład na document, trzyma przy życiu wszystko, do czego sięga jego domknięcie. AbortController usuwa wiele listenerów jednym abort(), a WeakMap nie blokuje sprzątnięcia elementu DOM. W przykładzie ze zmiennymi globalnymi pamiętaj, że klasy działają w trybie strict, więc przypisanie do niezadeklarowanej zmiennej rzuci ReferenceError.

Memory Leak Detection i Monitoring

Performance API dla Memory Monitoring

Wyciek zdradza stały wzrost zużycia pamięci. Monitor co kilka sekund zapisuje rozmiar sterty i ostrzega, gdy ten rośnie bez przerwy:

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    // Przybliżone liczenie obiektów (w rzeczywistości użyj dev tools)
198    const counts = {
199      arrays: 0,
200      objects: 0,
201      functions: 0,
202      strings: 0
203    };
204
205    // Symulacja - w prawdziwej implementacji użyj 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    // Analiza wzrostu obiektów
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}