Hoe zou je een geheugenlek in je code oplossen?

Zou je de bron van het geheugenlek kunnen identificeren met behulp van de ontwikkelaarstools van de browser (Timeline / Performance, Memory)?

Veelvoorkomende oorzaken van geheugenlekken:

• Hangende referenties naar objecten:
  • Vergeten timers (setInterval, setTimeout) die naar objecten verwijzen.
  • Onduidelijke event handlers die niet zijn losgekoppeld (removeEventListener).
  • Sluitingen die externe variabelen langer vasthouden dan nodig.
  • DOM-elementen die uit het document zijn verwijderd maar nog wel referenties in JavaScript hebben.

// Voorbeeld van een lek door vergeten timer
const leakyObject = {
  data: 'some data'
};

setInterval(() => {
  console.log(leakyObject.data); // leakyObject kan niet worden verzameld door de garbage collector
}, 1000);

• Grote datastructuren:
  • Het maken en opslaan van overmatig grote arrays of objecten wanneer iterators of streaming volstaan.
• Onjuist gebruik van caches:
  • Caches die oneindig groeien zonder evacuatiestrategie (LRU, LFU, etc.).
• Lekken uit externe bibliotheken:
  • Controleer de documentatie of broncode van bibliotheken op potentiële problemen.

Oplossing:

1. Annuleer gebeurtenissen en timers: Zorg dat alle event handlers worden losgekoppeld en timers worden opgeruimd bij het vernietigen van het component of object.

// Correcte opruiming van timer
const leakyObject = {
  data: 'some data'
};
let timerId;

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

function stopTimer() {
  clearInterval(timerId); // Timer opruimen
}

2. Nullify referenties: Nullify expliciet referenties naar grote of niet-gebruikte objecten zodat de garbage collector ze kan verzamelen.
3. Gebruik WeakMap en WeakSet: Om referenties naar objecten op te slaan die door de garbage collector kunnen worden verwijderd wanneer er geen andere sterke referenties zijn.
4. Optimaliseer datastructuren: Gebruik efficiëntere structuren of benaderingen (bijvoorbeeld lazy loading).
5. Beperk de grootte van caches: Implementeer evacuatiestrategieën.
6. Werk bibliotheken bij of vervang ze: Als het probleem in een externe bibliotheek ligt, werk deze bij of zoek een alternatief.

Na het oplossen, gebruik opnieuw de ontwikkelaarstools om de afwezigheid van lekken te bevestigen.