Verwenden der Zuordnungsinstrumentation für Zeitleiste ("Zuordnungen auf Zeitleiste"-Profilerstellungstyp)

Verwenden Sie im Speichertool die Zuordnungen für Zeitleiste Profilerstellungstyp, um Objekte zu finden, die nicht ordnungsgemäß vom Garbage Collection erfasst werden, und behalten Sie weiterhin Arbeitsspeicher bei.

Funktionsweise der Zuordnungsinstrumentation auf Zeitleiste

Die Zuordnungen für Zeitleiste Profilerstellungstyp des Speichertools kombiniert die detaillierten Momentaufnahme Informationen des Heapprofilers mit der inkrementellen Aktualisierung und Nachverfolgung des Leistungstools. Ebenso umfasst die Nachverfolgung der Heapzuordnung für Objekte das Starten einer Aufzeichnung, das Ausführen einer Sequenz von Aktionen und das Beenden der Aufzeichnung für die Analyse.

Zuordnungen auf Zeitleiste erstellt in regelmäßigen Abständen Heapmomentaufnahmen während der gesamten Aufzeichnung (so häufig wie alle 50 ms) und einen letzten Momentaufnahme am Ende der Aufzeichnung.

Die Zahl nach @ ist eine Objekt-ID, die über mehrere Momentaufnahmen hinweg beibehalten wird, die während der Aufzeichnungssitzung erstellt wurden. Die ID des persistenten Objekts ermöglicht einen präzisen Vergleich zwischen Heapzuständen. Objekte werden während der Garbage Collection verschoben, sodass das Anzeigen der Adresse eines Objekts keinen Sinn macht.

Aktivieren der Zuordnungsinstrumentation auf der Zeitachse

So beginnen Sie mit der Verwendung von Zuordnungen auf Zeitleiste:

1. Öffnen Sie eine Webseite, z. B. die Demowebseite für getrennte Elemente, in einem neuen Fenster oder einer neuen Registerkarte.

2. Klicken Sie mit der rechten Maustaste auf die Webseite, und wählen Sie dann Untersuchen 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 die Optionsschaltfläche Zuordnungen für Zeitleiste aus.

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

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

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

7. Klicken Sie oben links im Speichertool auf die Schaltfläche Aufzeichnungsheapprofil beenden (

   Eine neue Momentaufnahme wird im Abschnitt Zuordnungszeitachsen der Liste Profile erstellt:

   

Datensatzzuordnungen auf dem Zeitleiste

Verwenden Sie im Speichertool die Zuordnungen für Zeitleiste Profilerstellungstyp. Dies ist eines der DevTools-Features zum Nachverfolgen von Speicherverlusten in Ihrem JS-Heap.

Bei folgendem Code:

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 Zuordnungen auf dem Zeitleiste auf:

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 Optionsschaltfläche Zuordnungen Zeitleiste und dann auf die Schaltfläche 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 die Schaltfläche Aufzeichnung des Heapprofils .

6. Beachten Sie während der Aufzeichnung, ob blaue Balken in der Zuordnungsinstrumentierung auf dem Zeitleiste angezeigt werden:

   

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

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

   

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

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

   

Lesen einer Heapzuordnung Zeitleiste

Die Heapzuordnung Zeitleiste zeigt an, 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 zugewiesenen Objekte, und die Farbe der Balken gibt an, ob diese Objekte noch im endgültigen Heap Momentaufnahme aktiv sind. 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 garbage collection wurden.

Sie können die Schieberegler im Zeitleiste oben verwenden, um diesen bestimmten Momentaufnahme zu vergrößern und die Objekte zu überprüfen, die zu diesem Zeitpunkt kürzlich zugewiesen wurden:

Wenn Sie auf ein bestimmtes Objekt im Heap klicken, wird die Aufbewahrungsstruktur im unteren Teil des Heaps Momentaufnahme angezeigt. Wenn Sie den Aufbewahrungspfad zum Objekt untersuchen, sollten Sie genügend Informationen erhalten, um zu verstehen, warum das Objekt nicht gesammelt 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-Runtime ("Profilerstellungstyp für die Zuordnungssampling").

Hinweis

Teile dieser Seite sind Änderungen, die auf Arbeiten basieren, die von Google erstellt und geteilt und gemäß den in der Creative Commons Attribution 4.0 International License beschriebenen Bedingungen verwendet werden. Die originale Seite finden Sie hier und wird von Meggin Kearney geschrieben.

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