Quelles sont les causes courantes des fuites de mémoire dans les applications JavaScript?

Les fuites de mémoire communes dans les applications JavaScript incluent: 1. Référence de l'écouteur d'événements incorrect. Si l'élément DOM est supprimé mais que l'événement n'est pas dérivé, l'objet peut ne pas être recyclé. Il est recommandé d'effacer l'auditeur lorsque le composant est désinstallé; 2. Il est recommandé d'appeler ClearInterval ou ClearTimeout lors de la destruction du composant; 3. Si le cache n'est pas nettoyé, la croissance illimitée du cache occupera beaucoup de mémoire. Il est recommandé d'utiliser lame faible ou de mettre en œuvre le mécanisme d'élimination du LRU; 4. Les références causées par des fermetures peuvent être conservées et les fonctions internes peuvent retenir involontairement des variables externes. Il est recommandé de le régler sur NULL dans le temps ou d'éviter de grandes références d'objets. La combinaison de bonnes habitudes de codage et des outils d'analyse de la mémoire peut effectivement prévenir ces problèmes.

Les causes de fuite de mémoire courantes dans les applications JavaScript ne sont en fait pas des problèmes particulièrement compliqués la plupart du temps, mais certains détails qui sont facilement ignorés pendant le processus de développement. Si vous constatez que l'application est devenue de plus en plus coincée après avoir fonctionné pendant une longue période, ou si la page occupe la mémoire pour augmenter, il est probable qu'il y ait une fuite de mémoire.

Jetons un coup d'œil à quelques-unes des raisons les plus courantes et comment les éviter.

1. Référence de l'auditeur d'événements inapproprié

C'est l'une des fuites de mémoire les plus courantes. Lorsque nous lions les événements aux éléments DOM, si la fonction de rappel fait référence à une variable ou un objet externe, et que ces éléments sont supprimés et que l'événement n'est pas dénigène manuellement, il peut entraîner la collecte de déchets de ces objets.

Par exemple:

 const Button = document.getElementById («MyButton»);
Button.AddeventListener ('click', () => {
    // La fonction ici peut se référer à certaines variables externes});

Si ce bouton est ensuite supprimé du DOM mais que removeEventListener n'est pas appelé, il restera toujours en mémoire.

suggestion:

• N'oubliez pas d'effacer l'écouteur d'événements pertinent lors de la désinstallation des composants ou de l'élimination des éléments.
• Lorsque vous utilisez des cadres modernes tels que React, veillez à nettoyer les effets secondaires, tels que la suppression des auditeurs dans la fonction renvoyée par useEffect .

2. Miniteurs oubliés et tâches asynchrones

setInterval ou setTimeout est une autre "Pit" courante. Si vous définissez une minuterie et que sa fonction de rappel fait référence à certains objets ou composants, même si le composant a été détruit, ces rappels peuvent continuer à exécuter et à maintenir des références à ces objets.

Par exemple:

 fonction startPolling () {
    const data = fetchData ();
    setInterval (() => {
        console.log (données); // Les données ne seront jamais publiées}, 5000);
}

Si le composant ne nettoie pas la minuterie après la désinstallation, il continuera à s'exécuter tout en conservant des références aux data .

suggestion:

• Utilisez clearInterval() ou clearTimeout() pour nettoyer la minuterie lorsque le composant est désinstallé ou n'est plus nécessaire.
• Pour les opérations asynchrones fréquemment déclenchées (telles que le sondage), vous pouvez envisager d'utiliser la méthode de la boucle async / attendre et se terminer lors de la sortie de la boucle.

3. Le cache n'est pas nettoyé

Parfois, nous utilisons le cache pour améliorer les performances, telles que la sauvegarde et la réutilisation de certains résultats de calcul. Mais si le cache ne limite pas la taille ou ne efface pas les anciennes données, cela peut également faire croître la mémoire.

Par exemple:

 const cache = {};
fonction getExpensivedata (key) {
    if (! cache [key]) {
        cache [key] = calculaData (key);
    }
    return cache [key];
}

À mesure que les clés deviennent de plus en plus, cache deviendront plus grandes et finiront par occuper beaucoup de mémoire.

suggestion:

• Utilisez des structures de référence faibles, telles que WeakMap ou WeakSet , pour libérer automatiquement les valeurs de clés lorsqu'ils sont des objets.
• Mettez en œuvre des mécanismes d'élimination du cache, tels que la mise en cache LRU.
• Vérifiez régulièrement si la politique de cache est raisonnable et s'il existe une résidence de données inutile à long terme.

4. Références causées par les fermetures

Les fermetures sont des caractéristiques puissantes de JavaScript, mais elles peuvent également conduire à des fuites de mémoire si elles sont utilisées accidentellement. Par exemple, une fonction interne fait référence à une variable dans la portée externe, et cette fonction est conservée pendant longtemps (comme un rappel, un traitement d'événements, etc.), ce qui empêchera la variable externe d'être recyclée.

Exemple:

 Fonction SetUp () {
    const LargeData = nouveau tableau (10000) .fill («fuite»);
    return function () {
        Console.log ('Hello');
        // LargeData est réservé par la fermeture};
}

Bien que la fonction retournée largeData pas directement, elle sera toujours conservée car elle se trouve dans la même chaîne de portée.

suggestion:

• Pour clarifier quelles variables sont nécessaires, définissez-les sur null ou les réaffectez dans le temps.
• Évitez de conserver involontairement de grands objets dans les fermetures.
• Analysez la logique du code pour voir s'il existe des références de variables inutiles.

Fondamentalement, c'est tout. Les problèmes de fuite de mémoire ne sont souvent pas découverts immédiatement, en particulier dans les grands projets. La clé est de développer de bonnes habitudes de codage et d'effectuer régulièrement une analyse de mémoire avec des outils (tels que le panneau de mémoire de Chrome Devtools), de sorte que de nombreux problèmes peuvent être exposés à l'avance.

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!