Verwenden der Zuordnungsinstrumentation auf der Zeitleiste ("Zuordnungen auf der Zeitleiste" – Profilerstellungstyp)

Verwenden Sie im Tool "Speicher" den Profilerstellungstyp "Zuordnungen auf der Zeitleiste", um Objekte zu finden, die nicht ordnungsgemäß Garbage Collection erhalten, und behalten Sie weiterhin Arbeitsspeicher bei.

Funktionsweise der Zuordnungsinstrumentation auf der Zeitleiste

Der Profilerstellungstyp "Zuordnungen auf der Zeitleiste" des Speichertools kombiniert die detaillierten Momentaufnahme-Informationen des Heap-Profilers mit der inkrementellen Aktualisierung und Nachverfolgung des Leistungstools. In ähnlicher Weise umfasst das Nachverfolgen der Heapzuordnung für Objekte das Starten einer Aufzeichnung, das Ausführen einer Reihe von Aktionen und das Beenden der Aufzeichnung zur Analyse.

Bei der Zuordnung auf der Zeitleiste werden während der Aufzeichnung regelmäßig (alle 50 ms) Heap-Momentaufnahmen und eine letzte Momentaufnahme am Ende der Aufzeichnung erstellt.

Die Zahl nach dem @ ist eine Objekt-ID, die in den mehreren Momentaufnahmen, die während der Aufzeichnungssitzung erstellt wurden, beibehalten wird. Die persistente Objekt-ID ermöglicht einen präzisen Vergleich zwischen Heapzuständen. Objekte werden während der Garbage Collection verschoben, daher macht das Anzeigen der Adresse eines Objekts keinen Sinn.

Aktivieren der Zuordnungsinstrumentation auf der Zeitachse

So beginnen Sie mit der Verwendung von Zuordnungen auf der Zeitleiste:

1. Öffnen Sie eine Webseite, z. B. die Demo-Webseite von Detached Elements, in einem neuen Fenster oder auf einer neuen Registerkarte.

2. Klicken Sie mit der rechten Maustaste auf die Webseite, und wählen Sie dann "Überprüfen" aus. Oder drücken Sie STRG+UMSCHALT+I (Windows, Linux) oder BEFEHL+WAHL+I (macOS).

   DevTools wird geöffnet.

3. Wählen Sie in DevTools in der Aktivitätsleiste das Tool "Arbeitsspeicher) aus.

   Wenn diese Registerkarte nicht angezeigt wird, klicken Sie auf die Schaltfläche Weitere Tools ("), und wählen Sie dann "Arbeitsspeicher" aus. Das Speichertool wird geöffnet:

   

4. Wählen Sie das Optionsfeld "Zuordnungen auf der Zeitleiste" aus.

   Wenn die Optionsschaltfläche Zuordnungen auf der Zeitleiste nicht angezeigt wird, weil bereits ein Profil angezeigt wird, klicken Sie oben links auf Profile ().

5. Klicken Sie unten im Speichertool auf die Schaltfläche "Start ".

6. mit der Webseite interagieren; Klicken Sie beispielsweise auf der Demo-Webseite auf die Schaltfläche " Schneller Datenverkehr " und dann auf die Schaltfläche "Stopp ". Je nachdem, was Sie analysieren möchten, können Sie entweder die Seite aktualisieren, mit der Seite interagieren oder die Seite einfach ausführen lassen.

7. Klicken Sie oben links im Speichertool auf die Schaltfläche " Aufzeichnung des Heapprofils beenden " (").

   Eine neue Momentaufnahme wird im Abschnitt Zuordnungszeitachsender Profilliste erstellt:

   

Aufzeichnen von Zuordnungen auf der Zeitleiste

Verwenden Sie im Tool "Speicher" den Profilerstellungstyp "Zuordnungen auf der Zeitleiste". Dies ist eines der DevTools-Features zum Aufspüren von Speicherverlusten in Ihrem JS-Heap.

Folgender Code ist gegeben:

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 erfassen Sie Zuordnungen auf der Zeitleiste:

1. Öffnen Sie eine Webseite, z. B. eine Demowebseite.

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

3. Klicken Sie auf die Option Zuordnungen auf der Zeitleiste, und klicken Sie dann auf Start.

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

5. Wenn Sie fertig sind, klicken Sie auf Aufzeichnung des Heap-Profils beenden.

6. Achten Sie während der Aufzeichnung darauf, ob in der Zuordnungsinstrumentation auf der Zeitleiste blaue Balken angezeigt werden:

   

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

7. Zoomen Sie auf einen Balken, um den Konstruktorbereich so zu filtern, dass nur Objekte angezeigt werden, die während des angegebenen Zeitraums zugeordnet wurden.

   

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

   Beispielsweise zeigt in den Details des neu zugeordneten Objekts an, dass es der x Variablen im Window Bereich zugeordnet wurde:

   

Lesen einer Heap-Zuordnungs-Zeitleiste

Die Zeitleiste für die Heapzuordnung zeigt, wo Objekte erstellt werden, und identifiziert den Aufbewahrungspfad. In der folgenden Abbildung geben die Balken oben an, wann neue Objekte im Heap gefunden werden.

Die Höhe jedes Balkens entspricht der Größe der zuletzt zugeordneten Objekte, und die Farbe der Balken zeigt an, ob diese Objekte in der endgültigen Heap-Momentaufnahme noch live sind oder nicht. Blaue Balken zeigen Objekte an, die am Ende der Zeitleiste noch aktiv sind, graue Balken zeigen Objekte an, die während der Zeitleiste zugeordnet wurden, aber seitdem von der Garbage Collection erfasst wurden.

Sie können die Schieberegler in der obigen Zeitleiste verwenden, um in diese bestimmte Momentaufnahme zu zoomen und die Objekte zu überprüfen, die kürzlich zu diesem Zeitpunkt zugeordnet wurden:

Wenn Sie auf ein bestimmtes Objekt im Heap klicken, wird die Haltestruktur im unteren Teil der Heap-Momentaufnahme angezeigt. Wenn Sie den Aufbewahrungspfad zum Objekt untersuchen, sollten Sie genügend Informationen erhalten, um zu verstehen, warum das Objekt nicht erfasst wurde, und Sie sollten die erforderlichen Codeänderungen vornehmen, um den unnötigen Verweis zu entfernen.

Anzeigen der Speicherbelegung nach Funktion

Sie können die Speicherbelegung nach JavaScript-Funktion anzeigen. Weitere Informationen finden Sie unter Beschleunigen der JavaScript-Laufzeit (Profilerstellungstyp "Zuordnungsstichproben")).

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 Begriffen verwendet werden. Die Originalseite befindet sich hier und wurde von Meggin Kearney verfasst.

Diese Arbeit ist lizenziert unter einer Creative Commons Attribution 4.0 International License.