Deși JavaScript este un limbaj cu gestionare automată a memoriei prin Garbage Collection (GC), aplicațiile de tip Single Page Application (React, Vue, SPA) pot suferi frecvent de scurgeri de memorie (Memory Leaks). O scurgere apare atunci când un obiect nu mai este necesar aplicației, dar rămâne referențiat accidental dintr-o rădăcină activă (Root), împiedicând colectorul de gunoi să elibereze memoria RAM.
Cum funcționează algoritmul Mark-and-Sweep
Colectorul de gunoi pornește periodic de la rădăcini (variabile globale de pe window, stiva curentă de execuție) și marchează (mark) toate obiectele accesibile prin referințe directe sau indirecte. În faza a doua (sweep), orice zonă de memorie care nu a fost marcată este considerată inaccesibilă și este eliberată.
// 1. EVENT LISTENERS NECURĂȚAȚI LA DEMONTAREA UNEI COMPONENTE
// Problema: Callback-ul păstrează o referință vie către întregul obiect părinte!
// Soluție modernă: Folosește AbortController pentru curățare automată printr-un singur apel:
const controller = new AbortController();
window.addEventListener('resize', () => {
console.log("Fereastră redimensionată");
}, { signal: controller.signal });
// Când componenta se distruge, oprim toți listenerii asociați instant:
controller.abort();
// 2. NODURI DOM DETAȘATE (Detached DOM Nodes)
// Problema: Ștergi un element din HTML, dar îl păstrezi salvat într-o variabilă JS:
let butonSalvat = document.getElementById('btn-salvare');
document.body.removeChild(butonSalvat);
// Deși a dispărut din pagină, întreg nodul și copiii lui rămân în RAM!
// Soluție: Eliberează referința când nu mai este necesară:
butonSalvat = null;
// 3. CACHE-URI SAU METADATE CU OBIECTE PE POST DE CHEI
// Problema: Obiectul cheie dintr-un Map normal nu poate fi șters de GC niciodată.
// Soluție: Folosește WeakMap sau WeakSet (referințe slabe care nu blochează GC):
const datePrivateCache = new WeakMap();
let utilizator = { id: 101 };
datePrivateCache.set(utilizator, { token: "abc" });
utilizator = null; // Când utilizatorul devine null, intrarea din WeakMap este ștearsă automat de GC!Depanarea Memoriei în Chrome DevTools
Deschide panoul Memory din Chrome DevTools, selectează Heap Snapshot, realizează o primă captură, efectuează acțiunea suspectată în pagină (ex: deschide și închide o fereastră modală de 10 ori), apoi realizează o a doua captură. Comparația Comparison va evidenția imediat obiectele care s-au acumulat și nu au fost curățate.