Kaip ištaisytumėte atminties nutekėjimą savo kode?

Jūs galėtumėte nustatyti nutekėjimo šaltinį naudodamiesi naršyklės kūrėjo įrankiais (Timeline / Performance, Memory).

Dažnos atminties nutekėjimo priežastys:

• Objektų prikabinimai:
  • Pamiršti laikmačiai (setInterval, setTimeout), kurie nurodo į objektus.
  • Neaiškūs įvykių tvarkyklės, kurios nėra atjungtos (removeEventListener).
  • Užklausos, kurios laiko išorines kintamąsias ilgiau nei reikia.
  • DOM elementai, pašalinti iš dokumento, bet likę nuorodos JavaScript'e.

// Pavyzdys, kai nutekėjimas įvyksta dėl pamiršto laikmačio
const leakyObject = {
  data: 'kai kurie duomenys'
};

setInterval(() => {
  console.log(leakyObject.data); // leakyObject negali būti surinktas šiukšlių rinkėjo
}, 1000);

• Didelės duomenų struktūros:
  • Kurti ir saugoti pernelyg didelius masyvus ar objektus, kai galima naudoti iteratorių ar srautą.
• Kaupių netinkamas naudojimas:
  • Kaupyklos, kurios auga be išmetimo strategijos (LRU, LFU ir kt.).
• Trečiųjų šalių bibliotekų nutekėjimai:
  • Patikrinti bibliotekų dokumentaciją ar šaltinio kodą dėl galimų problemų.

Pataisymai:

1. Įvykių ir laikmačių atšaukimas: Užtikrinti, kad visi įvykių tvarkyklės būtų atjungtos ir laikmačiai išvalyti, kai komponentas ar objektas yra sunaikinamas.

// Teisingas laikmačio išvalymas
const leakyObject = {
  data: 'kai kurie duomenys'
};
let timerId;

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

function stopTimer() {
  clearInterval(timerId); // Laikmačio išvalymas
}

2. Nuorodų nulininimas: Aiškiai nulinkite nuorodas į didelius ar nenaudojamus objektus, kad šiukšlių rinkėjas galėtų juos surinkti.
3. Naudoti WeakMap ir WeakSet: Laikyti nuorodas į objektus, kurie gali būti pašalinti šiukšlių rinkėjo, kai nėra kitų stiprių nuorodų.
4. Duomenų struktūrų optimizavimas: Naudoti efektyvesnes duomenų struktūras ar metodus (pvz., vėlyvą įkėlimą).
5. Kaupių dydžio apribojimas: Taikyti išmetimo strategijas.
6. Bibliotekų atnaujinimas ar keitimas: Jei problema yra trečiosios šalies bibliotekoje, atnaujinkite ją arba raskite alternatyvą.

Po pataisymo vėl naudokite kūrėjo įrankius, kad patvirtintumėte, jog nutekėjimo nėra.