Beschleunigen der JavaScript-Runtime
Verwenden Sie das Speichertool , um teure Funktionen zu identifizieren.
Zusammenfassung
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.
Aufzeichnen eines Stichprobenprofils
Wenn Sie jank (Renderingunterbrechungen) in Ihrem JavaScript bemerken, sammeln Sie ein Samplingprofil. Stichprobenprofile zeigen an, wo die Ausführungszeit für Funktionen auf Ihrer Seite aufgewendet wird.
Wechseln Sie in DevTools zum Speichertool .
Klicken Sie auf die Optionsschaltfläche Zuordnungsstichproben .
Klicken Sie auf Start.
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.
Wenn Sie fertig sind, klicken Sie auf die Schaltfläche Beenden .
Sie können auch die Konsolen-Hilfsprogramme-API verwenden, um Profile über die Befehlszeile aufzuzeichnen und zu gruppieren.
Anzeigen des Stichprobenprofils
Wenn Sie die Aufzeichnung abgeschlossen haben, füllt DevTools den Bereich Arbeitsspeicher unter SAMPLING PROFILES automatisch mit den Daten aus Ihrer Aufzeichnung auf.
Die Standardansicht ist Heavy (Bottom Up). In dieser Ansicht können Sie überprüfen, welche Funktionen die meisten Auswirkungen auf die Leistung hatten, und den anfordernden Pfad für jede Funktion untersuchen.
Ändern der Sortierreihenfolge
Um die Sortierreihenfolge zu ändern, wählen Sie das Dropdownmenü neben dem Symbol für die ausgewählte Fokusfunktion (
) aus, und wählen Sie dann eine der folgenden Optionen aus:
Diagramm. Zeigt ein chronologisches Diagramm der Aufzeichnung an.
Schwer (von unten nach oben). Listet Funktionen nach Auswirkungen auf die Leistung auf und ermöglicht es Ihnen, die aufrufenden Pfade zu den Funktionen zu untersuchen. Dies ist die Standardansicht.
Struktur (von oben nach unten). Zeigt ein Gesamtbild der aufrufenden Struktur, beginnend am oberen Rand der Aufrufliste.
Funktionen ausschließen
Wenn Sie eine Funktion aus Ihrem Samplingprofil ausschließen möchten, wählen Sie sie 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 des Samplingprofils als Diagramm
Die Diagrammansicht bietet eine visuelle Darstellung des Stichprobenprofils im Zeitverlauf.
Nachdem Sie ein Stichprobenprofil aufgezeichnet haben, zeigen Sie die Aufzeichnung als Flammendiagramm an, indem Sie die Sortierreihenfolge in Diagramm ändern.
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 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. |
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 befindet sich hier und wurde von Kayce Basques (Technical Writer, Chrome DevTools & Lighthouse) und Meggin Kearney (Technical Writer) verfasst.
Dieses Werk ist unter einer Creative Commons Attribution 4.0 International License lizenziert.