Fuites de mémoire courantes en JavaScript

Le didacticiel de la colonne

javascript présente les fuites de mémoire courantes.

• Avant-propos
• 1 Introduction
• 2 Les principales causes des fuites de mémoire
• 3 Fuites de mémoire courantes
  • 3.1 Variables globales
  • 3.2 Minuterie
  • 3.3 Références multiples
  • 3.4 Fermeture
• 4 Analyse de la mémoire Chrome Outil
• Informations

Avant-propos

Lire ce blog Avant, vous aurez peut-être besoin avoir quelques connaissances en gestion de la mémoire JavaScript :

• Gestion de la mémoire JavaScript et garbage collection en V8

1 Introduction

Fuites de mémoire : fait référence à la mémoire qui n'est plus nécessaire à l'application et qui n'est pas restituée au système d'exploitation pour une raison quelconque ou au pool de mémoire libre.

Problèmes possibles causés par des fuites de mémoire : ralentissement, décalage et latence élevée.

2 La principale cause des fuites de mémoire

La principale cause des fuites de mémoire JavaScript réside dans certaines références qui ne sont pas plus nécessaire ( Références indésirables).

Les références dites indésirables font référence à : certaines mémoires ne sont plus nécessaires aux développeurs, mais pour une raison quelconque, ces mémoires sont toujours marquées et restent dans l'arborescence racine active. Les références indésirables font référence aux références à ces souvenirs. Dans le contexte de JavaScript, les références indésirables sont des variables qui ne sont plus utilisées et pointent vers de la mémoire qui aurait pu être libérée.

3 Fuites de mémoire courantes

3.1 Variables globales

Tout d'abord, nous devons savoir que les variables globales en JavaScript sont référencées par le nœud racine, elles ne seront donc pas récupérées tout au long du cycle de vie de l'application.

Scénario 1 : En JavaScript, si vous référencez une variable non déclarée, cela entraînera la création d'une nouvelle variable dans l'environnement global.

function foo(arg) {    
bar = "this is a hidden global variable";
}

La chaîne de code ci-dessus est en fait la suivante :

function foo(arg) {   
window.bar = "this is an explicit global variable";
}

Supposons que nous voulions que la variable bar soit utilisée uniquement dans le cadre de la fonction foo, mais dans ce qui précède Dans ce cas, la création accidentelle d'une barre dans la portée globale entraînera une fuite de mémoire.

Scénario 2 :

function foo() {    
this.variable = "potential accidental global";
}foo();

De même, si nous voulons que la barre de variables soit utilisée uniquement dans le cadre de la fonction foo, mais si nous ne savons pas que cela est à l'intérieur de la fonction foo pointe vers l'objet global, nous provoquerons une fuite de mémoire.

Recommandation :

1. Évitez de créer accidentellement des variables globales. Par exemple, nous pouvons utiliser le mode strict, alors le premier morceau de code de cette section signalera une erreur et aucune variable globale ne sera créée.

2. Réduire la création de variables globales.

3. Si vous devez utiliser des variables globales pour stocker de grandes quantités de données, assurez-vous de les annuler ou de les réaffecter après le traitement des données.

3.2 Minuterie

Exemple de scène :

for (var i = 0; i < 100000; i++) 
{    
var buggyObject = {        
callAgain: function () {            
var ref = this;            
var val = setTimeout(function () 
{                
ref.callAgain();            
}, 10);        
}    
}    
buggyObject.callAgain();    
buggyObject = null;}

3.3 多处引用

多处引用（Multiple references）：当多个对象均引用同一对象时，但凡其中一个引用没有清除，都将导致被引用对象无法GC。

场景一：

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);    
// Much more logic}function removeButton() 
{    // The button is a direct child of body.    
document.body.removeChild(document.getElementById('button'));    
// At this point, we still have a reference to #button in the global    
// elements dictionary. In other words, the button element is still in    
// memory and cannot be collected by the GC.s}

在上面这种情况中，我们对#button的保持两个引用：一个在DOM树中，另一个在elements对象中。 如果将来决定回收#button，则需要使两个引用均不可访问。在上面的代码中，由于我们只清除了来自DOM树的引用，所以#button仍然存在内存中，而不会被GC。

场景二： 如果我们想要回收某个table，但我们保持着对这个table中某个单元格（cell）的引用，这个时候将导致整个table都保存在内存中，无法GC。

3.4 闭包

闭包(Closure)：闭包是一个函数，它可以访问那些定义在它的包围作用域（Enclosing Scope）里的变量，即使这个包围作用域已经结束。因此，闭包具有记忆周围环境（Context）的功能。

场景举例：

var newElem;function outer() 
{   
var someText = new Array(1000000);   
var elem = newElem;   
function inner() 
{       if (elem) return someText;  
 }   
 return function () {};
 }setInterval(function ()
  {   newElem = outer();}, 5);

在这个例子中，有两个闭包：一个是inner，另一个是匿名函数function () {}。其中，inner闭包引用了someText和elem，并且，inner永远也不会被调用。可是，我们需要注意：相同父作用域的闭包，他们能够共享context。 也就是说，在这个例子中，inner的someText和elem将和匿名函数function () {}共享。然而，这个匿名函数之后会被return返回，并且赋值给newElem。只要newElem还引用着这个匿名函数，那么，someText和elem就不会被GC。

同时，我们还要注意到，outer函数内部执行了var elem = newElem;，而这个newElem引用了上一次调用的outer返回的匿名函数。试想，第n次调用outer将保持着第n-1次调用的outer中的匿名函数，而这个匿名函数由保持着对elem的引用，进而保持着对n-2次的...因此，这将造成内存泄漏。

Solution : modifiez le code du paramètre 1 dans setInterval en newElem = outer()();

Pour une analyse détaillée de cette section, veuillez consulter Matériau 1 et Matériau 2.

4 Outil d'analyse de la mémoire Chrome

Outils de développement Chrome (dernière version 86) Deux outils d'analyse de la mémoire :

1. Performances

2. Mémoire

Recommandations d'apprentissage gratuites associées : javascript(vidéo)

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!