Beschleunigen der JavaScript-Laufzeit ("Profilerstellungstyp "Allocation Sampling")

Verwenden Sie das Speichertool , um teure Funktionen zu identifizieren:

Notieren Sie genau, welche Funktionen aufgerufen wurden und wie viel Arbeitsspeicher jeweils benötigt wird, mit Der Zuordnungssampling im Speichertool .

Visualisieren Sie Ihre Profile als Flammendiagramm.

Verwenden des Profilerstellungstyps "Zuordnungssampling" zum Anzeigen der Speicherbelegung nach JavaScript-Funktion

Wenn Sie Jank (Renderingunterbrechungen) in Ihrem JavaScript bemerken, erfassen Sie ein Profil für die Stichprobenentnahme für die Speicherbelegung mithilfe des Profilerstellungstyps für die Zuordnungssampling . Ein Samplingprofil zeigt an, welche Funktionen den meisten Arbeitsspeicher zugeordnet haben.

So verwenden Sie den Profilerstellungstyp "Zuordnungssampling ", um die Speicherbelegung nach JavaScript-Funktion anzuzeigen:

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 das Speichertool nicht angezeigt wird, klicken Sie auf die Schaltfläche Weitere Tools (), und wählen Sie dann Arbeitsspeicher aus.

4. Wählen Sie die Optionsschaltfläche Zuordnungsstichproben aus.

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

5. Wenn auf der Seite ein Worker vorhanden ist, können Sie im Abschnitt Select JavaScript VM instance (JavaScript-VM auswählen) diesen als Profilerstellungsziel auswählen.

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

7. Interagieren Sie 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.

8. Klicken Sie oben links im Speichertool auf die Schaltfläche Heapprofilerstellung beenden (

   Oder klicken Sie am unteren Rand des Speichertools auf die Schaltfläche Beenden . Im Abschnitt Samplingprofile auf der Randleiste Profile wird ein neues Profil hinzugefügt:

   

   Das Samplingprofil zeigt eine Aufschlüsselung der Speicherbelegung nach Funktion. Die Standardansicht ist Heavy (Bottom Up). Sie können zur Ansicht Diagramm oder Struktur (oben nach unten) wechseln, wie im abschnitt unten.

Sie können auch die Konsolen-Hilfsprogramme-API verwenden, um Profile über die Befehlszeile aufzuzeichnen und zu gruppieren.

Ändern der Ansicht eines Stichprobenprofils

Verwenden Sie zum Ändern der Sortierreihenfolge in einem Profil für die Stichprobenerstellung für die Speicherbelegung die Dropdownliste Profilansichtsmodus , die zunächst Schwer (Bottom Up) lautet:

Menuitems:

• Diagramm : Chronologisches Diagramm der Aufzeichnung.
• Schwer (Bottom Up): Listen die aufgerufenen Funktionen der App in der Reihenfolge der Speicherbelegung und zeigt den Aufrufpfad für jede Funktion an. Die Standardansicht.
• Struktur (Oben nach unten): Zeigt die aufrufende Struktur an, beginnend am oberen Rand der Aufrufliste.

Diagramm

Im Diagrammansichtsmodus wird ein chronologisches Diagramm der Aufzeichnung angezeigt:

Schwer (bottom up)

Der Ansichtsmodus "Schwer ( Von unten nach oben) listet Funktionen nach Auswirkungen auf die Leistung auf und ermöglicht es Ihnen, die Aufrufpfade zu den Funktionen zu untersuchen. Dies ist die Standardansicht:

Struktur (von oben nach unten)

Der Ansichtsmodus Struktur (Nach unten) zeigt ein Gesamtbild der aufrufenden Struktur an, beginnend am oberen Rand der Aufrufliste:

Funktionen ausschließen

Wenn Schwer (unten nach oben) oder Struktur (von oben nach unten) ausgewählt ist (nicht Diagramm), stehen beim Auswählen einer Zeile mehrere Schaltflächen zur Verfügung (nicht abgeblendet):

• Ausgewählte Funktion "Fokus" (
• Ausgewählte Funktion ausschließen ()
• Wiederherstellen aller Funktionen ()

Um eine Funktion aus einem Samplingprofil für die Speicherbelegung auszuschließen, wählen Sie das Samplingprofil aus, und klicken Sie dann auf die Schaltfläche Ausgewählte Funktion ausschließen (). Die anfordernde Funktion (übergeordnete Funktion) der ausgeschlossenen Funktion (untergeordnetes Element) wird mit dem zugeordneten Speicher belastet, der der ausgeschlossenen Funktion (untergeordneten Funktion) zugewiesen ist.

Klicken Sie auf die Schaltfläche Alle Funktionen wiederherstellen (), um alle ausgeschlossenen Funktionen wieder in der Aufzeichnung wiederherzustellen.

Anzeigen eines Speicherbelegungs-Samplingprofils als Diagramm

Die Diagrammansicht bietet eine visuelle Darstellung des Stichprobenprofils im Zeitverlauf.

Nachdem Sie ein Profil für die Stichprobenentnahme für die Speicherbelegung aufgezeichnet haben, zeigen Sie die Aufzeichnung als Flammendiagramm an. Wählen Sie in der Dropdownliste Profilansichtsmodus die Option Diagramm aus (die anfänglich Schwer (bottom up)) lautet):

Das Flammendiagramm ist in zwei Teile unterteilt:

Index	Bestandteil	Beschreibung
1	Übersicht	Eine Vogelperspektive der gesamten Aufzeichnung. Die Höhe der Balken entspricht der Tiefe des Aufrufstapels. Je höher die Leiste, desto tiefer die Aufrufliste.
2	Aufruflisten	Dies ist eine detaillierte Ansicht der Funktionen, die während der Aufzeichnung aufgerufen wurden. Die horizontale Achse ist die Zeit, und die vertikale Achse ist die Aufrufliste. Die Stapel sind von oben nach unten organisiert. Daher hat die Funktion oben die darunter stehende aufgerufen usw.

Funktionen werden nach dem Zufallsprinzip gefärbt. Es gibt keine Korrelation mit den Farben, die in den anderen Bereichen verwendet werden. Funktionen werden jedoch für Aufrufe immer gleich gefärbt, sodass Sie Muster in jeder Laufzeit beobachten können.

Eine hohe Aufrufliste ist nicht unbedingt von Bedeutung. Dies kann nur bedeuten, dass viele Funktionen aufgerufen wurden. Ein breiter Balken bedeutet jedoch, dass die Ausführung einer Funktion sehr lange gedauert hat, daher sind dies Kandidaten für eine Optimierung.

Vergrößern bestimmter Teile der Aufzeichnung

Um bestimmte Teile der Aufrufliste zu vergrößern, klicken Und ziehen Sie nach links und rechts über die Übersicht. Nach dem Zoomen zeigt die Aufrufliste automatisch den ausgewählten Teil der Aufzeichnung an.

Anzeigen von Funktionsdetails

Klicken Sie auf eine Funktion, um sie im Tool Quellen anzuzeigen.

Zeigen Sie auf eine Funktion, um den Namen und die Zeitsteuerungsdaten anzuzeigen:

Detail	Beschreibung
Name	Der Name der Funktion.
Selbstgröße	Die Größe des aktuellen Aufrufs der Funktion, einschließlich nur der Anweisungen in der Funktion.
Gesamtgröße	Die Größe des aktuellen Aufrufs dieser Funktion und aller Funktionen, die aufgerufen wurden.
URL	Der Speicherort der Funktionsdefinition in Form von base.js:261 , wobei base.js der Name der Datei ist, in der die Funktion definiert ist, und 261 ist die Zeilennummer der Definition.

Untersuchen der Speicherbelegung mit reduzierter Speicherbereinigung ("Kontrollkästchen Objekte einschließen")

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 nicht im Speichertool angezeigt, wenn die Profilerstellung mithilfe der Zuordnungsstichproben oder Zuordnungen für Zeitleiste Profilerstellungstypen verwendet wird.

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.

Nachverfolgen von Objekten, die von GC verworfen werden

So verfolgen Sie Objekte nach, die von der Garbage Collection verworfen werden:

1. Wählen Sie im Speichertool die Optionsschaltfläche Zuordnungssampling aus.

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.

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 Originalseite ist hier zu finden und wird von Kayce Basques und Meggin Kearney geschrieben.

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