Referenz zu Leistungsfunktionen

Auf dieser Seite finden Sie eine umfassende Referenz der Funktionen der Chrome-Entwicklertools zur Leistungsanalyse.

Unter Erste Schritte mit der Analyse der Laufzeitleistung finden Sie eine Anleitung zum Analysieren einer mit den Chrome-Entwicklertools verbessern.

Rekordleistung

Sie können die Laufzeit- oder Ladeleistung aufzeichnen.

Laufzeitleistung aufzeichnen

Zeichnen Sie die Laufzeitleistung auf, wenn Sie die Leistung einer Seite analysieren möchten, während sie ausgeführt wird, nicht geladen werden.

1. Rufen Sie die Seite auf, die Sie analysieren möchten.
2. Klicken Sie in den Entwicklertools auf den Tab Leistung.

3. Klicken Sie auf Aufzeichnen .

   

4. Interagieren Sie mit der Seite. In den Entwicklertools werden alle Seitenaktivitäten erfasst, die aufgrund der Interaktionen.

5. Klicken Sie noch einmal auf Aufzeichnen oder klicken Sie auf Beenden, um die Aufzeichnung zu beenden.

Ladeleistung aufzeichnen

Erfassen Sie die Ladeleistung, wenn Sie die Leistung einer Seite beim Laden analysieren möchten, ausgeführt werden soll.

1. Rufen Sie die Seite auf, die Sie analysieren möchten.
2. Öffnen Sie in den Entwicklertools den Bereich Leistung.

3. Klicken Sie auf Profilerstellung starten und Seite aktualisieren. Zuerst wird in den Entwicklertools about:blank aufgerufen, um alle verbleibenden Screenshots und Traces zu löschen. Dann klicken Sie auf „Entwicklertools“. zeichnet Leistungsmesswerte auf, während die Seite aktualisiert wird. Die Aufzeichnung wird dann automatisch beendet. einige Sekunden nach Abschluss des Ladevorgangs.

   

In den Entwicklertools wird automatisch der Teil der Aufzeichnung herangezoomt, in dem die Aktivität stattgefunden hat.

In diesem Beispiel wird im Bereich Leistung die Aktivität beim Seitenaufbau angezeigt.

Screenshots während der Aufnahme erstellen

Klicken Sie das Kästchen Screenshots an, um während der Aufnahme von jedem Frame einen Screenshot zu erstellen.

Informationen zur Interaktion mit Screenshots finden Sie unter Screenshot ansehen.

Automatische Speicherbereinigung während der Aufzeichnung erzwingen

Klicken Sie während des Aufzeichnens einer Seite auf Collect Garbage (Automatische Speicherbereinigung). mop, um die automatische Speicherbereinigung zu erzwingen.

Aufnahmeeinstellungen anzeigen

Klicken Sie auf Aufnahmeeinstellungen. bis werden mehr Einstellungen zur Erfassung von Leistungsaufzeichnungen in den Entwicklertools angezeigt.

JavaScript-Beispiele deaktivieren

Standardmäßig zeigt der Main-Track einer Aufzeichnung detaillierte Aufrufstacks von JavaScript an Funktionen, die während der Aufzeichnung aufgerufen wurden. So deaktivieren Sie diese Aufrufstacks:

1. Öffnen Sie das Menü Aufnahmeeinstellungen . Weitere Informationen finden Sie unter Aufnahmeeinstellungen anzeigen.
2. Aktivieren Sie das Kontrollkästchen JavaScript-Beispiele deaktivieren.
3. Zeichnen Sie die Seite auf.

Die folgenden Screenshots zeigen den Unterschied zwischen der Deaktivierung und Aktivierung von JavaScript-Beispielen. Die Die Hauptspur der Aufzeichnung ist viel kürzer, wenn Sampling deaktiviert ist, da hier alle JavaScript-Aufrufstacks an.

Dieses Beispiel zeigt eine Aufnahme mit deaktivierten JS-Beispielen.

Dieses Beispiel zeigt eine Aufnahme mit aktivierten JS-Beispielen.

Netzwerk während der Aufnahme drosseln

So drosseln Sie das Netzwerk während der Aufzeichnung:

1. Öffnen Sie das Menü Aufnahmeeinstellungen . Weitere Informationen finden Sie unter Aufnahmeeinstellungen anzeigen.
2. Legen Sie für Netzwerk die ausgewählte Drosselungsstufe fest.

CPU während der Aufzeichnung drosseln

So drosseln Sie die CPU während der Aufzeichnung:

1. Öffnen Sie das Menü Aufnahmeeinstellungen . Weitere Informationen finden Sie unter Aufnahmeeinstellungen anzeigen.
2. Legen Sie für CPU die ausgewählte Drosselungsstufe fest.

Die Drosselung hängt von den Fähigkeiten Ihres Computers ab. Beispiel: Die Option 2-fache Verlangsamung arbeitet Ihre CPU doppelt so schnell wie sonst üblich. Entwicklertools können die CPUs nicht wirklich simulieren von Mobilgeräten, da sich die Architektur von Mobilgeräten stark von der der Desktop-Computer und Laptops.

CSS-Selektorstatistiken aktivieren

So rufen Sie die Statistiken Ihrer CSS-Regelselektoren bei lang andauernden Ereignissen vom Typ Stil neu berechnen auf:

1. Öffnen Sie das Menü Aufnahmeeinstellungen . Weitere Informationen finden Sie unter Aufnahmeeinstellungen anzeigen.
2. Klicken Sie das Kästchen CSS-Selektorstatistiken aktivieren an.

Weitere Informationen finden Sie unter Leistung von CSS-Selektoren bei Ereignissen der Funktion „Stil neu berechnen“ analysieren.

Erweiterte Paint-Instrumentierung aktivieren

So rufen Sie die detaillierte Paint-Instrumentierung auf:

1. Öffnen Sie das Menü Aufnahmeeinstellungen . Weitere Informationen finden Sie unter Aufnahmeeinstellungen anzeigen.
2. Klicken Sie das Kästchen Erweiterte Paint-Instrumentierung aktivieren an.

Informationen zum Interagieren mit Farbinformationen finden Sie unter Ebenen ansehen und Farbe ansehen Profiler

Hardware-Nebenläufigkeit emulieren

Wenn Sie die Anwendungsleistung mit einer unterschiedlichen Anzahl von Prozessorkernen testen möchten, können Sie den vom Attribut navigator.hardwareConcurrency gemeldeten Wert konfigurieren. Einige Anwendungen verwenden diese Eigenschaft, um den Grad der Parallelität ihrer Anwendung zu steuern, z. B. um die Größe des pthread-Pools von Emscripten zu steuern.

So emulieren Sie Hardware-Nebenläufigkeit:

1. Öffnen Sie das Menü Aufnahmeeinstellungen . Weitere Informationen finden Sie unter Aufnahmeeinstellungen anzeigen.
2. Klicken Sie das Kästchen Hardware-Nebenläufigkeit an und legen Sie im Eingabefeld die Anzahl der Kerne fest.

In den Entwicklertools wird neben dem Tab Leistung ein Warnsymbol angezeigt, um dich darauf hinzuweisen, dass die Emulation der Nebenläufigkeit von Hardware aktiviert ist.

Wenn Sie den Standardwert 10 wiederherstellen möchten, klicken Sie auf die Schaltfläche Rückgängig machen .

Aufzeichnungen speichern

Klicken Sie zum Speichern einer Aufzeichnung mit der rechten Maustaste und wählen Sie Profil speichern aus.

Aufnahme laden

Um eine Aufnahme zu laden, klicken Sie mit der rechten Maustaste und wählen Sie Profil laden aus.

Vorherige Aufnahme löschen

Tippe nach dem Erstellen einer Aufnahme auf Aufzeichnung löschen. um die Aufzeichnung im Bereich Leistung zu löschen.

Leistungsaufzeichnung analysieren

Nachdem Sie die Laufzeitleistung oder die Lastleistung aufgezeichnet haben, wird die Leistung enthält das Steuerfeld viele Daten zur Leistungsanalyse.

Navigation durch die Aufzeichnung

Sie können einen Teil der Aufzeichnung auswählen, durch ein langes Flame-Diagramm scrollen, heran- und herauszoomen und mithilfe von Navigationspfaden zwischen Zoomstufen wechseln, um sich die Leistungsaufzeichnung genauer anzusehen.

Teil der Aufzeichnung auswählen

Unter der Aktionsleiste im Bereich Leistung und oben in der Aufzeichnung sehen Sie den Bereich Zeitachsenübersicht mit den Diagrammen CPU und NET.

Wenn Sie einen Teil einer Aufzeichnung auswählen möchten, halten Sie die Maustaste gedrückt und ziehen Sie sie nach links oder rechts über die Zeitachsenübersicht.

So wählen Sie einen Teil mit der Tastatur aus:

1. Fokus auf den Haupt-Track oder einen seiner Nachbarn verschieben
2. Mit den Tasten W, A, S und D können Sie heran-, nach links, herauszoomen und nach rechts verschieben.

So wählst du einen Teil mit einem Touchpad aus:

1. Bewegen Sie den Mauszeiger auf den Abschnitt Zeitachsenübersicht oder einen der Tracks (Main und seine Nachbarn).
2. Wischen Sie mit zwei Fingern nach oben, um herauszuzoomen, wischen Sie nach links, um sich nach links zu bewegen, wischen Sie nach unten, um heranzuzoomen, und Wischen Sie nach rechts, um sich nach rechts zu bewegen.

Navigationspfade erstellen und zwischen Zoomstufen wechseln

In der Zeitachsenübersicht können Sie mehrere verschachtelte Navigationspfade nacheinander erstellen, die Zoomstufen erhöhen und dann zur ausgewählten Stufe springen.

So erstellen und verwenden Sie Navigationspfade:

1. Wählen Sie in der Zeitachsenübersicht einen Teil der Aufzeichnung aus.
2. Bewegen Sie den Mauszeiger auf die Auswahl und klicken Sie auf die Schaltfläche N ms zoom_in. Die Auswahl wird erweitert und füllt die Zeitachsenübersicht aus. Über der Zeitachsenübersicht wird eine Kette von Navigationspfaden erstellt.
3. Wiederholen Sie die vorherigen beiden Schritte, um einen weiteren verschachtelten Navigationspfad zu erstellen. Sie können Navigationspfade weiter verschachteln, solange der Auswahlbereich größer als 5 Millisekunden ist.
4. Wenn Sie zu einer ausgewählten Zoomstufe wechseln möchten, klicken Sie oben in der Zeitachsenübersicht auf den entsprechenden Navigationspfad in der Kette.

In einem langen Flame-Diagramm scrollen

Wenn Sie durch ein langes Flame-Diagramm im Haupt-Track oder in einem seiner Nachbarn scrollen möchten, klicken Sie auf das Diagramm und halten Sie es gedrückt. Ziehen Sie es dann in eine beliebige Richtung, bis das Gesuchte erscheint.

Aktivitäten suchen

Drücken Sie unten im Bereich Leistung, um ein Suchfeld zu öffnen:

• macOS: Befehlstaste + F
• Windows, Linux: Strg + F

In diesem Beispiel sehen Sie im Suchfeld unten einen regulären Ausdruck, mit dem alle Aktivitäten gefunden werden, die mit E beginnen.

So wechseln Sie die Aktivitäten durch, die Ihrer Abfrage entsprechen:

• Klicken Sie auf die Schaltflächen expand_less Zurück oder expand_less Weiter.
• Drücken Sie Umschalttaste + Eingabetaste, um die vorherige zu markieren, oder die Eingabetaste, um die nächste auszuwählen.

Im Steuerfeld Leistung wird eine Kurzinfo über die im Suchfeld ausgewählte Aktivität angezeigt.

So ändern Sie Abfrageeinstellungen:

• Klicken Sie auf match_case Groß-/Kleinschreibung beachten, damit bei der Suchanfrage die Groß-/Kleinschreibung berücksichtigt wird.
• Klicken Sie auf regular_expression Regulärer Ausdruck, um einen regulären Ausdruck in Ihrer Abfrage zu verwenden.

Klicken Sie auf Abbrechen, um das Suchfeld auszublenden.

Titelreihenfolge ändern und Titel ausblenden

Um den Leistungs-Trace übersichtlicher zu gestalten, können Sie im Track-Konfigurationsmodus die Reihenfolge der Tracks ändern und irrelevante Tracks ausblenden.

So verschieben und blenden Sie Tracks aus:

1. Klicken Sie mit der rechten Maustaste auf einen Track-Namen und wählen Sie Tracks konfigurieren aus, um den Konfigurationsmodus aufzurufen.
2. Klicken Sie auf arrow_upward nach oben oder arrow_downward, um einen Track nach oben oder unten zu verschieben. Klicken Sie auf visibility_off , um es auszublenden.
3. Klicken Sie abschließend unten auf Konfiguration von Tracks abschließen, um den Konfigurationsmodus zu beenden.

Sehen Sie sich das Video an, um diesen Workflow in Aktion zu sehen.

Im Steuerfeld Leistung wird die Track-Konfiguration für neue Traces gespeichert, jedoch nicht für die nächsten Entwicklertools-Sitzungen.

Aktivitäten im Hauptthread ansehen

Verwenden Sie den Haupt-Track, um sich die Aktivitäten im Hauptthread der Seite anzusehen.

Wenn Sie auf ein Ereignis klicken, werden auf dem Tab Zusammenfassung weitere Informationen dazu angezeigt. Im Steuerfeld Leistung wird das ausgewählte Ereignis blau dargestellt.

Dieses Beispiel enthält weitere Informationen zum Ereignis get-Funktionsaufruf auf dem Tab Zusammenfassung.

Flame-Diagramm lesen

Der Bereich Leistung stellt die Hauptthreadaktivität in einem Flame-Diagramm dar. Die X-Achse stellt die Aufzeichnung im Zeitverlauf dar. Die Y-Achse stellt den Aufrufstack dar. Die übergeordneten Ereignisse verursachen die unten aufgeführten Ereignisse.

Dieses Beispiel zeigt ein Flame-Diagramm im Main-Track. Ein click-Ereignis hat einen anonymen Funktionsaufruf ausgelöst. Diese Funktion heißt ihrerseits onEndpointClick_, heißt handleClick_, usw.

Im Steuerfeld Leistung werden Skripts zufällige Farben zugewiesen, um das Flame-Diagramm aufzuschlüsseln und die Lesbarkeit zu verbessern. Im Beispiel oben sind Funktionsaufrufe von einem Skript hellblau dargestellt. Anrufe von einem anderen Skript werden hellrosa dargestellt. Ein dunkleres Gelb steht für Scripting-Aktivität und das lilafarbene für die Rendering-Aktivität. Diese dunkelgelben und lilafarbenen Ereignisse sind in allen Aufnahmen einheitlich.

Lange Aufgaben sind ebenfalls hervorgehoben mit einem roten Dreieck und der Teil über 50 Millisekunden ist rot schattiert:

In diesem Beispiel hat die Aufgabe mehr als 400 Millisekunden gedauert. Daher ist der Teil, der die letzten 350 Millisekunden darstellt, rot schattiert, die ersten 50 Millisekunden jedoch nicht.

Außerdem enthält der Main-Track Informationen zu CPU-Profilen, die mit den Konsolenfunktionen profile() und profileEnd() gestartet und beendet wurden.

Informationen zum Ausblenden des detaillierten Flame-Diagramms der JavaScript-Aufrufe finden Sie unter JavaScript-Beispiele deaktivieren. Wenn JS-Beispiele deaktiviert sind, werden nur übergeordnete Ereignisse wie Event (click) und Function Call angezeigt.

Ereignisinitiatoren verfolgen

Im Haupt-Track können Pfeile angezeigt werden, die die folgenden Initiatoren und die von ihnen verursachten Ereignisse verbinden:

• Entwertung von Stil oder Layout -> Stile neu berechnen oder Layout
• Animationsframe anfordern -> Animationsframe ausgelöst
• Callback bei Inaktivität anfordern -> Rückruf bei Inaktivität auslösen
• Timer installieren -> Timer ausgelöst
• WebSocket erstellen -> Senden... und WebSocket-Handshake erhalten oder WebSocket löschen

Wenn Sie die Pfeile sehen möchten, suchen Sie entweder einen Initiator oder das Ereignis, das er verursacht hat, im Flame-Diagramm und wählen Sie es aus.

Wenn der Tab „Zusammenfassung“ ausgewählt ist, werden für die Initiatoren die Links Initiator für und für die von ihnen verursachten Ereignisse Initiiert von angezeigt. Klicken Sie darauf, um zwischen den entsprechenden Ereignissen zu wechseln.

Funktionen und ihre untergeordneten Elemente im Flame-Diagramm ausblenden

Um das Flame-Diagramm im Main-Thread aufzuräumen, können Sie ausgewählte Funktionen oder deren untergeordnete Funktionen ausblenden:

1. Klicken Sie im Haupt-Track mit der rechten Maustaste auf eine Funktion und wählen Sie eine der folgenden Optionen aus oder drücken Sie die entsprechende Tastenkombination:

   • Funktion ausblenden (H)
   • Untergeordnete ausblenden (C)
   • Wiederkehrende untergeordnete Elemente ausblenden (R)
   • Untergeordnete Elemente zurücksetzen (U)
   • Trace zurücksetzen (T)
   • Skript hinzufügen, um die Liste zu ignorieren (I)

   

   Neben dem Funktionsnamen mit ausgeblendeten untergeordneten Elementen wird die Drop-down-Schaltfläche arrow_drop_down angezeigt.

2. Um die Anzahl der ausgeblendeten untergeordneten Elemente zu sehen, bewegen Sie den Mauszeiger auf das Drop-down-Menü arrow_drop_down.

   

3. Um eine Funktion mit ausgeblendeten untergeordneten Elementen oder dem gesamten Flame-Diagramm zurückzusetzen, wählen Sie die Funktion aus und drücken Sie U oder klicken Sie mit der rechten Maustaste auf eine beliebige Funktion und wählen Sie Trace zurücksetzen aus.

Skripts im Flame-Diagramm ignorieren

Wenn Sie der Liste zu ignorierender Skripts ein Skript hinzufügen möchten, klicken Sie mit der rechten Maustaste auf ein Skript im Diagramm und wählen Sie Skript zur Ignorieren-Liste hinzufügen aus.

Im Diagramm werden ignorierte Skripts minimiert, als Auf Ignorierliste markiert und unter Einstellungen Einstellungen > den Regeln für benutzerdefinierte Ausschlüsse hinzugefügt. Ignorierliste: Ignorierte Skripts werden gespeichert, bis Sie sie entweder aus dem Trace oder aus den benutzerdefinierten Ausschlüssen entfernen.

Aktivitäten in einer Tabelle ansehen

Nach dem Aufzeichnen einer Seite müssen Sie sich bei der Analyse von Aktivitäten nicht ausschließlich auf den Haupt-Track verlassen. Die Entwicklertools bieten außerdem drei tabellarische Ansichten für die Analyse von Aktivitäten. Jede Ansicht zeigt Ihnen eine andere Perspektive auf die Aktivitäten:

• Wenn Sie die Hauptaktivitäten anzeigen möchten, die die meiste Arbeit verursachen, verwenden Sie die Aufrufstruktur. .
• Wenn Sie die Aktivitäten anzeigen möchten, bei denen Sie die meiste Zeit direkt verbracht haben, verwenden Sie das Tab Bottom-up:
• Wenn Sie die Aktivitäten in der Reihenfolge anzeigen möchten, in der sie während der Aufzeichnung aufgetreten sind, verwenden Sie Tab Ereignisprotokoll.

Damit Sie schneller finden, wonach Sie suchen, befinden sich auf allen drei Tabs neben der Filterleiste Schaltflächen für die erweiterte Filterung:

• match_case Groß-/Kleinschreibung beachten:
• regular_expression – Regulärer Ausdruck:
• match_word Sucht nach einem ganzen Wort.

Jede tabellarische Ansicht im Steuerfeld Leistung enthält Links für Aktivitäten wie Funktionsaufrufe. Um Sie bei der Fehlerbehebung zu unterstützen, sucht die Entwicklertools nach den entsprechenden Funktionsdeklarationen in den Quelldateien. Wenn die entsprechenden Quellzuordnungen vorhanden und aktiviert sind, findet die Entwicklertools automatisch die Originaldateien.

Klicken Sie im Bereich Quellen auf einen Link, um eine Quelldatei zu öffnen.

Stammaktivitäten

Nachfolgend finden Sie eine Erläuterung des Konzepts von Stammaktivitäten, das auf dem Tab Aufrufstruktur erwähnt wird. Tab Bottom-Up und Ereignisprotokoll

Stammaktivitäten sind solche, die den Browser zum Ausführen einer Aktion veranlassen. Wenn Sie beispielsweise auf eine löst der Browser eine Event-Aktivität als Root-Aktivität aus. Das Event kann dann einen Handler ausgeführt werden soll.

Im Flame-Diagramm des Haupt-Tracks befinden sich die Stammaktivitäten oben. Im Gespräch Baumstruktur und Ereignisprotokoll haben, sind Stammaktivitäten die Elemente der obersten Ebene.

Ein Beispiel für Stammaktivitäten finden Sie auf dem Tab „Aufrufstruktur“.

Tab „Aufrufstruktur“

Auf dem Tab Aufrufstruktur sehen Sie, welche Stammaktivitäten den größten Aufwand verursachen.

Auf dem Tab Anrufstruktur werden nur Aktivitäten während des ausgewählten Teils der Aufzeichnung angezeigt. Weitere Informationen finden Sie unter Wählen Sie einen Teil einer Aufnahme aus, um zu erfahren, wie Sie Teile auswählen.

In diesem Beispiel sind die Elemente der obersten Ebene in der Spalte Activity, z. B. Event, Paint und Composite Layers sind Stammaktivitäten. Die Verschachtelung stellt den Aufrufstack dar. In In diesem Beispiel hat Event die Function Call verursacht, was button.addEventListener verursacht hat, was b verursacht hat, und so weiter.

Die Selbstzeit stellt die Zeit dar, die direkt bei dieser Aktivität verbracht wurde. Gesamtzeit steht für den Wert die mit dieser Aktivität oder einem ihrer Kinder verbracht wird.

Klicken Sie auf Selbstzeit, Gesamtzeit oder Aktivität, um die Tabelle nach dieser Spalte zu sortieren.

Mit dem Feld Filter können Sie Ereignisse nach Aktivitätsnamen filtern.

Standardmäßig ist das Menü Gruppierung auf Keine Gruppierung festgelegt. Sortieren Sie die Elemente mithilfe des Menüs Gruppierung. Aktivitätstabelle basierend auf verschiedenen Kriterien berechnet.

Klicken Sie auf Hochgradigsten Stack anzeigen. , um rechts neben der Tabelle Aktivität eine weitere Tabelle einzublenden. Klicken Sie auf eine Aktivität, Tabelle mit dem umfangreichsten Stack. In der Tabelle Häufigster Stack sehen Sie, welche untergeordneten Elemente der ausgewählten die längste Ausführungszeit.

Der Bottom-up-Tab

Auf dem Tab Bottom-Up können Sie sehen, welche Aktivitäten insgesamt die meiste Zeit in Anspruch genommen haben.

Auf dem Tab Bottom-up werden nur Aktivitäten angezeigt, die während des ausgewählten Teils der Aufzeichnung stattfinden. Weitere Informationen finden Sie unter Wählen Sie einen Teil einer Aufnahme aus, um zu erfahren, wie Sie Teile auswählen.

Im Flame-Diagramm Main in diesem Beispiel sehen Sie, dass fast alle für die Ausführung der drei Aufrufe von wait() aufgewendet. Dementsprechend ist die Top-Aktivität in der Der Tab Bottom-up ist wait. Im Flame-Diagramm ist das Gelb unter dem wait-Aufrufe sind Tausende von Minor GC-Aufrufen. Dementsprechend können Sie in der Spalte Bottom-up ist die nächst teurere Aktivität Minor GC.

Die Spalte Selbstzeit stellt die zusammengefasste Zeit dar, die direkt bei dieser Aktivität über alle aller Vorkommnisse.

Die Spalte Gesamtzeit stellt die zusammengefasste Zeit dar, die bei dieser Aktivität oder in einem ihrer untergeordneten Elemente verbracht wurde.

Tab „Ereignisprotokoll“

Auf dem Tab Ereignisprotokoll sehen Sie die Aktivitäten in der Reihenfolge ihres Auftretens während Aufzeichnung.

Auf dem Tab Ereignisprotokoll werden nur Aktivitäten während des ausgewählten Teils der Aufzeichnung angezeigt. Weitere Informationen finden Sie unter Wählen Sie einen Teil einer Aufnahme aus, um zu erfahren, wie Sie Teile auswählen.

Die Spalte Startzeit stellt den Punkt dar, an dem diese Aktivität begann, relativ zum Start. der Aufzeichnung. Die Startzeit von „1573.0 ms“ für das ausgewählte Element in diesem Beispiel bedeutet, dass die Aktivität 1.573 ms nach Beginn der Aufzeichnung gestartet wurde.

Die Spalte Selbstzeit stellt die Zeit dar, die direkt bei dieser Aktivität verbracht wurde.

Die Spalten Gesamtzeit stellen die Zeit dar, die direkt bei dieser Aktivität oder bei einer ihrer Aktivitäten verbracht wurde. Kinder.

Klicken Sie auf Start, Selbstzeit oder Gesamtzeit, um die Tabelle nach dieser Spalte zu sortieren.

Mit dem Feld Filter können Sie Aktivitäten nach Namen filtern.

Verwenden Sie das Menü Zeitrahmen, um alle Aktivitäten herauszufiltern, die weniger als 1 ms oder 15 ms gedauert haben. Standardmäßig Das Menü Dauer ist auf Alle eingestellt, d. h., alle Aktivitäten werden angezeigt.

Deaktivieren Sie die Kästchen Laden, Skripting, Rendering oder Malen, um alle herauszufiltern. Aktivitäten aus diesen Kategorien.

Zeitangaben aufrufen

Sehen Sie sich im Track Timings wichtige Markierungen an, z. B.:

• First Paint (FP)
• First Contentful Paint (FCP)
• Largest Contentful Paint (LCP)
• DOMContentLoaded-Ereignis (DCL)
• Onload-Ereignis (L)
• Ihre benutzerdefinierten performance.mark()-Aufrufe. Eine einzelne Markierung mit Kurzinfo wird unten bei 813, 44 ms mit der Bezeichnung Ausführung von JavaScript wird gestartet angezeigt.
• Ihre benutzerdefinierten performance.measure()-Aufrufe. Unten ist ein gelber Bereich mit der Bezeichnung Langsame Interaktion zu sehen.

Wählen Sie eine Markierung aus, um auf dem Tab Zusammenfassung weitere Details zu sehen, einschließlich Zeitstempel, Gesamtzeit, Eigenzeit und des detail-Objekts.

Interaktionen ansehen

Sehen Sie sich die Nutzerinteraktionen im Track Interaktionen an, um potenzielle Probleme bei der Reaktionszeit zu ermitteln.

So rufen Sie Interaktionen auf:

1. Öffnen Sie die Entwicklertools, zum Beispiel auf dieser Demoseite.
2. Öffnen Sie den Bereich Leistung und starten Sie eine Aufzeichnung.
3. Klicken Sie auf ein Element (Kaffee) und beenden Sie die Aufnahme.
4. Suchen Sie in der Zeitachse nach dem Track Interaktionen.

In diesem Beispiel zeigt der Track Interactions die Interaktion Pointer. Interaktionen haben Wellen, die Eingabe- und Präsentationsverzögerungen während der Verarbeitungszeitgrenzen anzeigen. Bewegen Sie den Mauszeiger auf eine Interaktion, um eine Kurzinfo mit Eingabe-, Verarbeitungszeit und Präsentationsverzögerung zu sehen.

Im Track Interactions (Interaktionen) werden auf dem Tab Summary und in einer Kurzinfo auch Warnungen für Interaction to Next Paint (INP) für Interaktionen angezeigt, die länger als 200 Millisekunden dauern:

Im Track Interaktionen werden Interaktionen über 200 Millisekunden mit einem roten Dreieck in der oberen rechten Ecke gekennzeichnet.

GPU-Aktivität ansehen

Sehen Sie sich die GPU-Aktivität im Abschnitt GPU an.

Rasteraktivität ansehen

Sehen Sie sich die Rasteraktivität im Abschnitt Thread-Pool an.

Bilder pro Sekunde (fps) analysieren

Die Entwicklertools bieten zahlreiche Möglichkeiten zum Analysieren von Frames pro Sekunde:

• Im Bereich Frames können Sie sehen, wie lange ein bestimmter Frame gedauert hat.
• Mit dem fps-Messtool können Sie die Framerate in Echtzeit schätzen, während die Seite ausgeführt wird. Siehe Bilder pro Sekunde anzeigen in Echtzeit mit dem fps-Messtool.

Im Abschnitt „Frames“

Im Bereich Frames sehen Sie genau, wie lange ein bestimmter Frame gedauert hat.

Bewegen Sie den Mauszeiger auf einen Frame, um eine Kurzinfo mit weiteren Informationen aufzurufen.

In diesem Beispiel wird eine Kurzinfo angezeigt, wenn Sie den Mauszeiger auf einen Frame bewegen.

Im Bereich Frames können vier Arten von Frames angezeigt werden:

1. Inaktiver Frame (weiß): Keine Änderungen
2. Frame (grün): Wird wie erwartet und rechtzeitig gerendert.
3. Teilweise dargestellter Frame (gelb mit dünner, breit gestrichelter Strichlinie): Chrome hat versucht, zumindest einige visuelle Updates rechtzeitig zu rendern. Das ist beispielsweise der Fall, wenn die Arbeit des Hauptthreads des Renderer-Prozesses (Canvas-Animation) verspätet ist, der Compositor-Thread (Scrollen) aber im Zeitplan liegt.
4. Verworfener Rahmen (rot mit dicht durchgezogener Linie): Chrome kann den Frame nicht innerhalb eines angemessenen Zeitraums rendern.

In diesem Beispiel wird eine Kurzinfo angezeigt, wenn Sie den Mauszeiger auf einen teilweise dargestellten Frame bewegen.

Wenn Sie auf einen Frame klicken, werden auf dem Tab Zusammenfassung weitere Informationen zu diesem Frame angezeigt. DevTools umrandet den ausgewählten Rahmen blau.

Netzwerkanfragen ansehen

Maximieren Sie den Bereich Netzwerk, um eine Vermittlungsabfolge von Netzwerkanfragen zu sehen, die während der Leistungsaufzeichnung aufgetreten sind.

Neben dem Namen des Netzwerk-Tracks wird eine Legende mit farbcodierten Anfragetypen angezeigt.

Anfragen, die das Rendering blockieren, sind oben rechts mit einem roten Dreieck gekennzeichnet.

Bewegen Sie den Mauszeiger auf eine Anfrage, um eine Kurzinfo mit folgenden Informationen zu sehen:

• Die URL der Anfrage und die Gesamtzeit, die für ihre Ausführung benötigt wurde.
• Priorität oder eine Prioritätsänderung, z. B. Medium -> High.
• Gibt an, ob die Anfrage Render blocking ist oder nicht.
• Eine Aufschlüsselung der Zeitangaben für Anfragen, die weiter unten beschrieben wird.

Wenn Sie auf eine Anfrage klicken, wird im Network-Track vom Initiator ein Pfeil zur Anfrage gezeichnet.

Darüber hinaus enthält der Bereich Leistung den Tab Zusammenfassung mit weiteren Informationen zur Anfrage, einschließlich, aber nicht beschränkt auf die Felder Anfängliche Priorität und (endgültige) Priorität. Bei unterschiedlichen Werten hat sich die Abrufpriorität der Anfrage während der Aufzeichnung geändert. Weitere Informationen finden Sie unter Optimieren des Ladens von Ressourcen mit der Fetch Priority API.

Auf dem Tab Zusammenfassung finden Sie ebenfalls eine Aufschlüsselung des Zeitplans der Anfrage.

Die Anfrage für www.google.com wird durch eine Linie auf der linken Seite (|–), einen Balken in der Mitte mit einem dunklen und einen hellen Teil und eine Linie auf der rechten Seite (–|) dargestellt.

Eine weitere Aufschlüsselung der Zeitangaben finden Sie auf dem Tab Netzwerk. Klicken Sie auf dem Tab Zusammenfassung mit der rechten Maustaste auf die Anfrage im Track Netzwerk oder auf die entsprechende URL und klicken Sie dann auf Im Steuerfeld „Netzwerk“ anzeigen. In den Entwicklertools wird der Bereich Network (Netzwerk) geöffnet, in dem die entsprechende Anfrage ausgewählt wird. Öffnen Sie den Tab Timing.

So werden diese beiden Aufschlüsselungen einander zugeordnet:

• Die linke Zeile (|–) entspricht dem gesamten Wert bis einschließlich der Connection start-Ereignisgruppe. Mit anderen Worten: Es sind alle Vorgänge vor Request Sent.
• Der helle Teil des Balkens ist Request sent und Waiting for server response.
• Der dunkle Teil des Balkens ist Content download.
• Die rechte Zeile (–|) enthält die Zeit, die auf den Hauptthread gewartet wurde. Das Netzwerk > Auf dem Tab Zeitpunkt wird dies nicht angezeigt.

Arbeitsspeichermesswerte ansehen

Klicken Sie das Kästchen Speicher an, um die Speichermesswerte der letzten Aufnahme aufzurufen.

In den Entwicklertools wird über dem Tab Zusammenfassung das neue Diagramm Arbeitsspeicher angezeigt. Außerdem finden Sie unten ein neues Diagramm, das NET-Diagramm namens HEAP. Das HEAP-Diagramm bietet die gleichen Informationen wie das JS Heap im Diagramm Arbeitsspeicher.

Dieses Beispiel zeigt Speichermesswerte über dem Tab Zusammenfassung.

Die farbigen Linien auf dem Diagramm werden den farbigen Kästchen über dem Diagramm zugeordnet. Deaktivieren Sie ein Kontrollkästchen, um um diese Kategorie aus dem Diagramm auszublenden.

Im Diagramm wird nur die ausgewählte Region für die Aufnahme angezeigt. Im vorherigen Beispiel zeigt das Diagramm Arbeitsspeicher nur die Arbeitsspeichernutzung am Anfang der Aufzeichnung an, bis etwa 1.000 ms.

Dauer eines Ausschnitts einer Aufnahme ansehen

Für die Analyse eines Bereichs wie Netzwerk oder Hauptbereich benötigen Sie manchmal eine genauere Schätzung des wie lange bestimmte Ereignisse gedauert haben. Umschalttaste gedrückt halten, klicken und halten und nach links oder rechts ziehen, um einen Teil auszuwählen der Aufzeichnung. Unten in Ihrer Auswahl wird in den Entwicklertools angezeigt, wie lange dieser Teil gedauert hat.

In diesem Beispiel gibt der Zeitstempel 488.53ms am unteren Rand des ausgewählten Abschnitts an, wie lange wie viel Zeit gedauert hat.

Screenshot ansehen

Informationen zum Aktivieren von Screenshots finden Sie unter Screenshots während der Aufzeichnung aufnehmen.

Bewegen Sie den Mauszeiger auf die Zeitachsenübersicht, um einen Screenshot der Seite zu sehen, die zu diesem Zeitpunkt angezeigt wurde. Aufzeichnung. Unter Zeitachsenübersicht finden Sie die Diagramme CPU, FPS und NET.

Sie können auch Screenshots aufrufen, indem Sie im Bereich Frames auf einen Frame klicken. DevTools zeigt eine kleine Version des Screenshots auf dem Tab Zusammenfassung.

Dieses Beispiel zeigt den Screenshot für den Frame 195.5ms auf dem Tab Zusammenfassung, wenn Sie im Bereich Frames darauf klicken.

Klicken Sie auf dem Tab Zusammenfassung auf die Miniaturansicht, um den Screenshot zu vergrößern.

In diesem Beispiel sehen Sie einen vergrößerten Screenshot, nachdem Sie auf dem Tab Zusammenfassung auf die Miniaturansicht geklickt haben.

Ebeneninformationen ansehen

So zeigen Sie erweiterte Ebeneninformationen zu einem Frame an:

1. Erweiterte Paint-Instrumentierung aktivieren
2. Wählen Sie im Abschnitt Frames einen Frame aus. In den Entwicklertools werden Informationen zu den Ebenen in der Neuer Tab Ebenen neben dem Tab Ereignisprotokoll.

Bewegen Sie den Mauszeiger auf eine Ebene, um sie im Diagramm hervorzuheben.

In diesem Beispiel wird die Ebene #39 hervorgehoben, wenn Sie den Mauszeiger darauf bewegen.

So verschieben Sie das Diagramm:

• Klicken Sie auf Schwenkmodus entlang der x- und y-Achse zu bewegen.
• Klicken Sie auf Drehenmodus. Zum Drehen entlang der Z-Achse an.
• Klicken Sie auf Transformation zurücksetzen . um das Diagramm an seine ursprüngliche Position zurückzusetzen.

Sehen Sie sich die Ebenenanalyse in Aktion an:

Paint-Profiler ansehen

So rufen Sie erweiterte Informationen zu einem Paint-Ereignis auf:

1. Erweiterte Paint-Instrumentierung aktivieren
2. Wählen Sie im Main-Track ein Paint-Ereignis aus.

Rendering-Leistung mit dem Tab „Rendering“ analysieren

Mit den Funktionen des Tabs Rendering können Sie die Rendering-Leistung der Seite visualisieren.

Öffnen Sie den Tab Rendering.

Mit dem FPS-Messtool Bilder pro Sekunde in Echtzeit ansehen

Die Statistiken für das Frame-Rendering sind ein Overlay, das oben rechts im Darstellungsbereich angezeigt wird. Sie erhalten eine Echtzeitschätzung der Framerate, während die Seite ausgeführt wird.

Siehe Frame-Rendering-Statistiken.

Paint-Blitze in Echtzeit ansehen

Verwenden Sie Paint-Flashing, um eine Echtzeitansicht aller Paint-Ereignisse auf der Seite zu erhalten.

Siehe Blinken von Farben.

Ein Overlay von Ebenen mit Ebenengrenzen ansehen

Verwenden Sie Ebenenrahmen, um ein Overlay aus Ebenengrenzen und Kacheln über der Seite zu sehen.

Weitere Informationen finden Sie unter Grenzen für Ebenen.

Probleme mit der Scrollleistung in Echtzeit erkennen

Verwenden Sie Probleme mit der Scroll-Leistung, um Elemente der Seite mit Ereignis-Listenern im Zusammenhang mit dem Scrollen zu identifizieren, die die Leistung der Seite beeinträchtigen können. In den Entwicklertools wird potenziell problematischen Elementen in Blaugrün.

Weitere Informationen finden Sie unter Probleme mit der Scrollleistung.