Hier erfährst du, wie du mit Chrome und den Entwicklertools Speicherprobleme findest, die sich auf die Seitenleistung auswirken. Speicherlecks, überflüssigen Arbeitsspeicher und häufige automatische Speicherbereinigungen.
Zusammenfassung
- Finden Sie mit dem Task-Manager von Chrome heraus, wie viel Arbeitsspeicher Ihre Seite derzeit belegt.
- Die Arbeitsspeichernutzung im Zeitverlauf mit Zeitachsenaufzeichnungen visualisieren.
- Getrennte DOM-Bäume (eine häufige Ursache von Speicherlecks) mit Heap-Snapshots identifizieren.
- Mithilfe von Aufzeichnungen über die Zuordnungs-Zeitachse können Sie feststellen, wann in Ihrem JS-Heap neuer Arbeitsspeicher zugewiesen wird.
Übersicht
Entsprechend dem Leistungsmodell RAIL sollte der Schwerpunkt Ihrer Bemühungen zur Leistungssteigerung auf Ihre Nutzenden.
Probleme mit dem Gedächtnis sind wichtig, weil sie oft von den Nutzenden wahrgenommen werden. Nutzer können das Gedächtnis wahrnehmen folgenden Problemen angezeigt:
- Die Leistung einer Seite verschlechtert sich mit der Zeit immer weiter. Dies ist möglicherweise ein Symptom einer eines Speicherlecks. Ein Speicherleck liegt vor, wenn ein Fehler auf der Seite dazu führt, dass die Seite nach und nach immer mehr mit der Zeit größer werden.
- Die Leistung einer Seite ist durchweg schlecht. Das ist möglicherweise ein Symptom von aufgeblähtem Gedächtnis. Gemerkte Informationen Bloat liegt vor, wenn eine Seite mehr Arbeitsspeicher benötigt, als für eine optimale Seitengeschwindigkeit erforderlich ist.
- Die Leistung einer Seite verzögert sich oder scheint häufig zu pausieren. Dies ist möglicherweise ein Symptom von automatische Speicherbereinigungen. Bei der automatischen Speicherbereinigung gibt der Browser Arbeitsspeicher frei. Der Browser wann dies geschieht. Während der Erfassung wird die gesamte Skriptausführung angehalten. Wenn der Browser wird die Skriptausführung sehr häufig pausiert.
Erinnerung aufgebläht: Wie viel ist „zu viel“?
Ein Speicherleck ist einfach zu definieren. Verbraucht eine Website immer mehr Arbeitsspeicher, und ein Leck kam. Aber es ist etwas schwieriger, eine überflüssige Erinnerung festzuhalten. Was bedeutet „zu viel Arbeitsspeicher“?
Es gibt hier keine genauen Zahlen, da unterschiedliche Geräte und Browser unterschiedliche Funktionen haben. Dieselbe Seite, die auf einem High-End-Smartphone reibungslos läuft, kann auf einem Low-End-Smartphone abstürzen.
Entscheidend ist hier, das RAIL-Modell zu verwenden und sich auf Ihre Nutzenden zu konzentrieren. Herausfinden, welche Geräte beliebt sind mit Ihren Nutzern und testen Ihre Seite dann auf diesen Geräten. Wenn die User Experience konstant ist, könnte die Seite den Arbeitsspeicherkapazitäten dieser Geräte überschreiten.
Arbeitsspeichernutzung in Echtzeit mit dem Task-Manager von Chrome überwachen
Verwenden Sie den Task-Manager von Chrome als Ausgangspunkt für die Untersuchung von Speicherproblemen. Task-Manager ist ein Echtzeitmonitor, der angibt, wie viel Arbeitsspeicher eine Seite derzeit verwendet.
Drücken Sie Umschalttaste + Esc oder wählen Sie im Chrome-Hauptmenü Weitere Tools > Task-Manager für öffnen Sie den Task-Manager.
Klicken Sie mit der rechten Maustaste auf die Kopfzeile der Tabelle im Task-Manager und aktivieren Sie JavaScript-Arbeitsspeicher.
Diese beiden Spalten geben unterschiedliche Informationen zur Speichernutzung Ihrer Seite an:
- Die Spalte Arbeitsspeicher stellt den nativen Arbeitsspeicher dar. DOM-Knoten werden im nativen Arbeitsspeicher gespeichert. Wenn dieses steigt, werden DOM-Knoten erstellt.
- Die Spalte JavaScript Memory (JavaScript-Speicher) stellt den JS-Heap dar. Diese Spalte enthält zwei Werte. Die Wert, der Sie interessiert, ist die Live-Zahl (die Zahl in Klammern). Die Live-Nummer gibt an, wie viel Arbeitsspeicher die erreichbaren Objekte auf der Seite verbrauchen. Wenn diese Nummer gleich entweder neue Objekte erstellt oder die Anzahl der vorhandenen Objekte größer wird.
Speicherlecks mit Leistungsaufzeichnungen visualisieren
Sie können den Bereich „Leistung“ auch als weiteren Ausgangspunkt für Ihre Prüfung verwenden. Die Leistung können Sie die Speichernutzung einer Seite im Zeitverlauf visualisieren.
- Öffnen Sie in den Entwicklertools den Bereich Leistung.
- Klicken Sie das Kästchen Arbeitsspeicher an.
- Nehmen Sie eine Aufnahme vor.
Sehen Sie sich den folgenden Code an, um Performance-Memory-Aufzeichnungen zu veranschaulichen:
var x = [];
function grow() {
for (var i = 0; i < 10000; i++) {
document.body.appendChild(document.createElement('div'));
}
x.push(new Array(1000000).join('x'));
}
document.getElementById('grow').addEventListener('click', grow);
Jedes Mal, wenn die Schaltfläche, auf die im Code verwiesen wird, gedrückt wird, werden zehntausend div-Knoten angehängt
in den Dokumenttext ein und ein String mit einer Million x-Zeichen wird in das x-Array übertragen.
Wenn Sie diesen Code ausführen, wird eine Zeitachsenaufzeichnung wie im folgenden Screenshot erstellt:
Zuerst eine Erläuterung der Benutzeroberfläche. Das HEAP-Diagramm im Bereich Übersicht (unten) NET) steht für den JS-Heap. Unterhalb des Bereichs Übersicht befindet sich der Bereich Zähler. Hier können Sie die Arbeitsspeichernutzung aufgeschlüsselt nach JS-Heap anzeigen (wie beim HEAP-Diagramm im Bereich Übersicht), Dokumente, DOM-Knoten, Listener und GPU-Arbeitsspeicher. Wenn Sie ein Kästchen deaktivieren, wird es in der Grafik ausgeblendet.
Nun folgt eine Analyse des Codes im Vergleich zum Screenshot. Sehen Sie sich den Knotenzähler (der
grünes Diagramm), können Sie sehen, dass sie sauber mit dem Code übereinstimmt. Die Knotenanzahl erhöht sich
mit einzelnen Schritten. Jede Erhöhung der Knotenanzahl ist ein Aufruf von grow(). Das JavaScript
Heap-Diagramm (blaues Diagramm) ist nicht so einfach. Gemäß den Best Practices sollte der erste Rückgang
ist eigentlich eine erzwungene automatische Speicherbereinigung, die durch Klicken auf die Schaltfläche automatische Speicherbereinigung erreicht wird. Als
wenn die Aufzeichnung voranschreitet,
sehen Sie, dass die JS-Heap-Größe ansteigt. Das ist normal und zu erwarten:
Der JavaScript-Code erstellt die DOM-Knoten bei jedem Klick auf eine Schaltfläche und macht viel Arbeit, wenn es
einen String mit einer Million Zeichen. Das Entscheidende ist hier,
dass der JS-Heap endet,
höher als sie begonnen hat (der „Anfang“ hier ist der Punkt nach der erzwungenen automatischen Speicherbereinigung). In
Würden Sie in der Praxis dieses Muster der zunehmenden JS-Heap-Größe oder Knotengröße sehen,
auf ein Speicherleck hinweisen.
Getrennte DOM-Baum-Speicherlecks mit Heap-Snapshots erkennen
Ein DOM-Knoten kann nur dann automatisch bereinigt werden, wenn vom DOM-Baum oder JavaScript-Code Ein Knoten wird als „getrennt“ bezeichnet wenn es aus dem DOM-Baum entfernt wird, noch ein Teil des JavaScript-Codes verweist. Getrennte DOM-Knoten sind eine häufige Ursache von Speicherlecks. Dieses erfahren Sie, wie Sie die Entwicklertools Heap-Profiler nutzen, um getrennte Knoten zu identifizieren.
Hier ist ein einfaches Beispiel für getrennte DOM-Knoten.
var detachedTree;
function create() {
var ul = document.createElement('ul');
for (var i = 0; i < 10; i++) {
var li = document.createElement('li');
ul.appendChild(li);
}
detachedTree = ul;
}
document.getElementById('create').addEventListener('click', create);
Durch Klicken auf die Schaltfläche, auf die im Code verwiesen wird, wird ein ul-Knoten mit zehn untergeordneten li-Elementen erstellt. Diese Knoten
im Code referenziert werden, aber nicht im DOM-Baum vorhanden sind, daher werden sie getrennt.
Heap-Snapshots sind eine Möglichkeit, getrennte Knoten zu identifizieren. Wie der Name schon sagt, zeigen Heap-Snapshots wie der Arbeitsspeicher auf die JS-Objekte und DOM-Knoten Ihrer Seite zum Zeitpunkt der Snapshot.
Wenn du einen Snapshot erstellen möchtest, öffne die Entwicklertools, gehe zum Bereich Arbeitsspeicher und wähle den Heap aus. Schnappschuss und dann auf Schnappschuss aufnehmen.
Es kann einige Zeit dauern, bis der Snapshot verarbeitet und geladen ist. Wenn Sie fertig sind, wählen Sie sie links aus. (mit dem Namen HEAP SNAPSHOTS) verfügbar.
Geben Sie in das Textfeld Klassenfilter Detached ein, um nach losgelösten DOM-Bäumen zu suchen.
Maximieren Sie die Zeichen, um einen frei stehenden Baum zu untersuchen.
Gelb hervorgehobene Knoten haben direkte Verweise vom JavaScript-Code auf sie. Knoten hervorgehoben haben keine direkten Verweise. Sie leben nur, weil sie Teil des Gelben Knotens sind. Baum. Im Allgemeinen sollten Sie sich auf die gelben Knoten konzentrieren. Korrigieren Sie den Code so, dass der gelbe Knoten nicht länger am Leben, als es sein muss, und die roten Knoten, die Teil des Baum des gelben Knotens.
Klicken Sie auf einen gelben Knoten, um ihn weiter zu untersuchen. Im Bereich Objekte sehen Sie weitere
zu dem Code, der darauf verweist. Im Screenshot unten sehen Sie beispielsweise
dass die Variable detachedTree auf den Knoten verweist. Um dieses Speicherleck zu beheben,
würde den Code untersuchen, der detachedTree verwendet, und sicherstellen, dass er seinen Verweis auf den Knoten entfernt.
wenn sie nicht mehr benötigt werden.
JS-Heap-Speicherlecks mit Zuordnungszeiträumen identifizieren
Die Allocation Timeline ist ein weiteres Tool, mit dem Sie Speicherlecks in Ihrem JS-Heap aufspüren können.
Die Zuordnungszeitachse veranschaulicht den folgenden Code:
var x = [];
function grow() {
x.push(new Array(1000000).join('x'));
}
document.getElementById('grow').addEventListener('click', grow);
Jedes Mal, wenn die im Code referenzierte Schaltfläche gedrückt wird, wird ein String von einer Million Zeichen
dem Array x hinzugefügt.
Wenn Sie eine Zeitleiste für die Zuweisung aufzeichnen möchten, öffnen Sie die Entwicklertools, gehen Sie zum Bereich Profile und wählen Sie den Eintrag Record
Optionsfeld für Zuordnungszeitleiste – drücken Sie die Schaltfläche Start und führen Sie die verdächtige Aktion aus.
die zum Speicherleck führt, und drücken Sie dann die Schaltfläche Aufzeichnung beenden.
(
) wenn
sind Sie fertig.
Achten Sie bei der Aufnahme darauf, ob auf der Zeitleiste für die Zuordnung blaue Balken zu sehen sind, z. B. Screenshot unten.
Diese blauen Balken stellen neue Arbeitsspeicherzuweisungen dar. Diese neuen Arbeitsspeicherzuweisungen auf Speicherlecks. Sie können einen Balken heranzoomen, um den Bereich Konstruktor so zu filtern, dass nur Objekte angezeigt werden, im angegebenen Zeitraum zugewiesen wurden.
Maximieren Sie das Objekt und klicken Sie auf seinen Wert, um im Bereich Objekt weitere Details zum Objekt aufzurufen. Für
Beispiel im Screenshot unten in den Details des neu zugewiesenen Objekts.
sehen Sie, dass es der Variable x im Bereich Window zugeordnet wurde.
Arbeitsspeicherzuweisung nach Funktion prüfen
Verwenden Sie den Typ Stichprobenerhebung für die Zuordnung im Bereich Arbeitsspeicher, um die Arbeitsspeicherzuweisung nach JavaScript-Funktion anzusehen.
- Wählen Sie das Optionsfeld Allocation Sampling (Stichprobenerhebung für Zuordnung) aus. Befindet sich ein Worker auf der Seite, Sie können dies über das Drop-down-Menü neben der Schaltfläche Start als Profilerstellungsziel auswählen.
- Drücken Sie die Taste Start.
- Führen Sie die Aktionen auf der Seite aus, die Sie untersuchen möchten.
- Wenn Sie alle Aktionen beendet haben, drücken Sie die Taste Stopp.
Die Entwicklertools zeigen eine Aufschlüsselung der Arbeitsspeicherzuweisung nach Funktion. Die Standardansicht ist Schwer (Unten) Up), wodurch oben die Funktionen angezeigt werden, die den meisten Arbeitsspeicher zugewiesen haben.
Häufige automatische Speicherbereinigungen erkennen
Wenn Ihre Seite häufig pausiert wird, liegen möglicherweise Probleme mit der automatischen Speicherbereinigung vor.
Sie können entweder den Chrome Task-Manager oder die Speicheraufzeichnung in der Zeitachse verwenden, um häufigen Speicher zu finden. Sammlungen. Im Task-Manager werden häufig steigende und sinkende Arbeitsspeicher oder JavaScript-Arbeitsspeicher angezeigt. -Werte stehen für häufige automatische Speicherbereinigungen. In Zeitachsenaufzeichnungen: häufige Auf- und Absteigende JS-Heap- oder Knotenanzahl-Diagramme weisen auf häufige automatische Speicherbereinigungen hin.
Sobald Sie das Problem identifiziert haben, können Sie mithilfe einer Aufzeichnung der Zeitleiste ermitteln, wo Arbeitsspeicher zugeordnet wird und welche Funktionen die Zuweisungen verursachen.