Referenz zu Leistungsfunktionen

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

Unter Laufzeitleistung analysieren finden Sie eine Anleitung, wie Sie die Leistung einer Seite mit den Chrome-Entwicklertools analysieren.

Leistung aufzeichnen

Sie können die Laufzeit- oder Ladeleistung erfassen.

Laufzeitleistung aufzeichnen

Zeichnen Sie die Laufzeitleistung auf, wenn Sie die Leistung einer Seite beim Ausführen analysieren möchten, anstatt sie zu laden.

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 aufzeichnen

Sie können die Ladeleistung aufzeichnen, wenn Sie die Leistung einer Seite beim Laden und nicht während der Ausführung 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. Dann zeichnet die Entwicklertools Leistungsmesswerte auf, während die Seite neu geladen wird, und stoppt die Aufzeichnung dann automatisch 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 zum Interagieren mit Screenshots

Automatische Speicherbereinigung während der Aufnahme erzwingen

Klicken Sie während des Aufzeichnens einer Seite auf Automatisches Wischen , 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 Aufrufstacks:

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 der Deaktivierung und Aktivierung von JavaScript-Beispielen. Der Main-Track der Aufzeichnung ist bei deaktiviertem Sampling viel kürzer, 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 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 gewünschte Drosselung fest.

Die Drosselung hängt von den Fähigkeiten Ihres Computers ab. Mit der Option 2-fache Verlangsamung wird die CPU beispielsweise doppelt so langsam wie normal ausgeführt. DevTools kann die CPUs von Mobilgeräten nicht wirklich simulieren, da sich die Architektur von Mobilgeräten stark von der von 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 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 zur Interaktion mit den Malinformationen finden Sie unter Ebenen ansehen und Malprofil ansehen.

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. Setzen Sie ein Häkchen bei Hardware-Parallelität und legen Sie die Anzahl der Kerne im Eingabefeld 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

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

Vorherige Aufnahme löschen

Wählen Sie nach dem Erstellen einer Aufzeichnung Aufzeichnung löschen aus, um die Aufnahme im Bereich Leistung zu löschen.

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

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 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 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, 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 Navigationspfade:

1. Wählen Sie auf der Zeitachsenübersicht 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 erweitert und füllt die Zeitachsenübersicht aus. Oben in der Übersicht der Zeitachse wird eine Kette von Breadcrumbs erstellt.
3. Wiederholen Sie die vorherigen beiden Schritte, um einen weiteren verschachtelten Navigationspfad 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. Ziehen Sie dann in eine beliebige Richtung, bis das gewünschte Element angezeigt wird.

Suchaktivitäten

Sie können sowohl die Aktivitäten im Haupt-Track als auch die Anfragen im Netzwerk-Track durchsuchen.

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

• 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 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.

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 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. 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 es auszublenden.
3. Klicken Sie abschließend unten auf Konfiguration von Tracks abschließen, um den Konfigurationsmodus zu beenden.

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äten im Hauptthread 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.

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

Flame-Diagramm auswerten

Der Bereich Leistung stellt die Hauptthreadaktivität in einem Flame-Diagramm dar. Die X-Achse stellt die Aufnahme 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 verursacht. 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. 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 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 eingefärbt, während die ersten 50 Millisekunden nicht eingefärbt sind.

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-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 Initiatoren und die von ihnen verursachten Ereignisse verbinden:

• Entwertung von Stil oder Layout -> Stile neu berechnen oder Layout
• Animationsframe anfordern -> Animationsframe ausgelöst
• Rückruf bei Inaktivität anfordern -> Rückruf bei Inaktivität anfordern
• 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 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 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 Elemente 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. 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 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 Skripts werden gespeichert, bis Sie sie entweder aus dem Trace oder aus den benutzerdefinierten Ausschlüssen 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 anzeigen möchten, die die meiste Arbeit verursachen, verwenden Sie den Tab Aufrufstruktur.
• Wenn Sie die Aktivitäten anzeigen möchten, bei denen die meiste Zeit direkt verbracht wurde, 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 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
• Regulärer_Ausdruck: Regulärer Ausdruck.
• match_word Sucht nach einem ganzen Wort.

In jeder tabellarischen Ansicht im Bereich Leistung werden Links zu Aktivitäten wie Funktionsaufrufen angezeigt. 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 außerdem automatisch die Originaldateien.

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

Stammaktivitäten

Hier finden Sie eine Erläuterung des Konzepts von Stammaktivitäten, das auf den Tabs Aufrufstruktur, 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 „Aufrufstruktur“.

Tab „Anrufabfolge“

Auf dem Tab Anrufbaum sehen Sie, welche übergeordneten Aktivitäten den meisten Aufwand verursachen.

Auf dem Tab Anrufstruktur 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.

In diesem Beispiel sind die oberste Ebene der Elemente in der Spalte Activity, z. B. Event, Paint und Composite Layers, Stammaktivitä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 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 im Menü Gruppierung die Option Keine Gruppierung ausgewählt. Mit dem Menü Gruppierung können Sie die Aktivitätstabelle nach verschiedenen Kriterien sortieren.

Klicken Sie auf Hochgradigsten Stack anzeigen , um rechts neben der Tabelle Aktivität eine weitere Tabelle einzublenden. Klicken Sie auf eine Aktivität, um die Tabelle Umfangreichster Stack zu füllen. In der Tabelle Häufigster Stack sehen Sie, welche untergeordneten Elemente der ausgewählten Aktivität die längste Ausführungszeit gedauert haben.

Der Tab „Bottom-Up“

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. 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 Flame-Diagramm sind die Gelb unter den Aufrufen von wait 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 stellt die zusammengefasste Zeit dar, die bei dieser Aktivität oder in einem ihrer untergeordneten Elemente verbracht wurde.

Tab „Ereignisprotokoll“

Auf dem Tab Ereignisprotokoll können Sie Aktivitäten in der Reihenfolge ansehen, 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, an dem die Aktivität begann, 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.

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

Die Spalten Gesamtzeit stellen die Zeit dar, die direkt in dieser Aktivität oder in einem ihrer untergeordneten Elemente verbracht wurde.

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

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

Mit dem Menü Zeitrahmen können Sie alle Aktivitäten herausfiltern, die weniger als 1 ms oder 15 ms benötigt haben. Standardmäßig ist im Menü Zeitrahmen die Option Alle eingestellt, d. h., alle Aktivitäten werden angezeigt.

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

Zeitangaben ansehen

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. Unten ist bei 813,44 ms eine einzelne Markierung mit dem Titel JavaScript-Ausführung beginnt 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. Für performance.mark()- und performance.measure()-Aufrufe werden auf dem Tab auch Stacktraces 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 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 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.

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

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

Rasteraktivität ansehen

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

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 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): 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 Compositor-Thread (Scrollen) aber im Zeitplan liegt.
4. Verworfener Rahmen (rot mit dicht durchgezogener Linie): 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.

Wenn Sie auf einen Frame klicken, werden auf dem Tab Zusammenfassung weitere Informationen zu diesem Frame angezeigt. In den DevTools wird der ausgewählte Frame blau umrandet.

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 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 zu sehen:

• 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 Network-Track vom Initiator ein Pfeil 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 Optimieren des Ladens von Ressourcen mit der Fetch Priority API.

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 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 im Track Netzwerk oder auf der URL auf dem Tab Zusammenfassung mit der rechten Maustaste und dann auf Im Netzwerkbereich anzeigen. In DevTools wird der Bereich Netzwerk geöffnet und die entsprechende Anfrage ausgewählt. Öffnen Sie den Tab Timing.

So werden diese beiden Aufschlüsselungen einander zugeordnet:

• 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 des Balkens ist Content download.
• Die rechte Zeile (–|) enthält die Zeit, die auf den Hauptthread gewartet wurde. Auf dem Tab Netzwerk > Timing wird er nicht angezeigt.

Speichermesswerte aufrufen

Klicken Sie das Kästchen Speicher an, um die Speichermesswerte der letzten Aufnahme 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 auf dem Diagramm werden den farbigen Kästchen über dem Diagramm zugeordnet. Deaktivieren Sie ein Kästchen, um die 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 Ausschnitts einer Aufnahme ansehen

Wenn Sie einen Bereich wie Network oder Main analysieren, benötigen Sie manchmal eine genauere Schätzung der Dauer bestimmter Ereignisse. 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 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 dieser Teil 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. Die Entwicklertools zeigen auf dem Tab Summary eine kleine Version des Screenshots an.

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 rufen Sie erweiterte Informationen zu Ebenen für einen Frame auf:

1. Aktivieren Sie die erweiterte Paint-Instrumentierung.
2. Wählen Sie im Abschnitt 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 Rotationsmodus , um entlang der Z-Achse zu drehen.
• Klicken Sie auf Transformation zurücksetzen , um das Diagramm auf 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. 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 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 FPS, während die Seite ausgeführt wird.

Siehe Frame-Rendering-Statistiken.

Malvorgänge in Echtzeit mit Farbblinken ansehen

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

Siehe Blinken von Farben.

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 Ebenenrahmen.

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.