Referenz zu Leistungsfunktionen

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

Unter Laufzeitleistung analysieren finden Sie eine Anleitung zum Analysieren der Leistung einer Seite mit den Chrome-Entwicklertools.

Leistung aufzeichnen

Sie können die Laufzeit- oder Ladeleistung erfassen.

Laufzeitleistung erfassen

Erfassen Sie die Laufzeitleistung, wenn Sie die Leistung einer Seite während der Ausführung analysieren möchten, also nicht während des Ladevorgangs.

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

3. Klicken Sie auf Aufzeichnen .

   

4. Interagieren Sie mit der Seite. In DevTools werden alle Seitenaktivitäten aufgezeichnet, die auf Ihre Interaktionen zurückzuführen sind.

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

Ladeleistung erfassen

Erfassen Sie die Ladeleistung, wenn Sie die Leistung einer Seite während des Ladevorgangs analysieren möchten.

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 . In den DevTools wird zuerst about:blank aufgerufen, um alle verbleibenden Screenshots und Spuren zu löschen. Anschließend werden in den Entwicklertools Leistungsmesswerte erfasst, während die Seite neu geladen wird. Die Aufzeichnung wird dann einige Sekunden nach dem Ende des Ladevorgangs automatisch beendet.

   

In DevTools wird automatisch der Bereich der Aufzeichnung herangezoomt, in dem die meisten Aktivitäten stattgefunden haben.

In diesem Beispiel wird im Bereich Leistung die Aktivität während des Seitenaufbaus angezeigt.

Screenshots während der Aufzeichnung erstellen

Aktivieren Sie das Kästchen Screenshots, um während der Aufnahme einen Screenshot jedes Frames aufzunehmen.

Informationen zum Interagieren mit Screenshots

Automatische Speicherbereinigung während der Aufnahme erzwingen

Klicken Sie während der Aufzeichnung einer Seite auf Speicher bereinigen, um die automatische Speicherbereinigung zu erzwingen.

Aufnahmeeinstellungen anzeigen

Klicken Sie auf Aufnahmeeinstellungen , um weitere Einstellungen für die Leistungsaufzeichnung in DevTools aufzurufen.

JavaScript-Samples deaktivieren

Im Haupt-Track einer Aufnahme werden standardmäßig detaillierte Aufrufstacks von JavaScript-Funktionen angezeigt, die während der Aufzeichnung aufgerufen wurden. So deaktivieren Sie diese Aufrufstapel:

1. Öffnen Sie das Menü Aufnahmeeinstellungen . Weitere Informationen finden Sie unter Einstellungen für die Aufzeichnung von Serien.
2. Klicken Sie das Kästchen JavaScript-Samples deaktivieren an.
3. Machen Sie eine Aufnahme der Seite.

Die folgenden Screenshots zeigen den Unterschied zwischen dem Deaktivieren und Aktivieren von JavaScript-Beispielen. Der Haupt-Track der Aufzeichnung ist viel kürzer, wenn das Sampling deaktiviert ist, da alle JavaScript-Aufrufstacks weggelassen werden.

Dieses Beispiel zeigt eine Aufnahme mit deaktivierten JS-Beispielen.

Dieses Beispiel zeigt eine Aufnahme mit aktivierten JS-Stichproben.

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 Einstellungen für die Aufzeichnung von Serien.
2. Legen Sie für Netzwerk die gewünschte Drosselungsstufe fest.

CPU während der Aufnahme drosseln

So drosseln Sie die CPU während der Aufzeichnung:

1. Öffnen Sie das Menü Aufnahmeeinstellungen . Weitere Informationen finden Sie unter Einstellungen für die Aufzeichnung von Serien.
2. Legen Sie für CPU die gewünschte Drosselung fest.

Die Drosselung ist relativ zu den Fähigkeiten Ihres Computers. Mit der Option 2-fache Verlangsamung wird die CPU beispielsweise doppelt so langsam wie üblich betrieben. In DevTools können die CPUs von Mobilgeräten nicht wirklich simuliert werden, da sich die Architektur von Mobilgeräten stark von der von Desktop-Computern und Laptops unterscheidet.

CSS-Selektorstatistiken aktivieren

So rufen Sie die Statistiken Ihrer CSS-Regelselektoren während langwieriger Stil neu berechnen-Ereignisse auf:

1. Öffnen Sie das Menü Aufnahmeeinstellungen . Weitere Informationen finden Sie unter Einstellungen für die Aufzeichnung von Serien.
2. Setzen Sie ein Häkchen bei CSS-Selektorstatistiken aktivieren.

Weitere Informationen finden Sie unter Leistung von CSS-Selektoren bei „Recalculate Style“-Ereignissen analysieren.

Erweiterte Paint-Instrumentierung aktivieren

So rufen Sie detaillierte Informationen zur Paint-Instrumentierung auf:

1. Öffnen Sie das Menü Aufnahmeeinstellungen . Weitere Informationen finden Sie unter Einstellungen für die Aufzeichnung von Serien.
2. Klicken Sie das Kästchen Erweiterte Paint-Instrumentierung aktivieren an.

Informationen zur Interaktion mit den Malinformationen finden Sie unter Ebenen ansehen und Malprofiler ansehen.

Aufnahme speichern

Wenn Sie eine Aufnahme speichern möchten, klicken Sie mit der rechten Maustaste darauf und wählen Sie Profil speichern aus.

Aufnahme laden

Wenn Sie eine Aufnahme laden möchten, klicken Sie mit der rechten Maustaste und wählen Sie Profil laden aus.

Vorherige Aufnahme löschen

Drücken Sie nach einer Aufnahme auf Aufzeichnung löschen , um sie aus dem Bereich Leistung zu entfernen.

Leistungsaufzeichnung analysieren

Nachdem Sie die Laufzeitleistung oder die Ladeleistung erfasst haben, finden Sie im Bereich Leistung viele Daten zur Analyse der Leistung der letzten Aktion.

Aufzeichnung durchsuchen

Wenn Sie die Leistungsaufzeichnung genauer untersuchen möchten, können Sie einen Teil der Aufzeichnung auswählen, in einem langen Flammendiagramm scrollen, heran- und herauszoomen und mithilfe von Breadcrumbs zwischen den Zoomebenen wechseln.

Teil der Aufnahme auswählen

Unter der Aktionsleiste im Bereich Leistung und oben in der Aufzeichnung sehen Sie den Bereich Zeitachse – Übersicht mit den Diagrammen CPU und NET.

Wenn Sie einen Teil einer Aufnahme auswählen möchten, halten Sie die Maustaste gedrückt und ziehen Sie den Mauszeiger in der Zeitachsenübersicht nach links oder rechts.

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

1. Konzentrieren Sie sich auf den Haupt-Track oder einen der benachbarten Tracks.
2. Mit den Tasten W, A, S und D können Sie jeweils heranzoomen, nach links, herauszoomen und nach rechts gehen.

So wählen Sie einen Bereich mit dem Touchpad aus:

1. Bewegen Sie den Mauszeiger auf den Bereich Zeitachse – Übersicht oder auf einen der Tracks (Haupt und die benachbarten Tracks).
2. Wischen Sie mit zwei Fingern nach oben, um herauszuzoomen, nach links, um sich nach links zu bewegen, nach unten, um heranzuzoomen, und nach rechts, um sich nach rechts zu bewegen.

Breadcrumbs erstellen und zwischen Zoomstufen wechseln

In der Zeitachse können Sie mehrere verschachtelte Breadcrumbs nacheinander erstellen, die Zoomebenen erhöhen und dann frei zwischen den Zoomebenen wechseln.

So erstellen und verwenden Sie Breadcrumbs:

1. Wählen Sie auf der Zeitachse einen Abschnitt 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 maximiert, um die Zeitachsenübersicht zu füllen. Oben in der Übersicht der Zeitachse wird eine Kette von Breadcrumbs erstellt.
3. Wiederholen Sie die beiden vorherigen Schritte, um eine weitere verschachtelte Navigationsleiste zu erstellen. Sie können Breadcrumbs weiter verschachteln, solange der Auswahlbereich länger als 5 Millisekunden ist.
4. Wenn Sie zu einer bestimmten Zoomstufe springen möchten, klicken Sie oben in der Zeitachsenübersicht auf den entsprechenden Breadcrumb in der Kette.

Wenn Sie die untergeordneten Navigationspfade eines Navigationspfads entfernen möchten, klicken Sie mit der rechten Maustaste auf den übergeordneten Navigationspfad und wählen Sie Untergeordnete Navigationspfade entfernen aus.

In einem langen Flame-Diagramm scrollen

Wenn Sie in einem langen Flammendiagramm im Haupt-Track oder in einem der benachbarten Tracks scrollen möchten, klicken Sie und halten Sie die Maustaste gedrückt und ziehen Sie in eine beliebige Richtung, bis das gewünschte Element angezeigt wird.

Suchaktivitäten

Sie können in den Aktivitäten im Haupt- und im Netzwerk-Track suchen.

So öffnen Sie unten im Bereich Leistung ein Suchfeld:

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

In diesem Beispiel wird im Suchfeld unten ein regulärer Ausdruck verwendet, mit dem alle Aktivitäten gefunden werden, die mit E beginnen.

So wechseln Sie zwischen Aktivitäten, die mit Ihrer Suchanfrage übereinstimmen:

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

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

So ändern Sie die Abfrageeinstellungen:

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

Wenn Sie das Suchfeld ausblenden möchten, klicken Sie auf Abbrechen.

Reihenfolge der Titel ändern und Titel ausblenden

Um den Leistungsverlauf übersichtlicher zu gestalten, können Sie die Reihenfolge der Tracks ändern und irrelevante Tracks im Modus zur Trackkonfiguration ausblenden.

So verschiebst und blendest du Titel aus:

1. Klicken Sie mit der rechten Maustaste auf einen Titelnamen und wählen Sie Titel konfigurieren aus, um den Konfigurationsmodus aufzurufen.
2. Klicke auf den Pfeil nach oben oder den Pfeil nach unten, um einen Titel nach oben oder unten zu verschieben. Klicken Sie auf visibility_off, um sie auszublenden.
3. Wenn Sie fertig sind, klicken Sie unten auf Konfiguration der Tracks abschließen, um den Konfigurationsmodus zu verlassen.

Im Video sehen Sie diesen Workflow in Aktion.

Im Bereich Leistung wird die Track-Konfiguration für neue Protokolle gespeichert, aber nicht in den nächsten DevTools-Sitzungen.

Aktivität im Haupt-Thread ansehen

Im Track Haupt sehen Sie Aktivitäten, die im Hauptthread der Seite stattgefunden haben.

Klicken Sie auf ein Ereignis, um auf dem Tab Zusammenfassung weitere Informationen zu sehen. Im Bereich Leistung ist das ausgewählte Ereignis blau hervorgehoben.

In diesem Beispiel sind auf dem Tab Zusammenfassung weitere Informationen zum Ereignis „get-Funktionsaufruf“ zu sehen.

Flame-Diagramm auswerten

Im Bereich Leistung wird die Aktivität des Hauptthreads in einem Flammendiagramm dargestellt. Die X-Achse stellt die Aufnahme im Zeitverlauf dar. Die y-Achse stellt den Aufrufstack dar. Die Ereignisse oben verursachen die Ereignisse unten.

In diesem Beispiel ist ein Flammendiagramm im Haupt-Track zu sehen. Ein click-Ereignis hat einen anonymen Funktionsaufruf verursacht. Diese Funktion ruft wiederum onEndpointClick_ auf, die handleClick_ aufruft usw.

Im Bereich Leistung werden Scripts zufällige Farben zugewiesen, um das Flammendiagramm aufzulockern und übersichtlicher zu gestalten. Im vorherigen Beispiel sind Funktionsaufrufe aus einem Script hellblau hervorgehoben. Aufrufe aus einem anderen Script sind hellrosa. Das dunklere Gelb steht für Scripting-Aktivitäten und das lila Ereignis für Rendering-Aktivitäten. Diese dunkelgelben und lilafarbenen Ereignisse sind in allen Aufzeichnungen gleich.

Lange Aufgaben werden ebenfalls mit einem roten Dreieck hervorgehoben und der Teil, der länger als 50 Millisekunden dauert, ist rot eingefärbt:

In diesem Beispiel hat die Aufgabe mehr als 400 Millisekunden gedauert. Daher ist der Teil, der die letzten 350 Millisekunden darstellt, rot eingefärbt, während die ersten 50 Millisekunden nicht eingefärbt sind.

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

Wie Sie das detaillierte Flammendiagramm für JavaScript-Aufrufe ausblenden, erfahren Sie unter JavaScript-Samples deaktivieren. Wenn JS-Stichproben deaktiviert sind, sehen Sie nur die übergeordneten Ereignisse wie Event (click) und Function Call.

Ereignisauslöser erfassen

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

• Stil- oder Layoutfehler -> Stile neu berechnen oder Layout
• Animationsframe anfordern -> Animationsframe ausgelöst
• Inaktiven Callback anfordern -> Inaktiven Callback auslösen
• Timer installieren -> Timer ausgelöst
• WebSocket erstellen -> Senden… und WebSocket-Handshake empfangen oder WebSocket schließen

Wenn Sie die Pfeile sehen möchten, suchen Sie im Flammendiagramm nach einem Auslöser oder dem Ereignis, das er verursacht hat, und wählen Sie ihn aus.

Wenn diese Option ausgewählt ist, werden auf dem Tab „Zusammenfassung“ Links vom Typ Initiator für für Initiatoren und Von für die von ihnen verursachten Ereignisse angezeigt. Klicken Sie darauf, um zwischen den entsprechenden Ereignissen zu wechseln.

Funktionen und ihre untergeordneten Elemente im Flammendiagramm ausblenden

Wenn Sie das Flame-Diagramm im Haupt-Thread übersichtlicher gestalten möchten, können Sie ausgewählte Funktionen oder ihre untergeordneten 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 Elemente ausblenden (C)
   • Wiederkehrende untergeordnete Einträge ausblenden (R)
   • Untergeordnete Elemente zurücksetzen (U)
   • Trace zurücksetzen (T)
   • Script zur Ignorierliste hinzufügen (I)

   

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

2. Wenn Sie die Anzahl der ausgeblendeten untergeordneten Elemente sehen möchten, bewegen Sie den Mauszeiger auf die Drop-down-Schaltfläche arrow_drop_down.

   

3. Wenn Sie eine Funktion mit ausgeblendeten untergeordneten Elementen oder das gesamte Flame-Diagramm zurücksetzen möchten, wählen Sie die Funktion aus und drücken Sie die Taste U oder klicken Sie mit der rechten Maustaste auf eine beliebige Funktion und wählen Sie Spuren zurücksetzen aus.

Scripts im Flammendiagramm ignorieren

Wenn Sie ein Script zur Ignorierliste hinzufügen möchten, klicken Sie im Diagramm mit der rechten Maustaste auf ein Script und wählen Sie Script zur Ignorierliste hinzufügen aus.

Ignorierte Scripts werden im Diagramm minimiert, als In Ignorierliste gekennzeichnet und den Benutzerdefinierten Ausschlussregeln in den Einstellungen Einstellungen > Ignorierliste hinzugefügt. Ignorierte Scripts werden gespeichert, bis Sie sie entweder aus dem Trace oder aus den benutzerdefinierten Ausschlussregeln entfernen.

Aktivitäten in einer Tabelle ansehen

Nach der Aufzeichnung einer Seite müssen Sie sich nicht nur auf den Haupt-Track verlassen, um Aktivitäten zu analysieren. DevTools bietet außerdem drei Tabellenansichten zur Analyse von Aktivitäten. Jede Ansicht bietet eine andere Perspektive auf die Aktivitäten:

• Wenn Sie die Hauptaktivitäten sehen möchten, die den meisten Aufwand verursachen, verwenden Sie den Tab Aufrufablauf.
• Wenn Sie die Aktivitäten sehen möchten, auf die Sie die meiste Zeit direkt verwendet haben, verwenden Sie den Tab Bottom-Up.
• Wenn Sie die Aktivitäten in der Reihenfolge sehen möchten, in der sie während der Aufzeichnung aufgetreten sind, verwenden Sie den Tab Ereignisprotokoll.

Damit Sie das Gesuchte schneller finden, haben alle drei Tabs neben der Filterleiste Schaltflächen für erweiterte Filter:

• match_case Groß-/Kleinschreibung beachten
• regular_expression: Regulärer Ausdruck.
• match_word: Übereinstimmung mit ganzem Wort.

In jeder tabellarischen Ansicht im Bereich Leistung werden Links zu Aktivitäten wie Funktionsaufrufen angezeigt. Zur Unterstützung der Fehlerbehebung sucht DevTools die entsprechenden Funktionsdeklarationen in den Quelldateien. Wenn die entsprechenden Quellzuordnungen vorhanden und aktiviert sind, werden die Originaldateien in den DevTools automatisch gefunden.

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

Root-Aktivitäten

Im Folgenden wird das Konzept der Grundaktivitäten erläutert, das auf den Tabs Aufrufablauf, Bottom-Up und Ereignisprotokoll erwähnt wird.

Wurzelaktivitäten sind solche, die den Browser beanspruchen. Wenn Sie beispielsweise auf eine Seite klicken, löst der Browser eine Event-Aktivität als Stammaktivität aus. Dieser Event kann dann dazu führen, dass ein Handler ausgeführt wird.

Im Flammendiagramm des Haupt-Tracks befinden sich die Stammaktivitäten oben im Diagramm. Auf den Tabs Aufrufablauf und Ereignisprotokoll sind die Stammaktivitäten die Elemente der obersten Ebene.

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

Tab „Anrufabfolge“

Auf dem Tab Anrufbaum sehen Sie, welche übergeordneten Aktivitäten den größten Arbeitsaufwand verursachen.

Auf dem Tab Anrufbaum werden nur Aktivitäten während des ausgewählten Abschnitts der Aufnahme angezeigt. Wie Sie einen Teil einer Aufnahme auswählen, erfahren Sie unter Teil einer Aufnahme auswählen.

In diesem Beispiel sind die Elemente der obersten Ebene in der Spalte Aktivität, z. B. Event, Paint und Composite Layers, übergeordnete Aktivitäten. Die Verschachtelung stellt den Aufrufstack dar. In diesem Beispiel hat Event zu Function Call geführt, was zu button.addEventListener und dann zu b geführt hat usw.

Eigenzeit ist die Zeit, die direkt für diese Aktivität aufgewendet wurde. Gesamtzeit gibt die Zeit an, die mit dieser Aktivität oder einer ihrer untergeordneten Aktivitäten verbracht wurde.

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

Verwenden Sie das Feld Filter, um Ereignisse nach Aktivitätsnamen zu filtern.

Standardmäßig ist im Menü Gruppierung die Option Keine Gruppierung ausgewählt. Über das Menü Gruppierung können Sie die Aktivitätstabelle nach verschiedenen Kriterien sortieren.

Klicken Sie auf Größten Stack anzeigen , um rechts neben der Tabelle Aktivität eine weitere Tabelle zu öffnen. Klicken Sie auf eine Aktivität, um die Tabelle Umfangreichster Stack zu füllen. In der Tabelle Umfangreichster Stack sehen Sie, bei welchen untergeordneten Elementen der ausgewählten Aktivität die Ausführung am längsten gedauert hat.

Tab „Bottom-Up“

Auf dem Tab Bottom-Up sehen Sie, welche Aktivitäten insgesamt am meisten Zeit in Anspruch genommen haben.

Auf dem Tab Bottom-Up werden nur Aktivitäten während des ausgewählten Teils der Aufzeichnung angezeigt. Wie Sie einen Teil einer Aufnahme auswählen, erfahren Sie unter Teil einer Aufnahme auswählen.

Im Flammendiagramm für den Haupt-Track dieses Beispiels sehen Sie, dass fast die gesamte Zeit für die Ausführung der drei Aufrufe von wait() aufgewendet wurde. Die wichtigste Aktivität auf dem Tab Bottom-Up ist daher wait. Im Flammendiagramm steht das Gelb unter den Aufrufen von wait für Tausende von Minor GC-Aufrufen. Entsprechend sehen Sie auf dem Tab Bottom-Up, dass Minor GC die zweitkostenintensivste Aktivität ist.

Die Spalte Eigenzeit gibt die Gesamtzeit an, die für diese Aktivität direkt aufgewendet wurde.

Die Spalte Gesamtzeit gibt die Gesamtzeit an, die in dieser Aktivität oder in einer ihrer untergeordneten Aktivitäten verbracht wurde.

Tab „Ereignisprotokoll“

Auf dem Tab Ereignisprotokoll sehen Sie die Aktivitäten in der Reihenfolge, in der sie während der Aufzeichnung aufgetreten sind.

Auf dem Tab Ereignisprotokoll werden nur Aktivitäten während des ausgewählten Teils der Aufzeichnung angezeigt. Wie Sie einen Teil einer Aufnahme auswählen, erfahren Sie unter Teil einer Aufnahme auswählen.

Die Spalte Startzeit gibt den Zeitpunkt an, zu dem die Aktivität gestartet wurde, bezogen auf den Beginn 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.

In der Spalte Eigenzeit sehen Sie die Zeit, die direkt für diese Aktivität aufgewendet wurde.

Die Spalten Gesamtzeit geben die Zeit an, die direkt in dieser Aktivität oder in einer ihrer untergeordneten Aktivitäten verbracht wurde.

Klicken Sie auf Startzeit, Eigene Zeit oder Gesamtzeit, um die Tabelle nach dieser Spalte zu sortieren.

Im Feld Filter können Sie Aktivitäten nach Name filtern.

Im Menü Dauer können Sie Aktivitäten herausfiltern, die weniger als 1 ms oder 15 ms gedauert haben. Standardmäßig ist das Menü Dauer auf Alle gesetzt, sodass alle Aktivitäten angezeigt werden.

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

Zeitangaben ansehen

Im Zeitplan Timings finden Sie wichtige Markierungen wie:

• First Paint (FP)
• First Contentful Paint (FCP)
• Largest Contentful Paint (LCP)
• DOMContentLoaded-Ereignis (DCL)
• Onload-Ereignis (L)
• Ihre benutzerdefinierten performance.mark()-Anrufe Unten ist bei 813, 44 ms eine einzelne Markierung mit dem Titel JavaScript-Ausführung wird gestartet zu sehen.
• Ihre benutzerdefinierten performance.measure()-Anrufe 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 detail-Objekt. Bei performance.mark()- und performance.measure()-Aufrufen werden auf dem Tab auch Stack-Traces angezeigt.

Interaktionen ansehen

Rufen Sie die Nutzerinteraktionen im Track Interaktionen auf, um potenzielle Probleme mit der Reaktionsfähigkeit zu ermitteln.

So rufen Sie Interaktionen auf:

1. Öffnen Sie die Entwicklertools, z. B. auf dieser Demoseite.
2. Öffnen Sie den Bereich Leistung und starten Sie eine Aufnahme.
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 wird im Interaktionen-Track die Interaktion Cursor angezeigt. Interaktionen haben Ausläufer, die Eingabe- und Präsentationsverzögerungen an den Grenzen der Verarbeitungszeit anzeigen. Bewegen Sie den Mauszeiger auf die Interaktion, um eine Kurzinfo mit Eingabeverzögerung, Verarbeitungszeit und Präsentationsverzögerung aufzurufen.

Der Track Interaktionen enthält außerdem Warnungen zu Interaction to Next Paint (INP) für Interaktionen, die länger als 200 Millisekunden dauern. Diese Warnungen werden auf dem Tab Zusammenfassung und in einer Kurzinfo angezeigt, wenn der Mauszeiger darauf bewegt wird:

Im Tracking-Track „Interaktionen“ werden Interaktionen, die länger als 200 Millisekunden dauern, mit einem roten Dreieck in der oberen rechten Ecke gekennzeichnet.

GPU-Aktivität ansehen

Die GPU-Aktivitäten finden Sie im Bereich GPU.

Rasteraktivität ansehen

Die Rasteraktivität finden Sie im Bereich Thread-Pool.

Bilder pro Sekunde (FPS) analysieren

In den DevTools gibt es zahlreiche Möglichkeiten, Frames pro Sekunde zu analysieren:

• Im Bereich Frames sehen Sie, wie lange ein bestimmter Frame gedauert hat.
• Mit dem FPS-Messgerät können Sie die FPS in Echtzeit messen, während die Seite ausgeführt wird. Weitere Informationen finden Sie unter Bilder pro Sekunde in Echtzeit mit dem FPS-Messtool ansehen.

Der Bereich „Frames“

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

Bewegen Sie den Mauszeiger auf einen Frame, um eine Kurzinfo mit weiteren Informationen dazu 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. Bildausschnitt (grün) Die Bilder wurden wie erwartet und rechtzeitig gerendert.
3. Teilweise angezeigter Frame (gelb mit einem spärlich verteilten Muster aus breiten Strichlinien) Chrome hat sein Bestes getan, um zumindest einige visuelle Änderungen rechtzeitig zu rendern. Das ist beispielsweise der Fall, wenn die Arbeit des Hauptthreads des Renderer-Prozesses (Canvas-Animation) verspätet ist, der Compose-Thread (Scrollen) aber rechtzeitig fertig ist.
4. Abgelegter Frame (rot mit einem dichten durchgezogenen Linienmuster) Chrome kann den Frame nicht in angemessener Zeit rendern.

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

Klicken Sie auf einen Frame, um auf dem Tab Zusammenfassung weitere Informationen zu sehen. In den DevTools wird der ausgewählte Frame blau umrandet.

Netzwerkanfragen ansehen

Maximieren Sie den Bereich Netzwerk, um eine Abfolge von Netzwerkanfragen aufzurufen, die während der Leistungsaufzeichnung aufgetreten sind.

Neben dem Namen des Netzwerks befindet sich eine Legende mit farbcodierten Anfragetypen.

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

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

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

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

Außerdem wird im Bereich Leistung der Tab Zusammenfassung mit weiteren Informationen zur Anfrage angezeigt, darunter die Felder Anfangspriorität und Priorität (Endgültig). Wenn sich die Werte unterscheiden, hat sich die Abrufpriorität der Anfrage während der Aufzeichnung geändert. Weitere Informationen finden Sie unter Ressourcenladevorgang mit der Fetch Priority API optimieren.

Auf dem Tab Zusammenfassung wird auch eine Aufschlüsselung der Zeitangaben für die Anfrage angezeigt.

Die Anfrage für www.google.com wird durch eine Linie links (|–), einen Balken in der Mitte mit einem dunklen und einem hellen Bereich sowie eine Linie rechts (–|) dargestellt.

Eine weitere Aufschlüsselung der Timings findest du auf dem Tab Netzwerk. Klicken Sie im Tracking-Pfad Netzwerk mit der rechten Maustaste auf die Anfrage oder auf ihre URL auf dem Tab Zusammenfassung und dann auf Im Netzwerkbereich anzeigen. In den DevTools wird der Bereich Netzwerk geöffnet und die entsprechende Anfrage ausgewählt. Öffnen Sie den Tab Timing.

So stimmen die beiden Aufschlüsselungen überein:

• Die linke Linie (|–) umfasst alle Ereignisse bis einschließlich der Gruppe Connection start. Mit anderen Worten: alles vor Request Sent.
• Der helle Teil der Leiste ist Request sent und Waiting for server response.
• Der dunkle Teil der Leiste ist Content download.
• Die rechte Linie (–|) ist die Zeit, die auf den Haupt-Thread gewartet wurde. Auf dem Tab Netzwerk > Timing wird er nicht angezeigt.

Speichermesswerte ansehen

Aktivieren Sie das Kästchen Arbeitsspeicher, um die Arbeitsspeichermesswerte der letzten Aufzeichnung aufzurufen.

In den DevTools wird über dem Tab Summary (Zusammenfassung) ein neues Diagramm Memory (Arbeitsspeicher) angezeigt. Unter dem Diagramm NET befindet sich ein neues Diagramm namens HEAP. Das Diagramm HEAP enthält dieselben Informationen wie die Linie JS-Heap im Diagramm Arbeitsspeicher.

In diesem Beispiel sind Arbeitsspeichermesswerte über dem Tab Zusammenfassung zu sehen.

Die farbigen Linien im Diagramm entsprechen den farbigen Kästchen über dem Diagramm. Deaktivieren Sie ein Kästchen, um diese Kategorie aus dem Diagramm auszublenden.

Im Diagramm wird nur die Region der ausgewählten Aufnahme angezeigt. Im vorherigen Beispiel zeigt das Diagramm Arbeitsspeicher nur die Arbeitsspeichernutzung zu Beginn der Aufzeichnung bis etwa 1.000 ms.

Dauer eines Teils einer Aufnahme ansehen

Wenn Sie einen Bereich wie Netzwerk oder Haupt analysieren, benötigen Sie manchmal eine genauere Schätzung, wie lange bestimmte Ereignisse gedauert haben. Halten Sie die Umschalttaste gedrückt, klicken Sie und halten Sie die Maustaste gedrückt und ziehen Sie den Mauszeiger nach links oder rechts, um einen Teil der Aufnahme auszuwählen. Unten in der Auswahl wird in den DevTools angezeigt, wie lange dieser Teil gedauert hat.

In diesem Beispiel gibt der Zeitstempel 488.53ms unten im ausgewählten Bereich an, wie lange dieser Bereich gedauert hat.

Screenshot ansehen

Informationen zum Erstellen von Screenshots während der Aufnahme

Bewegen Sie den Mauszeiger auf die Zeitachsenübersicht, um einen Screenshot der Seite zu sehen, wie sie zu diesem Zeitpunkt der Aufzeichnung aussah. Die Zeitachse enthält die Diagramme CPU, FPS und NET.

Sie können sich auch Screenshots ansehen, indem Sie im Bereich Frames auf einen Frame klicken. In den Entwicklertools wird auf dem Tab Zusammenfassung eine kleine Version des Screenshots angezeigt.

In diesem Beispiel ist der Screenshot für den Frame 195.5ms auf dem Tab Zusammenfassung zu sehen, 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 ist ein herangezoomter Screenshot zu sehen, nachdem Sie auf dem Tab Zusammenfassung auf das Thumbnail geklickt haben.

Informationen zu Ebenen aufrufen

So rufen Sie erweiterte Informationen zu Ebenen für einen Frame auf:

1. Aktivieren Sie die erweiterte Paint-Instrumentierung.
2. Wählen Sie im Bereich Frames einen Frame aus. In DevTools werden Informationen zu den Ebenen auf dem neuen Tab Ebenen neben dem Tab Ereignisprotokoll angezeigt.

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 , um sich entlang der X- und Y-Achse zu bewegen.
• Klicken Sie auf Drehmodus , um das Objekt entlang der Z‑Achse zu drehen.
• Klicken Sie auf Transformation zurücksetzen , um das Diagramm auf seine ursprüngliche Position zurückzusetzen.

So funktioniert die Schichtanalyse:

Paint Profiler aufrufen

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

1. Aktivieren Sie die erweiterte Paint-Instrumentierung.
2. Wählen Sie im Haupt-Track ein Paint-Ereignis aus.

Renderingleistung auf dem Tab „Rendering“ analysieren

Mit den Funktionen auf dem Tab Rendering können Sie die Renderingleistung Ihrer Seite visualisieren.

Öffnen Sie den Tab Rendering.

Mit dem FPS-Messtool Frames pro Sekunde in Echtzeit ansehen

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

Weitere Informationen finden Sie unter Frame-Rendering-Statistiken.

Malvorgänge in Echtzeit mit Farbblinken ansehen

Mit der Funktion Paint Flashing (Paint-Blinken) erhalten Sie eine Echtzeitansicht aller Paint-Ereignisse auf der Seite.

Weitere Informationen finden Sie unter Paint flashen.

Overlay mit Ebenengrenzen ansehen

Mit Ebenenränder können Sie sich ein Overlay mit Ebenenrändern und -kacheln auf der Seite anzeigen lassen.

Weitere Informationen finden Sie unter Ebenenränder.

Probleme mit der Scrollleistung in Echtzeit erkennen

Mit Leistungsprobleme beim Scrollen können Sie Elemente auf der Seite ermitteln, die Ereignis-Listener für das Scrollen haben, die die Leistung der Seite beeinträchtigen können. In den DevTools sind potenziell problematische Elemente türkis umrandet.

Weitere Informationen finden Sie unter Probleme mit der Scrollleistung.