Maison > interface Web > js tutoriel > Fuites de mémoire courantes en JavaScript

Fuites de mémoire courantes en JavaScript

Mary-Kate Olsen
Libérer: 2025-01-08 14:35:40
original
920 Les gens l'ont consulté

Common Memory Leaks in JavaScript

1. Variables globales

Les variables globales persistent tout au long de la durée de vie de l'application et sont rarement récupérées. Lorsque la portée des variables n'est pas appropriée, cela peut provoquer des fuites de mémoire accidentelles.

function myFunc() {
    globalVar = "I'm a memory leak!";
}
Copier après la connexion

2. Nœuds DOM détachés

Les nœuds DOM supprimés peuvent rester en mémoire s'ils sont référencés en JavaScript, même lorsqu'ils ne sont plus affichés.

let element = document.getElementById("myElement");
document.body.removeChild(element); // Node removed but still referenced
Copier après la connexion

3. Minuteries et rappels

setInterval et setTimeout conservent les références aux rappels et aux variables, ce qui peut provoquer des fuites de mémoire dans les applications de longue durée.

let intervalId = setInterval(() => {
    console.log("Running indefinitely...");
}, 1000);

// Clear when no longer needed
clearInterval(intervalId);
Copier après la connexion

4. Fermetures

Les fermetures peuvent involontairement conserver des références à des variables de leurs fonctions externes, entraînant des problèmes de mémoire.

function outer() {
    let bigData = new Array(100000).fill("data");
    return function inner() {
        console.log(bigData.length);
    };
}
Copier après la connexion

Ici, l'intérieur conserve le BigData même lorsqu'il n'est plus nécessaire.

Stratégies pour prévenir et réparer les fuites de mémoire ?

1. Minimiser les variables globales

Utilisez la portée locale (fonction ou bloc) pour les variables afin d'éviter une persistance inutile en mémoire.

2. Effacer les références aux nœuds DOM détachés

Assurez-vous que les variables faisant référence aux nœuds DOM supprimés sont définies sur null.

document.body.removeChild(element);
element = null; // Clear the reference
Copier après la connexion

3. Gérer les minuteries et les auditeurs d'événements

Effacez toujours les minuteries et supprimez les écouteurs d'événements lorsqu'ils ne sont plus nécessaires, en particulier dans les applications dynamiques d'une seule page.

let timer = setInterval(doSomething, 1000);
// Clear when no longer needed
clearInterval(timer);
Copier après la connexion

4. Évitez les grandes fermetures lorsque cela est possible

Réduisez la portée des fermetures ou restructurez le code pour éviter de conserver inutilement de grandes structures de données.


J'espère que cela vous a été utile. Merci d'avoir lu. ?
Restons connectés ! Vous pouvez me trouver sur :

  • Moyen : https://medium.com/@nhannguyendevjs/
  • Dév : https://dev.to/nhannguyendevjs/
  • Linkedin : https://www.linkedin.com/in/nhannguyendevjs/
  • X (anciennement Twitter) : https://twitter.com/nhannguyendevjs/
  • Achetez-moi un café : https://www.buymeacoffee.com/nhannguyendevjs

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

source:dev.to
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Derniers articles par auteur
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal