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

Causes des fuites de mémoire JavaScript : 1. Mauvaise utilisation des variables globales ; 2. Mauvaise utilisation des fermetures ; 3. Les retards ou les minuteries ne sont pas effacés ; 4. Les références d'éléments DOM qui ne sont pas nettoyées (lorsque le dom est effacé ou supprimé, événements non effacés).

L'environnement d'exploitation de ce tutoriel : système Windows 7, JavaScript version 1.8.5, ordinateur Dell G3.

Une fuite de mémoire signifie qu'une partie de la mémoire allouée ne peut pas être utilisée ou recyclée jusqu'à la fin du processus du navigateur. Cela signifie qu'en raison d'une négligence ou d'une erreur, le programme ne parvient pas à libérer la mémoire qui n'est plus utilisée. Les fuites de mémoire ne font pas référence à la disparition physique de la mémoire, mais plutôt au fait qu'après que l'application ait alloué un certain segment de mémoire, en raison d'erreurs de conception, elle perd le contrôle du segment de mémoire avant de libérer le segment de mémoire, ainsi provoquant un gaspillage de mémoire. Voici quelques causes courantes de fuites de mémoire.

1. Variables globales

JavaScript peut gérer des variables non déclarées : une référence à une variable non déclarée crée une nouvelle variable dans l'objet global. Dans le contexte d'un navigateur, l'objet global est window.

function foo(){
  name = '前端曰'；
}
// 其实是把name变量挂载在window对象上
function foo(){
  window.name = '前端曰'；
}

// 又或者
function foo(){
  this.name = '前端曰'；
}
foo() // 其实这里的this就是指向的window对象

De cette façon, une variable globale inattendue est créée involontairement. Pour éviter que cette erreur ne se produise, ajoutez « use strict ; » au début de votre fichier Javascript. Cela active un mode d'analyse JavaScript plus strict qui empêche les globaux inattendus. Ou faites attention à la définition des variables vous-même !

2. Fermeture

Closure : les fonctions anonymes peuvent accéder aux variables dans la portée parent.

var names = (function(){  
    var name = 'js-say';
    return function(){
        console.log(name);
    }
})()

La fermeture entraînera la séparation du cycle de vie de la référence d'objet du contexte de la fonction actuelle. Si la fermeture est mal utilisée, elle peut conduire à une référence circulaire (référence circulaire), similaire à un blocage, qui peut. seulement être évité et ne peut pas être résolu une fois qu'il s'est produit, même s'il y a des déchets, le recyclage provoquera toujours des fuites de mémoire.

3. Le retardateur/minuterie oublié

Dans nos besoins quotidiens, nous essayons souvent setInterval/setTimeout, mais nous oublions généralement de le nettoyer après utilisation.

var someResource = getData(); 
setInterval(function() { 
    var node = document.getElementById('Node'); 
    if(node) { 
        // 处理 node 和 someResource 
        node.innerHTML = JSON.stringify(someResource)); 
    } 
}, 1000);

Ceci dans setInterval/setTimeout pointe vers l'objet window, donc les variables définies en interne sont également montées globalement ; la variable someResource est référencée dans le if, et si setInterval/setTimeout n'est pas effacé, someResource ne sera pas libérée de la même manière ; en fait, il en va de même pour setTimeout. Nous devons donc nous rappeler de clearInterval/clearTimeout une fois terminé.

4. Références d'éléments DOM qui ne sont pas nettoyées (Lorsque le dom est effacé ou supprimé, l'événement n'est pas effacé)

var elements = {
    button: document.getElementById('button'),
    image: document.getElementById('image'),
    text: document.getElementById('text')
};
function doStuff() {
    image.src = 'http://some.url/image';
    button.click();
    console.log(text.innerHTML);
}
function removeButton() {
    document.body.removeChild(document.getElementById('button'));
    // 此时，仍旧存在一个全局的 #button 的引用
    // elements 字典。button 元素仍旧在内存中，不能被 GC 回收。
}

[Apprentissage recommandé : Tutoriel avancé javascript]

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!