Hinweis
Für den Zugriff auf diese Seite ist eine Autorisierung erforderlich. Sie können versuchen, sich anzumelden oder das Verzeichnis zu wechseln.
Für den Zugriff auf diese Seite ist eine Autorisierung erforderlich. Sie können versuchen, das Verzeichnis zu wechseln.
Verwenden Sie zum Identifizieren teurer Funktionen das Speichertool :
Zeichnen Sie mit Allocation Sampling im Speichertool genau auf, welche Funktionen aufgerufen wurden und wie viel Speicher jede Funktion benötigt.
Visualisieren Sie Ihre Profile als Flammendiagramm.
Verwenden Sie den Profilerstellungstyp "Allocation sampling", um die Speicherbelegung nach JavaScript-Funktion anzuzeigen
Wenn Sie Ruckeln (Unterbrechungen des Renderings) in Ihrem JavaScript bemerken, erfassen Sie ein Samplingprofil für die Speicherzuordnung, indem Sie den Profiltyp Zuordnung Sampling verwenden. Ein Samplingprofil zeigt, welche Funktionen den meisten Speicher belegen.
So verwenden Sie den Profilerstellungstyp "Zuordnung", um die Speicherbelegung nach JavaScript-Funktion anzuzeigen:
Öffnen Sie eine Webseite, z. B. die Demo-Webseite von Detached Elements, in einem neuen Fenster oder auf einer neuen Registerkarte.
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.
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 "Speicher" aus.Wählen Sie die Schaltfläche Zuordnungsstichprobenoption .
Wenn die Schaltfläche Allocation Sampling nicht angezeigt wird, weil bereits ein Profil angezeigt wird, klicken Sie oben links auf Profile (
).Wenn sich im Abschnitt JavaScript-VM-Instance auswählen ein Worker auf der Seite befindet, können Sie diesen als Profilerstellungsziel auswählen.
Klicken Sie unten im Speichertool auf die Schaltfläche "Start ".
Interagieren mit der Webseite. 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.
Klicken Sie oben links im Speichertool auf die Schaltfläche Heapprofilerstellung beenden (
").Oder klicken Sie unten im Speichertool auf die Schaltfläche Stopp . Ein neues Profil wird im Abschnitt Samplingprofile in der Seitenleiste Profile hinzugefügt:
Das Samplingprofil zeigt eine Aufschlüsselung der Speicherbelegung nach Funktion. Die Standardansicht ist "Schwer" (von unten nach oben). Sie können entsprechend dem folgenden Abschnitt zur Diagramm - oder Strukturansicht (von oben nach unten) wechseln.
Sie können auch die Console Utilities-API verwenden, um Profile über die Befehlszeile aufzuzeichnen und zu gruppieren.
Ändern der Ansicht eines Stichprobenprofils
Wenn Sie die Sortierreihenfolge in einem Speicherzuordnungs-Samplingprofil ändern möchten, verwenden Sie die Dropdownliste Profilansichtsmodus , in der zunächst "Stark (von unten nach oben)" angezeigt wird:
Menüpunkte:
- Chart - Chronologisches Diagramm der Aufnahme.
- Heavy (Bottom Up) – Listet die aufgerufenen Funktionen der App in der Reihenfolge ihrer Speicherbelegung auf und zeigt den Aufrufpfad für jede Funktion an. Die Standardansicht.
- Struktur (von oben nach unten): Zeigt die Anrufstruktur an, beginnend am oberen Rand des Aufrufstapels.
Diagramm
Der Diagrammansichtsmodus zeigt ein chronologisches Diagramm der Aufzeichnung an:
Schwer (von unten nach oben)
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:
Baum (von oben nach unten)
Der Strukturansichtsmodus (von oben nach unten) zeigt ein Gesamtbild der Aufrufstruktur, beginnend am oberen Rand des Aufrufstapels:
Ausschließen von Funktionen
Wenn Schwer (von unten nach oben) oder Baum (von oben nach unten) ausgewählt ist (nicht Diagramm), gibt es mehrere Schaltflächen, die verfügbar (nicht abgeblendet) sind, wenn Sie eine Zeile auswählen:
-
Funktion "Ausgewählte Fokussiere
-
Ausgewählte Funktion ausschließen (
) -
Alle Funktionen wiederherstellen (
)
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 (Eltern) der ausgeschlossenen Funktion (Child) wird mit dem zugewiesenen Speicher belastet, der der ausgeschlossenen Funktion (Child) zugewiesen ist.
Klicken Sie auf die Schaltfläche Alle Funktionen wiederherstellen (), um alle ausgeschlossenen Funktionen wieder in der Aufzeichnung wiederherzustellen.
Anzeigen eines Samplingprofils für die Speicherbelegung als Diagramm
Die Diagrammansicht bietet eine visuelle Darstellung des Stichprobenprofils im Zeitverlauf.
Zeigen Sie nach der Aufzeichnung eines Samplingprofils für die Speicherbelegung die Aufzeichnung als Flammendiagramm an. Wählen Sie Diagramm in der Dropdownliste des Profilansichtsmodus aus (die anfänglich Stark (von unten nach oben) lautet):
Das Flammendiagramm ist in zwei Teile unterteilt:
| Index | Teil | Beschreibung |
|---|---|---|
| 1 | Übersicht | Eine Vogelperspektive der gesamten Aufzeichnung. Die Höhe der Balken entspricht der Tiefe des Aufrufstapels. Je höher der Balken, desto tiefer der Aufrufstapel. |
| 2 | Call Stacks | Dies ist eine detaillierte Ansicht der Funktionen, die während der Aufzeichnung aufgerufen wurden. Die horizontale Achse stellt die Zeit dar, und die vertikale Achse ist der Aufrufstapel. Die Stapel sind von oben nach unten angeordnet. Die Funktion oben wird also als die darunter bezeichnete und so weiter. |
Funktionen werden zufällig eingefärbt. Es gibt keine Korrelation zu den Farben, die in den anderen Panels verwendet werden. Funktionen haben jedoch bei Aufrufen immer die gleiche Farbe, sodass Sie Muster in jeder Laufzeit beobachten können.
Ein hoher Call-Stack ist nicht unbedingt signifikant; Es könnte einfach bedeuten, dass viele Funktionen aufgerufen wurden. Ein breiter Balken bedeutet jedoch, dass die Ausführung einer Funktion lange gedauert hat, sodass dies Kandidaten für eine Optimierung sind.
Vergrößern bestimmter Teile der Aufzeichnung
Um bestimmte Teile des Aufrufstapels zu vergrößern, klicken und ziehen Sie nach links und rechts in der Übersicht. Nach dem Zoomen wird im Aufrufstapel automatisch der Teil der Aufzeichnung angezeigt, den Sie ausgewählt haben.
Funktionsdetails anzeigen
Klicken Sie auf eine Funktion, um sie im Tool "Quellen" anzuzeigen.
Zeigen Sie auf eine Funktion, um den Namen und die Zeitdaten anzuzeigen:
| Detail | Beschreibung |
|---|---|
| Name | Der Name der Funktion. |
| Eigene Größ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 aufgerufenen Funktionen. |
| URL | Der Speicherort der Funktionsdefinition in Form von base.js:261 Dabei ist der base.js Name der Datei, in der die Funktion definiert ist, und 261 die Zeilennummer der Definition. |
Untersuchen der Speicherbelegung mit reduziertem Müll ("Objekte einschließen"-Kontrollkästchen)
Standardmäßig meldet der Profiltyp "Zuordnungsstichproben" nur Zuordnungen, die am Ende der Aufzeichnungssitzung noch aktiv sind. Objekte, die erstellt, entfernt und dann mit Garbage Collected (GC) gesammelt werden, werden im Speichertool nicht angezeigt, wenn die Profilerstellung mithilfe der Profilierungstypen Zuordnungsstichproben oder Zuordnungen auf der Zeitleiste verwendet wird.
Sie können dem Browser vertrauen, dass er Ihren Code sauber von Müll entfernt. Es ist jedoch wichtig zu bedenken, dass GC selbst ein teurer Vorgang ist und mehrere GCs die Benutzererfahrung Ihrer Website oder App verlangsamen können. Wenn Sie im Tool "Leistung" mit aktiviertem Kontrollkästchen "Speicher" aufzeichnen, können Sie sehen, dass der GC-Vorgang an den steilen Klippen (plötzliche Rückgänge) im Heap-Diagramm stattfindet:
Indem Sie die Menge an Müll reduzieren, die Ihr Code erzeugt, können Sie die Kosten für jeden einzelnen 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:
Klicken Sie im Tool Speicher auf die Schaltfläche Allocation Sampling .
Klicken Sie auf die Einstellungen Objekte einschließen, die von Haupt-GC verworfen wurden und Objekte einschließen, die von kleineren GC verworfen wurden.
Klicken Sie auf die Schaltfläche Start.
Führen Sie auf der Webseite Aktionen aus, die Sie untersuchen möchten.
Klicken Sie auf die Schaltfläche Stopp , wenn Sie alle Ihre Aktionen abgeschlossen haben.
DevTools verfolgt jetzt alle Objekte, die während der Aufzeichnung durch Garbage Collection (GC'd) gesammelt wurden. Verwenden Sie diese Einstellungen, um zu verstehen, wie viel Müll Ihre Website oder App generiert. Die von der Zuordnungsstichprobenentnahme gemeldeten Daten helfen Ihnen, die Funktionen zu identifizieren, die den meisten Müll generieren.
Wenn Sie Objekte untersuchen, die nur während bestimmter größerer oder kleinerer GC-Vorgänge GC durchgeführt wurden, konfigurieren Sie die Einstellungen entsprechend, um den Vorgang nachzuverfolgen, der Ihnen wichtig ist. Um mehr über die Unterschiede zwischen Haupt- und Neben-GC zu erfahren, siehe Trash talk: the Orinoco garbage collector | V8-JavaScript-Engine-Entwicklerblog.
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 findet sich hier und wurde von Kayce Basques und Meggin Kearney verfasst.
Diese Arbeit ist lizenziert unter einer Creative Commons Attribution 4.0 International License.