Kuidas parandaksite mälu lekkimise oma koodis?

Saaksite tuvastada lekkekohast allika kasutades brauseri ar arendaja tööriistu (Timeline / Performance, Memory).

Levinumad mälulekke põhjused:

• Objektidele viitavad lingid:
  • Unustatud ajastajad (setInterval, setTimeout), mis viitavad objektidele.
  • Ebaselged sündmuste töötlejad, mida pole lahti ühendatud (removeEventListener).
  • Kokkupandused, mis hoiavad väliseid muutujaid kauem kui vaja.
  • DOM elemendid, mis on dokumentist eemaldatud, kuid neile on jäänud viited JavaScriptis.

// Näide lekkest unustatud ajastaja tõttu
const leakyObject = {
  data: 'mõned andmed'
};

setInterval(() => {
  console.log(leakyObject.data); // leakyObject ei saa koguda prügikoristaja poolt
}, 1000);

• Suurte andmestruktuuride kasutamine:
  • Liiga suurte massiivide või objektide loomine ja salvestamine, kui saab kasutada iteraatoreid või voogusid.
• Puhvri kasutamise viga:
  • Puhvrid, mis kasvavad lõpmatuseni ilma väljatõstmise strateegiata (LRU, LFU jne.).
• Kolmandate osapoolte teekide lekked:
  • Kontrollida teekide dokumentatsiooni või lähtekoodi võimalike probleemide osas.

Parandused:

1. Sündmuste ja ajastajate tühistamine: Veenduda, et kõik sündmuste töötlejad on lahti ühendatud ja ajastajad on tühjendatud, kui komponent või objekt hävitatakse.

// Õige ajastaja puhastamine
const leakyObject = {
  data: 'mõned andmed'
};
let timerId;

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

function stopTimer() {
  clearInterval(timerId); // Ajastaja puhastamine
}

2. Viidete nullimine: Selgelt nullida viited suurtele või kasutamata objektidele, et prügikoristaja saaks need koguda.
3. WeakMap ja WeakSet kasutamine: Hoida viiteid objektidele, mis võivad prügikoristaja poolt eemaldada, kui nendele pole muid tugevaid viiteid.
4. Andmestruktuuride optimeerimine: Kasutada tõhusamaid andmestruktuure või lähenemisi (nt laiska laadimine).
5. Puhvri suuruse piiramine: Rakendada väljatõstmise strateegiaid.
6. Teekide uuendamine või asendamine: Kui probleem on kolmanda osapooga teegis, uuendada seda või leida alternatiiv.

Pärast parandust kasutaksin uuesti arendaja tööriistu, et kinnitada, et lekked puuduvad.