Hogyan javítanád a memóriaszivárgást a kódodban?

Meg tudná határozni a memória szivárgás forrását a böngésző fejlesztői eszközeivel (Timeline / Performance, Memory)?

Gyakori okok a memória szivárgására:

• Lógó hivatkozások objektumokra:
  • Elfelejtett időzítők (setInterval, setTimeout), amelyek objektumokra hivatkoznak.
  • Nem egyértelmű eseménykezelők, amelyek nem lettek leválasztva (removeEventListener).
  • Zárójelek, amelyek külső változókat tartanak meg hosszabb ideig, mint szükséges.
  • DOM elemek, amelyeket eltávolítottak a dokumentumból, de még mindig vannak hivatkozások rájuk JavaScriptben.

// Elfelejtett időzítő miatti szivárgás példája
const leakyObject = {
  data: 'some data'
};

setInterval(() => {
  console.log(leakyObject.data); // a leakyObject nem gyűjthető össze a szemétgyűjtő által
}, 1000);

• Nagy adatstruktúrák:
  • Túlságosan nagy tömbök vagy objektumok létrehozása és tárolása, amikor iteratorokat vagy streaminget lehetne használni.
• Hibás cache használat:
  • Képtelenek végtelenül növekedni, anélkül, hogy kivonási stratégiát alkalmaznánk (LRU, LFU stb.).
• Külső könyvtárakból származó szivárgások:
  • Ellenőrizze a könyvtárak dokumentációját vagy forráskódját potenciális problémákért.

Javítás:

1. Események és időzítők törlése: Győződjön meg arról, hogy minden eseménykezelő leválasztásra került, és az időzítők törölve a komponens vagy objektum megsemmisítésekor.

// Helyes időzítő törlés
const leakyObject = {
  data: 'some data'
};
let timerId;

function startTimer() {
  timerId = setInterval(() => {
    console.log(leakyObject.data);
  }, 1000);
}

function stopTimer() {
  clearInterval(timerId); // Időzítő törlése
}

2. Hivatkozások nullázása: Egyértelműen nullázza a nagy vagy nem használt objektumokra mutató hivatkozásokat, hogy a szemétgyűjtő összegyűjthesse azokat.
3. WeakMap és WeakSet használata: Az objektumokra mutató hivatkozások tárolására, amelyeket a szemétgyűjtő eltávolíthat, ha nincs más erős hivatkozás.
4. Adatszerkezetek optimalizálása: Használjon hatékonyabb szerkezeteket vagy megközelítéseket (pl. késleltetett betöltés).
5. A cache méretének korlátozása: Kivonási stratégiák bevezetése.
6. Könyvtárak frissítése vagy cseréje: Ha a probléma külső könyvtárban van, frissítse vagy keressen alternatívát.

A javítás után ismét használja a fejlesztői eszközöket a szivárgás hiányának megerősítéséhez.