Comment réparerais-tu une fuite de mémoire dans ton code?

Identifieriez-vous la source de fuite en utilisant les outils de développement du navigateur (Timeline / Performance, Memory) ?

Causes courantes de fuites de mémoire :

• Références pendantes aux objets :
  • Timers oubliés (setInterval, setTimeout) faisant référence à des objets.
  • Gestionnaires d'événements confus non détachés (removeEventListener).
  • Fermetures maintenant des variables externes plus longtemps que nécessaire.
  • Éléments DOM supprimés du document mais avec des références en JavaScript.

// Exemple de fuite à cause d'un timer oublié
const leakyObject = {
  data: 'some data'
};

setInterval(() => {
  console.log(leakyObject.data); // leakyObject ne peut pas être collecté par le ramasse-miettes
}, 1000);

• Structures de données volumineuses :
  • Création et stockage de tableaux ou objets excessivement grands quand on peut utiliser des itérateurs ou du streaming.
• Mauvaise utilisation des caches :
  • Caches qui croissent indéfiniment sans stratégie d'expulsion (LRU, LFU, etc.).
• Fuites provenant de bibliothèques tierces :
  • Vérifier la documentation ou le code source des bibliothèques pour détecter d'éventuels problèmes.

Correction :

1. Annuler les événements et timers : S'assurer que tous les gestionnaires d'événements sont détachés et que les timers sont nettoyés lors de la destruction du composant ou de l'objet.

// Nettoyage correct du timer
const leakyObject = {
  data: 'some data'
};
let timerId;

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

function stopTimer() {
  clearInterval(timerId); // Nettoyer le timer
}

2. Nullifier les références : Nullifier explicitement les références à de grands objets ou objets inutilisés pour permettre leur collecte.
3. Utiliser WeakMap et WeakSet : Pour stocker des références à des objets qui peuvent être supprimés par le ramasse-miettes quand ils n'ont pas d'autres références fortes.
4. Optimiser les structures de données : Utiliser des structures ou approches plus efficaces (par exemple, chargement paresseux).
5. Limiter la taille des caches : Implémenter des stratégies d'expulsion pour le cache.
6. Mettre à jour ou remplacer les bibliothèques : Si le problème vient d'une bibliothèque tierce, la mettre à jour ou chercher une alternative.

Après correction, réutiliser les outils de développement pour confirmer l'absence de fuite.