Heim > Web-Frontend > js-Tutorial > Hauptteil

So vermeiden Sie JavaScript-Speicherlecks und Speicherverwaltungstechniken

伊谢尔伦
Freigeben: 2016-11-23 10:24:15
Original
977 Leute haben es durchsucht

Effiziente JavaScript-Webanwendungen müssen reibungslos und schnell sein. Jede Anwendung, die mit Benutzern interagiert, muss darüber nachdenken, wie sie sicherstellen kann, dass der Speicher effizient genutzt wird, denn wenn zu viel verbraucht wird, stürzt die Seite ab und der Benutzer muss neu laden. Und du kannst dich nur in der Ecke verstecken und weinen.

Die automatische Speicherbereinigung ist kein Ersatz für eine effektive Speicherverwaltung, insbesondere bei großen, lang laufenden Webanwendungen. In dieser Vorlesung zeigen wir, wie man den Speicher mit den DevTools von Chrome effektiv verwaltet.

Und erfahren Sie, wie Sie Leistungsprobleme wie Speicherverluste, häufige Pausen bei der Speicherbereinigung und allgemeines Aufblähen des Speichers beheben können, die Dinge, die Sie wirklich umbringen.

Addy Osmani hat in seiner PPT viele Beispiele für Speicherlecks in Chrome V8 gezeigt:

1) Durch das Löschen der Eigenschaften eines Objekts wird das Objekt langsamer (kostet 15 Mal mehr Speicher)

var o = { x: 'y' };
delete o.x; //此时o会成一个慢对象
o.x; //
 
var o = { x: 'y' };
o = null;  //应该这样
Nach dem Login kopieren

2) Abschluss

Wenn eine Variable außerhalb des Abschlusses in den Abschluss eingeführt wird, kann das Objekt am Ende des Abschlusses nicht durch Garbage Collection (GC) gesammelt werden.

var a = function() {
  var largeStr = new Array(1000000).join('x');
  return function() {
    return largeStr;
  }
}();
Nach dem Login kopieren

3) DOM-Leck

Wenn die ursprüngliche COM entfernt wird, kann die Referenz auf den untergeordneten Knoten nicht wiederverwendet werden, es sei denn, sie wird entfernt.

var select = document.querySelector;
var treeRef = select('#tree');
 
//在COM树中leafRef是treeFre的一个子结点
var leafRef = select('#leaf'); 
var body = select('body');
 
body.removeChild(treeRef);
 
//#tree不能被回收入,因为treeRef还在
//解决方法:
treeRef = null;
 
//tree还不能被回收,因为叶子结果leafRef还在
leafRef = null;
 
//现在#tree可以被释放了。
Nach dem Login kopieren

4) Timer-Leckage

Timer sind auch ein häufiger Ort, an dem Speicherlecks auftreten:

for (var i = 0; i < 90000; i++) {
  var buggyObject = {
    callAgain: function() {
      var ref = this;
      var val = setTimeout(function() {
        ref.callAgain();
      }, 90000);
    }
  }
 
  buggyObject.callAgain();
  //虽然你想回收但是timer还在
  buggyObject = null;
}
Nach dem Login kopieren

5) Debug-Speicher

Chrome Das integrierte Speicher-Debugging-Tool kann die Speichernutzung und Speicherlecks einfach überprüfen:

Klicken Sie in der Zeitleiste -> Speicher auf „Aufzeichnen“:

So vermeiden Sie JavaScript-Speicherlecks und Speicherverwaltungstechniken

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