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, Speicheraufblähungen und häufigen Garbage Collections.

• Erfahren Sie, wie viel Arbeitsspeicher Ihre Seite derzeit mit dem Microsoft Edge Browser Task Manager verwendet.
• Visualisieren Sie die Speicherauslastung im Laufe der Zeit mithilfe des Bereichs "Arbeitsspeicher ".
• Identifizieren Sie getrennte DOM-Strukturen (eine häufige Ursache für Speicherverluste) mit Heap-Momentaufnahme.
• Erfahren Sie, wann neuer Speicher in Ihrem JavaScript-Heap (JS-Heap) mit Zuordnungsinstrumentation auf der Zeitachse zugewiesen wird.

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

Übersicht

Im Geiste der RAIL Leistungsmodell, der Fokus Ihrer Leistungsanstrengungen sollten Ihre Benutzer sein.

Speicherprobleme sind wichtig, da sie häufig von Benutzern wahrnehmbar sind. Benutzer können Speicherprobleme auf folgende Weise wahrnehmen:

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

• Die Leistung einer Seite ist durchweg schlecht. Dies ist möglicherweise ein Symptom des Speichers aufblähen. Speicher-Aufblähung ist, wenn eine Seite mehr Arbeitsspeicher benötigt, als für eine optimale Seitengeschwindigkeit erforderlich ist.

• Die Leistung einer Seite wird verzögert oder wird häufig angehalten. Dies ist möglicherweise ein Symptom für häufige Garbage Collections. Die Garbage Collection ist der Zeitpunkt, an dem der Browser Speicher zurückfordert. Der Browser entscheidet, wann dies geschieht. Während Sammlungen wird das gesamte ausgeführte Skript angehalten. Wenn der Browser also viel Müll sammelt, wird die Skriptlaufzeit viel angehalten.

Speicher aufbläht: Wie viel ist "zu viel"?

Ein Speicherverlust ist einfach zu definieren. Wenn eine Website immer mehr Arbeitsspeicher verwendet, ist ein Leck aufgetreten. Das Aufblähen des Arbeitsspeichers ist jedoch etwas schwieriger anzuheften. Was gilt als "Zu viel Arbeitsspeicher verwenden"?

Hier gibt es keine harten 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.

Der Schlüssel hier ist, das RAIL-Modell zu verwenden und sich auf Ihre Benutzer zu konzentrieren. Erfahren Sie, welche Geräte bei Ihren Benutzern beliebt sind, und testen Sie dann Ihre Seite auf diesen Geräten. Wenn die Oberfläche 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 die Untersuchung von Speicherproblem. Der Microsoft Edge Browser Task Manager ist ein Echtzeitmonitor, der Ihnen mitteilt, wie viel Arbeitsspeicher eine Seite derzeit verwendet.

1. Drücken Shift+Esc oder wechseln Sie zum Hauptmenü von Microsoft Edge, und wählen Sie "Weitere Tools > Browser-Task-Manager " aus, um den Microsoft Edge Browser Task Manager zu öffnen.

   

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

   

In diesen beiden Spalten erfahren Sie, wie Ihre Seite Arbeitsspeicher verwendet:

• Die Spalte "Speicher " stellt den systemeigenen Speicher dar. DOM-Knoten werden im systemeigenen Speicher gespeichert. Wenn dieser Wert zunimmt, werden DOM-Knoten erstellt.

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

Visualisieren von Speicherlecks mit dem Leistungsbereich

Sie können den Leistungsbereich auch als weiteren Ausgangspunkt für Ihre Untersuchung verwenden. Der Leistungsbereich hilft Ihnen, die Speichernutzung einer Seite im Laufe der Zeit zu visualisieren.

1. Öffnen Sie in DevTools das Leistungstool .

2. Aktivieren Sie das Kontrollkästchen "Speicher ".

3. Erstellen Sie eine Aufzeichnung.

Es ist eine bewährte Methode, ihre Aufzeichnung mit einer erzwungenen Garbage Collection zu starten und zu beenden. Klicken Sie auf die Garbage Force Garbage Collection, um die während der Aufzeichnung.

Um Speicheraufzeichnungen zu veranschaulichen, ziehen Sie den folgenden Code in Betracht:

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

Zunächst eine Erläuterung der Benutzeroberfläche. Das HEAP-Diagramm im Übersichtsbereich (unter NET) stellt den JS-Heap dar. Unterhalb des Bereichs "Übersicht " befindet sich der Bereich "Leistungsindikator ". Die Speicherauslastung wird nach JS-Heap (identisch mit HEAP-Diagramm im Übersichtsbereich ), Dokumenten, DOM-Knoten, Listenern und GPU-Speicher aufgeteilt. 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 sauber mit dem Code überein. Die Anzahl der Knoten nimmt in einzelnen Schritten zu. Sie können davon ausgehen, dass jede Erhöhung der Knotenanzahl ein Aufruf von grow()ist.

Das JS-Heap-Diagramm (das blaue Diagramm) ist nicht so einfach. Im Einklang mit bewährten Methoden ist der erste Dip tatsächlich eine erzwungene Garbage Collection (klicken Sie auf die Garbage Force Garbage Collection sammeln .

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

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

Ermitteln von getrennten DOM-Strukturspeicherlecks mit Heap-Snapshots

Ein DOM-Knoten wird nur dann als Garbage Collection erfasst, wenn weder die DOM-Struktur noch javaScript-Code, der auf der Seite ausgeführt wird, auf den Knoten verweist. Ein Knoten wird als "getrennt" bezeichnet, wenn er aus der DOM-Struktur entfernt wird, aber ein JavaScript verweist immer noch 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 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);

Wenn Sie auf die Schaltfläche klicken, 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 ist.

Heap-Momentaufnahmen sind eine Möglichkeit, getrennte Knoten zu identifizieren. Wie der Name schon sagt, zeigen Heap-Momentaufnahmen, wie Speicher zum Zeitpunkt der Momentaufnahme auf die JS-Objekte und DOM-Knoten für Ihre Seite verteilt wird.

So erstellen Sie eine Momentaufnahme:

1. Öffnen Sie DevTools, und wechseln Sie zum Bereich "Arbeitsspeicher ".

2. Klicken Sie auf das Heap-Snapshot-Optionsfeld , und klicken Sie dann unten im Bereich auf die Schaltfläche " Momentaufnahme erstellen".

   

   Das Verarbeiten und Laden der 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 Detachedim Textfeld "Klassenfilter" ein, 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-Heap-Speicherlecks mit der Zuordnungsinstrumentation auf der Zeitachse

Die Zuordnungsinstrumentation auf der Zeitachse ist ein weiteres Tool, mit dem Sie Speicherverluste in Ihrem JS-Heap nachverfolgen können.

Veranschaulichen der Zuordnungsinstrumentation auf der Zeitachse 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 geklickt wird, auf die im Code verwiesen wird, wird dem x Array eine Zeichenfolge von einer Million Zeichen hinzugefügt.

So zeichnen Sie eine Zuordnungsinstrumentation auf der Zeitachse auf:

1. Öffnen Sie DevTools, und wählen Sie den Bereich "Speicher " aus.

2. Klicken Sie im Zeitachsen-Optionsfeld auf die Zuordnungsinstrumentation und dann auf die Schaltfläche " Start ".

3. Führen Sie die Von Ihnen vermutete Aktion aus, die den Speicherverlust verursacht.

4. Wenn Sie fertig sind, klicken Sie auf "Aufzeichnung des Heapprofils .

5. Beachten Sie bei der Aufzeichnung, ob in der Zuordnungsinstrumentation auf der Zeitachse blaue Balken angezeigt werden, wie in der folgenden Abbildung dargestellt:

   

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

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

   

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

   In der folgenden Abbildung wird beispielsweise in den Details des neu zugeordneten Objekts angegeben, dass es der x Variablen im Window Bereich zugewiesen wurde:

Untersuchen der Speicherzuweisung nach Funktion

Verwenden Sie den Zuordnungs-Samplingprofiltyp , um die Speicherzuordnung nach JavaScript-Funktion anzuzeigen.

1. Klicken Sie auf das Optionsfeld " Zuordnungssampling ".

2. Wenn auf der Seite ein Mitarbeiter 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 Ihre Aktionen abgeschlossen haben.

DevTools zeigt Eine Aufschlüsselung der Speicherzuweisung nach Funktion. Die Standardansicht ist "Schwer" (unten nach oben), in der die Funktionen angezeigt werden, die den größten Speicherplatz am oberen Rand zugewiesen haben.

Häufige Garbage Collections erkennen

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

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

• Im Microsoft Edge Browser Task Manager stellen häufig steigende und sinkende Speicher - oder JavaScript-Speicherwerte eine häufige Garbage Collection dar.

• In Leistungsaufzeichnungen zeigen häufige Änderungen (aufsteigend und fallend) an den JS-Heap- oder Knotenanzahldiagrammen eine häufige Garbage Collection an.

Nachdem Sie das Problem identifiziert haben, können Sie eine Zuordnungsinstrumentation für die Zeitachsenaufzeichnung verwenden, um herauszufinden, wo Speicher zugewiesen 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 Originalseite befindet sich hier und wurde von Kayce Basken (Technical Writer, Chrome DevTools & Lighthouse) verfasst.

Diese Arbeit unterliegt einer Creative Commons Attribution 4.0 International License.