Gepostet auf Google Webperf (London WebPerf Group), 26. August 2014.
Effiziente JavaScript -Webanwendungen müssen reibungslos und schnell sein. Jede Anwendung, die mit Benutzern interagiert, muss überlegen, wie der Speicher effizient verwendet wird. Wenn die Seite zu viel verzehrt wird, stürzt ab und zwingt den Benutzer zum Nachladen. Und Sie können sich nur in der Ecke verstecken und weinen.
Die automatische Müllsammlung ist kein Ersatz für ein effektives Speichermanagement, insbesondere in großen, langjährigen Webanwendungen. In dieser Vorlesung werden wir demonstrieren, wie wir das Gedächtnis über Chromes Devtools effektiv verwalten können.
Und lernen Sie, wie Sie Leistungsprobleme wie Speicherlecks, häufige Müllsammlung und allgemeine Speicherblauen lösen, Dinge, die Sie wirklich die Energie kosteten.
Addy Osmani zeigt viele Beispiele in seinem PPT, die in Chrome V8 Speicherlecks verursachen:
1) Löschen Sie eine Objekteigenschaft, um dieses Objekt zu verlangsamen (15 -mal mehr Speicher zu verbrauchen).
Die Codekopie lautet wie folgt:
var o = {x: 'y'};
Ochsen löschen; // zu diesem Zeitpunkt wird o ein langsames Objekt
Ochse; //
var o = {x: 'y'};
o = null; // Es sollte so sein
2) Schließung
Bei der Einführung von Variablen außerhalb des Verschlusses in den Verschluss kann dieses Objekt beim Ende des Verschlusses nicht Müll gesammelt (GC) sein.
Die Codekopie lautet wie folgt:
var a = function () {
var frearstr = neuarray (1000000) .Join ('x');
return function () {
return larstr;
}
} ();
3) DOM -Leck
Wenn der ursprüngliche COM entfernt wird, kann die Sub-Node-Referenz nicht recycelt werden, wenn sie nicht entfernt wird.
Die Codekopie lautet wie folgt:
var select = document.querySelector;
var treeref = select ('#tree');
// Im Com -Baum ist Leafref ein Kinderknoten von Baumfre
var leafref = select ('#leaf');
var body = select ('body');
body.removechild (treeref);
//#Baum kann nicht zurückgezahlt werden, da Treeref noch da ist
//Lösung:
treeref = null;
// Baum kann noch nicht recycelt werden, da die Blätter resultieren
Leafref = null;
// jetzt #Tree kann veröffentlicht werden.
4) Timerzählungszählungs -Timer -Leck
Timer sind auch häufige Orte, an denen Speicherlecks auftreten:
Die Codekopie 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) Erinnerung debuggen
Das Debugging -Tool von Chromes eigenem Speicher kann die Speicherverwendung und Speicherlecks problemlos anzeigen:
Klicken Sie in Timeline -> Speicher: Speicher: Speicher:
Weitere Inhalte finden Sie in der ursprünglichen PPT.