Beheben von Arbeitsspeicherproblemen

Erfahren Sie, wie Sie Microsoft Edge und DevTools verwenden, um Speicherprobleme zu finden, die sich auf die Seitenleistung auswirken, einschließlich Speicherverlusten, Arbeitsspeicherüberauslastungen und häufigen Garbage Collections.

• Erfahren Sie, wie viel Arbeitsspeicher Ihre Seite derzeit mit dem Task-Manager des Microsoft Edge-Browsers verwendet.
• Visualisieren sie die Speicherauslastung im Zeitverlauf mit dem Speichertool .
• Identifizieren Sie getrennte DOM-Strukturen (eine häufige Ursache für Speicherverluste) mit Heap Momentaufnahme.
• Ermitteln Sie, wann neuer Arbeitsspeicher in Ihrem JavaScript-Heap (JS-Heap) mit Zuordnungsinstrumentation auf Zeitleiste zugewiesen wird.

Siehe auch Debuggen von DOM-Speicherverlusten mit dem Tool "Getrennte Elemente".

Übersicht

Im Sinne des RAIL-Leistungsmodells sollten ihre Benutzer im Mittelpunkt Ihrer Leistungsbemühungen stehen.

Speicherprobleme sind wichtig, da sie für Benutzer häufig spürbar sind. Benutzer können Speicherprobleme auf folgende Weise wahrnehmen:

• Die Leistung einer Seite verschlechtert sich im Laufe der Zeit zunehmend. Dies ist möglicherweise ein Symptom für einen Speicherverlust. Ein Speicherverlust tritt auf, wenn ein Fehler auf der Seite dazu führt, dass die Seite im Laufe der Zeit immer mehr Arbeitsspeicher belegt.

• Die Leistung einer Seite ist konsistent schlecht. Dies ist möglicherweise ein Symptom der Speicherüberlässigkeit. Arbeitsspeicherüberfrachtung tritt auf, wenn eine Seite mehr Arbeitsspeicher benötigt, als für eine optimale Seitengeschwindigkeit erforderlich ist.

• Die Leistung einer Seite wird verzögert oder scheint häufig anzuhalten. Dies ist möglicherweise ein Symptom für häufige Garbage Collections. Die Garbage Collection ist, wenn der Browser Arbeitsspeicher zurückerobert. Der Browser entscheidet, wann dies geschieht. Während der Auflistungen wird das gesamte ausgeführte Skript angehalten. Wenn der Browser also viel Garbage Collection verwendet, wird die Skriptlaufzeit viel angehalten.

Speicherüberlastung: Wie viel ist "zu viel"?

Ein Speicherverlust ist einfach zu definieren. Wenn eine Website nach und nach immer mehr Arbeitsspeicher verwendet, kommt es zu einem Verlust. Aber Speicherüberblässigkeit ist etwas schwieriger anheften. Was gilt als "zu viel Arbeitsspeicher verwenden"?

Hier gibt es keine harten Zahlen, da verschiedene Geräte und Browser unterschiedliche Funktionen haben. Die gleiche Seite, die auf einem High-End-Smartphone reibungslos läuft, kann auf einem Low-End-Smartphone abstürzen.

Der Schlüssel besteht hier darin, das RAIL-Modell zu verwenden und sich auf Ihre Benutzer zu konzentrieren. Finden Sie heraus, welche Geräte bei Ihren Benutzern beliebt sind, und testen Sie dann Ihre Seite auf diesen Geräten. Wenn die Erfahrung konsistent schlecht ist, überschreitet die Seite möglicherweise die Speicherfunktionen dieser Geräte.

Überwachen der Speichernutzung in Echtzeit mit dem Task-Manager des Microsoft Edge-Browsers

Verwenden Sie den Task-Manager des Microsoft Edge-Browsers als Ausgangspunkt für ihre Untersuchung von Speicherproblemen. Der Task-Manager des Microsoft Edge-Browsers ist ein Echtzeitmonitor, der Ihnen mitteilt, wie viel Arbeitsspeicher eine Seite derzeit verwendet.

1. Drücken Sie UMSCHALT+ESC, oder wechseln Sie zum Menü Microsoft Edge Standard, und wählen Sie Weitere Tools>Browsertask-Manager aus, um den Task-Manager des Microsoft Edge-Browsers zu öffnen.

   

2. Klicken Sie mit der rechten Maustaste auf die Tabellenüberschrift des Task-Managers des Microsoft Edge-Browsers, und aktivieren Sie dann JavaScript-Arbeitsspeicher.

   

Diese beiden Spalten geben unterschiedliche Informationen darüber an, wie Ihre Seite Arbeitsspeicher verwendet:

• Die Spalte Arbeitsspeicher stellt den nativen Speicher dar. DOM-Knoten werden im nativen Speicher gespeichert. Wenn dieser Wert steigt, werden DOM-Knoten erstellt.

• Die Spalte JavaScript-Arbeitsspeicher stellt den JS-Heap dar. Diese Spalte enthält zwei Werte. Der Wert, den Sie interessieren, ist die Livenummer (die Zahl in Klammern). Die Livenummer gibt an, wie viel Arbeitsspeicher die erreichbaren Objekte auf Ihrer Seite verwenden. Wenn diese Anzahl zunimmt, werden entweder neue Objekte erstellt, oder die vorhandenen Objekte werden vergrößert.

Visualisieren von Speicherverlusten mit dem Leistungstool

Sie können auch das Leistungstool als weiteren Ausgangspunkt für Ihre Untersuchung verwenden. Mit dem Leistungstool können Sie die Speichernutzung einer Seite im Laufe der Zeit visualisieren.

1. Öffnen Sie in DevTools das Leistungstool .

2. Aktivieren Sie das Kontrollkästchen Arbeitsspeicher .

3. Erstellen Sie eine Aufzeichnung.

Es empfiehlt sich, ihre Aufzeichnung mit einer erzwungenen Garbage Collection zu starten und zu beenden. Um die Garbage Collection zu erzwingen, klicken Sie während der Aufzeichnung auf die Schaltfläche sammeln.

Beachten Sie den folgenden Code, um Speicheraufzeichnungen 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 auf die Schaltfläche, auf die im Code verwiesen wird, geklickt wird, werden 10.000 div Knoten an den Dokumenttext angefügt, und eine Zeichenfolge mit 1.000.000 x Zeichen wird auf das x Array übertragen. Das Ausführen des vorherigen Codebeispiels erzeugt eine Aufzeichnung im Leistungstool wie in der folgenden Abbildung:

Zunächst eine Erläuterung der Benutzeroberfläche. Das HEAP-Diagramm im Bereich Übersicht (unter NET) stellt den JS-Heap dar. Unterhalb des Bereichs Übersicht befindet sich der Bereich Counter . Die Speicherauslastung wird nach JS-Heap (wie heap im Bereich Übersicht ), Dokumenten, DOM-Knoten, Listenern und GPU-Arbeitsspeicher aufgeschlüsselt. Deaktivieren Sie ein Kontrollkästchen, um es im Diagramm auszublenden.

Nun eine Analyse des Codes im Vergleich zur vorherigen Abbildung. Wenn Sie den Knotenzähler (das grüne Diagramm) überprüfen, stimmt er ordnungsgemäß mit dem Code überein. Die Knotenanzahl erhöht sich in einzelnen Schritten. Sie können davon ausgehen, dass jede Erhöhung der Knotenanzahl ein Aufruf von grow()ist.

Das JS-Heapdiagramm (das blaue Diagramm) ist nicht so einfach. Gemäß bewährten Methoden ist der erste Schritt tatsächlich eine erzwungene Garbage Collection (klicken Sie auf die Schaltfläche Garbage sammeln).

Im Verlauf der Aufzeichnung werden die JS-Heapgrößenspitzen angezeigt. Dies ist natürlich und erwartet: Der JavaScript-Code erstellt die DOM-Knoten auf jeder Schaltfläche, auf die Sie klicken, und macht viel Arbeit, wenn die Zeichenfolge mit einer Million Zeichen erstellt wird.

Der Schlüssel ist hier die Tatsache, dass der JS-Heap höher endet als er begonnen hat (der "Anfang" hier ist der Punkt nach der erzwungenen Garbage Collection). Wenn Sie in der Praxis dieses Muster der Erhöhung der JS-Heap- oder Knotengröße sehen, deutet dies möglicherweise auf einen Speicherverlust hin.

Ermitteln getrennter Speicherverluste der DOM-Struktur mit Heapmomentaufnahmen

Ein DOM-Knoten wird nur dann garbage collection, wenn keine Verweise auf den Knoten aus der DOM-Struktur oder aus JavaScript-Code vorhanden sind, der auf der Seite ausgeführt wird. Ein Knoten wird als "getrennt" bezeichnet, wenn er aus der DOM-Struktur entfernt wird, aber einige JavaScript verweisen weiterhin darauf. Getrennte DOM-Knoten sind eine häufige Ursache für Speicherverluste.

In diesem Abschnitt erfahren Sie, wie Sie die Heapprofiler in DevTools verwenden, um getrennte Knoten zu identifizieren.

Hier sehen Sie 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 li untergeordneten Elementen erstellt. Auf die Knoten wird vom Code verwiesen, aber sie sind nicht in der DOM-Struktur vorhanden, sodass jeder Knoten getrennt wird.

Heapmomentaufnahmen sind eine Möglichkeit, getrennte Knoten zu identifizieren. Wie der Name schon sagt, zeigen Heapmomentaufnahmen, wie der Arbeitsspeicher zwischen den JS-Objekten und DOM-Knoten für Ihre Seite zum Zeitpunkt der Momentaufnahme verteilt wird.

So erstellen Sie eine Momentaufnahme

1. Öffnen Sie DevTools, und wechseln Sie zum Speichertool .

2. Klicken Sie auf das Optionsfeld Heap Momentaufnahme, und klicken Sie dann unten im Tool auf die Schaltfläche Momentaufnahme ausführen.

   

   Die Verarbeitung und das Laden des Momentaufnahme kann einige Zeit in Anspruch nehmen.

3. Nachdem die Momentaufnahme abgeschlossen ist, wählen Sie sie im linken Bereich aus (es heißt HEAP SNAPSHOTS).

4. Geben Sie im Textfeld Klassenfilter ein Detached, um nach getrennten DOM-Strukturen zu suchen:

   

5. Erweitern Sie die Karaten, um einen getrennten Baum zu untersuchen:

   

6. Klicken Sie auf einen Knoten, um ihn weiter zu untersuchen.

   Im Bereich Objekte finden Sie weitere Informationen zu dem Code, der auf den Knoten verweist. In der folgenden Abbildung verweist die detachedTree Variable beispielsweise auf den Knoten.

7. Um den bestimmten Speicherverlust zu beheben, untersuchen Sie den Code, der die detachedTree Variable verwendet, und stellen Sie sicher, dass der Verweis auf den Knoten entfernt wird, wenn er nicht mehr benötigt wird.

Identifizieren von JS-Heapspeicherverlusten mit der Zuordnungsinstrumentation auf Zeitleiste

Die Zuordnungsinstrumentierung auf Zeitleiste ist ein weiteres Tool, mit dem Sie Speicherverluste in Ihrem JS-Heap aufspüren können.

Veranschaulichen Sie die Zuordnungsinstrumentation für Zeitleiste mithilfe des folgenden Codes:

var x = [];
function grow() {
    x.push(new Array(1000000).join('x'));
}
document.getElementById('grow').addEventListener('click', grow);

Jedes Mal, wenn auf die Schaltfläche, auf die im Code verwiesen wird, geklickt wird, wird dem x Array eine Zeichenfolge von einer Million Zeichen hinzugefügt.

So zeichnen Sie eine Zuordnungsinstrumentation auf Zeitleiste auf:

1. Öffnen Sie DevTools, und wählen Sie das Speichertool aus.

2. Klicken Sie auf Zeitleiste Optionsfeld Zuordnungsinstrumentation, und klicken Sie dann auf die Schaltfläche Start.

3. Führen Sie die Aktion aus, von der Sie vermuten, dass sie den Speicherverlust verursacht.

4. Wenn Sie fertig sind, klicken Sie auf die Schaltfläche Aufzeichnung des Heapprofils .

5. Beachten Sie während der Aufzeichnung, ob blaue Balken in der Zuordnungsinstrumentierung auf dem Zeitleiste angezeigt werden, wie in der folgenden Abbildung dargestellt:

   

   Diese blauen Balken stellen neue Speicherbelegungen dar. Diese neuen Speicherbelegungen sind Ihre Kandidaten für Speicherverluste.

6. Zoomen Sie eine Leiste, um den Bereich Konstruktor so zu filtern, dass nur Objekte angezeigt werden, die während des angegebenen Zeitrahmens zugeordnet wurden.

   

7. Erweitern Sie das Objekt, und wählen Sie den Wert aus, um weitere Details im Bereich Objekt anzuzeigen.

   In der folgenden Abbildung geben die Details des neu zugeordneten Objekts beispielsweise an, dass es der x Variablen im Window Bereich zugeordnet wurde:

Untersuchen der Speicherbelegung nach Funktion

Verwenden Sie den Profilerstellungstyp "Allocation sampling ", um die Speicherbelegung nach JavaScript-Funktion anzuzeigen.

1. Klicken Sie auf das Optionsfeld Zuordnungssampling .

2. Wenn auf der Seite ein Worker vorhanden ist, können Sie diesen als Profilerstellungsziel auswählen, indem Sie das Dropdownmenü neben der Schaltfläche Start verwenden.

3. Klicken Sie auf die Schaltfläche Start .

4. Führen Sie auf der Webseite Aktionen aus, die Sie untersuchen möchten.

5. Klicken Sie auf die Schaltfläche Beenden , wenn Sie alle Aktionen abgeschlossen haben.

DevTools zeigt Eine Aufschlüsselung der Speicherbelegung nach Funktion. Die Standardansicht ist Heavy (Bottom Up) und zeigt die Funktionen an, die oben den meisten Arbeitsspeicher belegt haben.

Reduzieren von Garbage mit zusätzlichen Einstellungen für die Zuordnungsstichprobe

Standardmäßig meldet der Profilerstellungstyp Zuordnungsstichproben nur Zuordnungen, die am Ende der Aufzeichnungssitzung noch aktiv sind. Objekte, die erstellt, entfernt und dann garbage collected (GC'd) werden im Speichertool nicht angezeigt, wenn die Profilerstellung mithilfe der Zuordnungsstichprobe oder der Zuordnungsinstrumentation für Zeitleiste Typen erfolgt.

Sie können dem Browser vertrauen, um den Code zu sauber. Es ist jedoch wichtig zu berücksichtigen, dass GC selbst ein teurer Vorgang ist und mehrere GCs die Benutzerfreundlichkeit Ihrer Website oder App verlangsamen können. Wenn die Aufzeichnung im Leistungstool mit aktiviertem Kontrollkästchen Arbeitsspeicher aktiviert ist, können Sie sehen, dass der GC-Vorgang an den steilen Klippen (plötzliche Abnahmen) im Heapdiagramm erfolgt.

Indem Sie die Menge an Garbage, die Ihr Code erzeugt, reduzieren, können Sie die Kosten für jede einzelne GC und die Anzahl der GC-Vorgänge reduzieren. Um Objekte nachzuverfolgen, die von GC verworfen werden, konfigurieren Sie den Profilerstellungstyp Für die Zuordnungsstichprobe mit Einstellungen.

1. Klicken Sie auf die Optionsschaltfläche Zuordnungsstichproben .

2. Klicken Sie auf die Einstellungen Objekte einschließen, die von Haupt-GC verworfen wurden, und auf Objekte einschließen, die von Neben-GC verworfen wurden .

   

3. Klicken Sie auf die Schaltfläche Start .

4. Führen Sie auf der Webseite Aktionen aus, die Sie untersuchen möchten.

5. Klicken Sie auf die Schaltfläche Beenden , wenn Sie alle Aktionen abgeschlossen haben.

DevTools verfolgt jetzt alle Objekte nach, die während der Aufzeichnung GC'd wurden. Verwenden Sie diese Einstellungen, um zu verstehen, wie viel Müll Ihre Website oder App generiert. Die von der Zuordnungsstichprobe gemeldeten Daten helfen Ihnen dabei, die Funktionen zu identifizieren, die den größten Müll generieren.

Wenn Sie Objekte untersuchen, die nur während bestimmter haupt- oder kleinerer GC-Vorgänge als GC verwendet wurden, konfigurieren Sie die Einstellungen entsprechend, um den für Sie wichtigen Vorgang nachzuverfolgen. Weitere Informationen zu den Unterschieden zwischen Haupt- und Neben-GC finden Sie unter Trash talk: the Orinoco garbage collector | Entwicklerblog der JavaScript-Engine für V8.

Häufige Garbage Collections erkennen

Wenn Ihre Seite häufig angehalten wird, haben Sie möglicherweise Probleme mit der Garbage Collection.

Sie können entweder den Task-Manager des Microsoft Edge-Browsers oder Leistungsspeicheraufzeichnungen verwenden, um häufige Garbage Collection zu erkennen.

• Im Task-Manager des Microsoft Edge-Browsers stellen häufig steigende und fallende Arbeitsspeicher - oder JavaScript-Arbeitsspeicherwerte eine häufige Garbage Collection dar.

• In Leistungsaufzeichnungen deuten häufige Änderungen (steigend und fallend) an den JS-Heap- oder Knotenanzahldiagrammen auf eine häufige Garbage Collection hin.

Nachdem Sie das Problem identifiziert haben, können Sie eine Zuordnungsinstrumentation für Zeitleiste Aufzeichnung verwenden, um herauszufinden, wo Speicher belegt wird und welche Funktionen die Zuordnungen verursachen.

Hinweis

Teile dieser Seite sind Änderungen, die auf von Google erstellten und freigegebenen Werken basieren und gemäß den in der Creative Commons Attribution 4.0 International License beschriebenen Bestimmungen verwendet werden. Die originale Seite befindet sich hier und wurde von Kayce Basques (Technical Writer, Chrome DevTools & Lighthouse) verfasst.

Dieses Werk ist unter einer Creative Commons Attribution 4.0 International License lizenziert.