Was sind die Ursachen für Javascript-Speicherlecks?

青灯夜游
Freigeben: 2021-11-19 16:37:51
Original
4641 Leute haben es durchsucht

Ursachen für JavaScript-Speicherlecks: 1. Unsachgemäße Verwendung globaler Variablen; 3. Verzögerungen oder Timer werden nicht gelöscht; Ereignisse nicht gelöscht).

Was sind die Ursachen für Javascript-Speicherlecks?

Die Betriebsumgebung dieses Tutorials: Windows 7-System, JavaScript-Version 1.8.5, Dell G3-Computer.

Ein Speicherverlust bedeutet, dass ein Teil des zugewiesenen Speichers nicht verwendet oder recycelt werden kann, bis der Browserprozess beendet ist. Dies bedeutet, dass das Programm aufgrund von Nachlässigkeit oder Fehlern nicht mehr verwendeten Speicher nicht freigibt. Speicherlecks bedeuten nicht das physische Verschwinden von Speicher, sondern dass die Anwendung, nachdem sie aufgrund von Designfehlern ein bestimmtes Speichersegment zugewiesen hat, die Kontrolle über das Speichersegment verliert, bevor sie das Speichersegment freigibt, was zu einer Verschwendung von Speicher führt . Hier sind einige häufige Ursachen für Speicherverluste.

1. Globale Variablen

JavaScript kann nicht deklarierte Variablen verarbeiten: Ein Verweis auf eine nicht deklarierte Variable erstellt eine neue Variable im globalen Objekt. Im Kontext eines Browsers ist das globale Objekt das Fenster.

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

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

Auf diese Weise wird unbeabsichtigt eine unerwartete globale Variable erstellt. Um zu verhindern, dass dieser Fehler auftritt, fügen Sie am Anfang Ihrer Javascript-Datei „use strict;“ hinzu. Dies ermöglicht einen strengeren Modus zum Parsen von JavaScript, der unerwartete Globals verhindert. Oder achten Sie selbst auf die Definition von Variablen!

2. Abschluss

Abschluss: Anonyme Funktionen können auf Variablen im übergeordneten Bereich zugreifen.

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

Das Schließen führt dazu, dass der Lebenszyklus der Objektreferenz vom Kontext der aktuellen Funktion getrennt wird. Bei unsachgemäßer Verwendung des Abschlusses kann es zu einem Zirkelverweis (Zirkelverweis) kommen, ähnlich einem Deadlock Es kann nur vermieden werden und kann nach dem Auftreten nicht mehr gelöst werden, selbst wenn Müll vorhanden ist. Das Recycling führt immer noch zu Speicherverlusten.

3. Der vergessene Verzögerer/Timer

In unserem täglichen Bedarf versuchen wir oft setInterval/setTimeout, vergessen aber normalerweise, ihn nach der Verwendung aufzuräumen.

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

Dies in setInterval/setTimeout zeigt auf das Fensterobjekt, sodass die intern definierten Variablen auch global bereitgestellt werden. Wenn setInterval/setTimeout nicht gelöscht wird, wird someResource ebenfalls nicht freigegeben. Tatsächlich gilt das Gleiche auch für setTimeout. Wir müssen also daran denken, „clearInterval/clearTimeout“ zu löschen, wenn wir fertig sind.

4. DOM-Elementreferenzen, die nicht bereinigt werden (Wenn der Dom gelöscht oder gelöscht wird, wird das Ereignis nicht gelöscht)

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 回收。
}
Nach dem Login kopieren

[Empfohlenes Lernen: Javascript-Tutorial für Fortgeschrittene]

Das obige ist der detaillierte Inhalt vonWas sind die Ursachen für Javascript-Speicherlecks?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage