Mehrere Aspekte, die leicht zu JavaScript-Speicherlecks führen können_Javascript-Tipps

Veröffentlicht in Google WebPerf (London WebPerf Group), 26. August 2014.

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.

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 allgemeine Speicherüberlastung beheben können, die Sie wirklich umbringen.

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

1) Das Löschen der Eigenschaften eines Objekts verlangsamt das Objekt (verbraucht 15-mal mehr Speicher)

Code kopieren Der Code lautet wie folgt:

var o = { x: 'y' };
delete o.x; // Zu diesem Zeitpunkt wird o zu einem langsamen Objekt
o.x; //

var o = { x: 'y' };
o = null; //Es sollte so sein

2) Schließung

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.

Code kopieren Der Code lautet wie folgt:

var a = function() {
var largeStr = new Array(1000000).join('x');
return function() {
Rückgabe von largeStr;
}
}();

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.

Code kopieren Der Code lautet wie folgt:

var select = document.querySelector;
var treeRef = select('#tree');

//Im COM-Baum ist leafRef ein untergeordneter Knoten von treeFre
var leafRef = select('#leaf'); var body = select('body');

body.removeChild(treeRef);

//#tree kann nicht recycelt werden, da treeRef noch vorhanden ist

//Lösung:
treeRef = null;

//Der Baum kann noch nicht recycelt werden, da das Blattergebnis leafRef noch vorhanden ist

leafRef = null;

//Jetzt kann der #Baum freigegeben werden.

4) Timer-Leckage

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

Code kopieren Der Code lautet wie folgt:

für (var i = 0; i < 90000; i ) {
var buggyObject = {
​ callAgain: function() {
var ref = this;
var val = setTimeout(function() {
ref.callAgain();
}, 90000);
}
}

buggyObject.callAgain();

//Obwohl Sie recyceln möchten, ist der Timer immer noch da
buggyObject = null;
}

5) Debug-Speicher

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

Klicken Sie in der Timeline auf „Aufzeichnen“ –> Speicher:
Weitere Informationen finden Sie im

Original-PPT.