Häufige Speicherlecks in JavaScript

Das Tutorial in der Spalte „

Javascript“ stellt häufige Speicherlecks vor. Vorwort

4 Chrome-Speicher Analysetool

• Informationen
• Vorwort
  • Bevor Sie diesen Blog lesen, benötigen Sie möglicherweise einige Kenntnisse der JavaScript-Speicherverwaltung:
  • Speicherverwaltung und JavaScript in V8 Garbage Collection

1 Einführung

Speicherlecks: bezieht sich auf Speicher, der von der Anwendung nicht mehr benötigt wird und nicht an das Betriebssystem oder den freien Speicherpool (Pool of Free Memory) zurückgegeben wird. Probleme, die durch Speicherlecks verursacht werden können: Verlangsamung, Verzögerung und hohe Latenz.

• 2 Die Hauptursache für Speicherlecks

Die Hauptursache für JavaScript-Speicherlecks sind einige Referenzen, die nicht mehr benötigt werden (Unerwünschte Referenzen). Die sogenannten unerwünschten Referenzen beziehen sich auf: Es gibt einige Erinnerungen, die Entwickler nicht mehr benötigen, aber aus irgendeinem Grund sind diese Erinnerungen immer noch markiert und verbleiben im aktiven Stammbaum. Unerwünschte Verweise beziehen sich auf Verweise auf diese Erinnerungen. Im Kontext von JavaScript sind unerwünschte Referenzen Variablen, die nicht mehr verwendet werden und auf Speicher verweisen, der hätte freigegeben werden können. 3. Häufige Speicherlecks Die Anwendung wird während ihrer gesamten Lebensdauer nicht durch Müll gesammelt.

Szenario 1: Wenn Sie in JavaScript auf eine nicht deklarierte Variable verweisen, wird eine neue Variable in der globalen Umgebung erstellt.

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

Die obige Codezeichenfolge lautet tatsächlich wie folgt:

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

Angenommen, wir möchten, dass die bar-Variable nur im Rahmen der foo-Funktion verwendet wird, aber in der obigen Situation wird bar versehentlich im globalen Bereich erstellt. Dies führt zu einem Speicherverlust.

Szenario 2:

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

Ähnlich, wenn wir möchten, dass die Variable bar nur im Rahmen der foo-Funktion verwendet wird, wir aber nicht wissen, dass diese innerhalb der foo-Funktion auf das globale Objekt zeigt, führt dies zu einem Speicherleck. Empfehlung:

Vermeiden Sie versehentliches Erstellen globaler Variablen. Wir können beispielsweise den strikten Modus verwenden, dann meldet der erste Codeabschnitt in diesem Abschnitt einen Fehler und es werden keine globalen Variablen erstellt.

Reduzieren Sie die Erstellung globaler Variablen.

Wenn Sie globale Variablen zum Speichern großer Datenmengen verwenden müssen, stellen Sie sicher, dass Sie diese nach der Verarbeitung der Daten auf Null setzen oder neu zuweisen.

3.2 Timer

2. Szenenbeispiel:

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次的...因此，这将造成内存泄漏。

Lösung: Ändern Sie den Code von Parameter 1 in setInterval in newElem = outer()();

Eine detaillierte Analyse dieses Abschnitts finden Sie unter Material 1 und Material 2.

4 Chrome-Speicheranalysetools

Chrome (neueste Version 86) verfügt über zwei Speicheranalysetools in den Entwicklertools:

1. Performance

2. Memo ry

Verwandte kostenlose Lernempfehlungen: Javascript (Video)

Das obige ist der detaillierte Inhalt vonHäufige Speicherlecks in JavaScript. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!