Comment les identifier et les corriger / Blogs / Perficient

Introduction

Avez-vous déjà remarqué qu’une application Web devenait plus lente et moins réactive à mesure que vous l’utilisez longtemps ? C’est souvent le signe d’une fuite de mémoire. La gestion de la mémoire est un aspect essentiel du développement logiciel, en particulier en JavaScript, où les développeurs s’appuient sur le garbage collection automatique. Cependant, une mauvaise gestion de la mémoire peut entraîner des fuites de mémoire, obligeant votre application à consommer plus de mémoire que nécessaire et éventuellement à dégrader ses performances. Ce blog vous guidera dans la compréhension des fuites de mémoire, leur identification et la mise en œuvre de correctifs.

Que sont les fuites de mémoire ?

UN fuite de mémoire se produit lorsqu’un programme alloue de la mémoire mais ne parvient pas à la libérer une fois que la mémoire n’est plus nécessaire. En JavaScript, cela se produit généralement lorsque des objets qui ne sont plus nécessaires restent référencés, empêchant le garbage collector de récupérer la mémoire.

Quelles sont les causes des fuites de mémoire ?

1. • Variables globales accidentelles Déclarer des variables sans let, const ou var crée des variables globales involontaires :

// A function that creates a global variable accidentally

function createLeak() {
    leakyVariable = "I am global!"; // No 'let', 'const', or 'var' keyword makes this global
}
createLeak();

Réparer: Utilisez toujours let, const ou var.

1. • Minuteries et écouteurs d’événements non effacés Les écouteurs et les minuteurs conservent la mémoire s’ils ne sont pas correctement nettoyés :

// Adding an event listener to a button

let element = document.getElementById("button");
element.addEventListener("click", () => console.log("Clicked!"));

Réparer: Supprimez les auditeurs et effacez les minuteries :

element.removeEventListener("click", handler);
clearTimeout(timer);

1. • Éléments DOM détachés Conserver les références aux éléments DOM supprimés empêche le garbage collection :

// A reference to a DOM element that is removed

let detached = document.getElementById("div");
document.body.removeChild(detached); // Removing the element from the DOM

Réparer: Effacer la référence pour autoriser le garbage collection

detached = null; // Now eligible for garbage collection

Identifier les fuites de mémoire

1. Ouvrir Outils de développement et allez au Mémoire languette.
2. Prenez des instantanés avant et après les interactions pour voir la mémoire conservée.
3. Recherchez une mémoire qui ne diminue pas avec le temps.

Enregistrez l’utilisation de la mémoire à l’aide du Performance pour détecter les tendances croissantes.

1. Ouvrir Outils de développement
2. Charger le site Web
3. Vérifiez le Mémoire case à cocher dans l’onglet performances, puis Recharger en cliquant sur l’icône de rechargement.
4. Profil de charge et graphiques de mémoire

Lighthouse est un outil intégré à Chrome DevTools qui fournit des audits de performances automatisés, y compris l’utilisation de la mémoire. Il génère un rapport contenant des informations exploitables pour vous aider à optimiser les performances de votre application Web et à prévenir les problèmes liés à la mémoire.

Réparer les fuites de mémoire

• Nettoyer les auditeurs et les minuteries

element.removeEventListener("event", handler);
clearInterval(intervalId);

• Évitez les variables globales en mode strict :

« utiliser strict » ;

• Détacher les références DOM après retrait :

nœud = nul ;

Conclusion

Les fuites de mémoire dans JavaScript proviennent souvent de minuteries, d’écouteurs d’événements ou de références DOM en suspens. Utilisez DevTools pour identifier les fuites et nettoyer votre code en suivant les meilleures pratiques. En contrôlant l’utilisation de la mémoire, vous garantirez une expérience utilisateur plus fluide et plus rapide.

Bon codage !