Referenz zu Leistungsfunktionen

Kayce Basques

Sofia Emelianova

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 der Leistung einer Seite mit den Chrome-Entwicklertools.

Rekordleistung

Sie können die Laufzeit- oder Ladeleistung aufzeichnen.

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 Entwicklertools auf den Tab Leistung.

3. Klicken Sie auf Aufzeichnen .

   

4. Interagieren Sie mit der Seite. In den Entwicklertools werden alle Seitenaktivitäten aufgezeichnet, die aus Ihren Interaktionen resultieren.

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

Ladeleistung aufzeichnen

Zeichnen Sie die Ladeleistung auf, 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 . Zuerst wird in den Entwicklertools about:blank aufgerufen, um alle verbleibenden Screenshots und Traces 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 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 Löschen des mop, um die automatische Speicherbereinigung zu erzwingen.

Aufnahmeeinstellungen anzeigen

Klicken Sie auf Erfassungseinstellungen , um weitere Einstellungen dafür einzublenden, wie die Entwicklertools Leistungsaufzeichnungen erfassen.

JavaScript-Beispiele deaktivieren

Standardmäßig werden in der Spur Main einer Aufzeichnung 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 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. 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-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. Die Option 2-fache Verlangsamung sorgt beispielsweise dafür, dass Ihre CPU doppelt so schnell arbeitet wie sonst üblich. 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.

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 den Paint-Informationen finden Sie unter Ebenen ansehen und Paint-Profiler 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. 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

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 Lastenleistung aufgezeichnet haben, bietet das Steuerfeld Leistung viele Daten für die Analyse der Leistung des eben Geschehenes.

Navigation durch die Aufzeichnung

Wenn Sie sich die Aufzeichnung genauer ansehen möchten, können Sie einen Teil der Aufzeichnung auswählen, durch ein langes Flammendiagramm scrollen, heran- und herauszoomen und mithilfe von Klickpfaden zwischen Zoomstufen wechseln.

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 beiden vorherigen Schritte, um einen weiteren verschachtelten Navigationspfad zu erstellen. Sie können Breadcrumbs weiterhin 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.

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

   

   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 gekennzeichnet und in den Einstellungen Einstellungen > Ignorierliste den benutzerdefinierten Ausschlüssen hinzugefügt. Ignorierte Skripts werden gespeichert, bis Sie sie entweder aus dem Trace oder aus den benutzerdefinierten Ausschlüssen entfernen.

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 violette Ereignis für Rendering-Aktivitäten. 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 Haupt-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 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
• Installations-Timer -> Timer ausgelöst
• WebSocket erstellen -> Senden... und WebSocket-Handshake empfangen 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.

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 gibt Ihnen 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.
• Auf dem Tab Ereignisprotokoll können Sie sich die Aktivitäten in der Reihenfolge ansehen, in der sie während der Aufzeichnung aufgetreten sind.

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.

Hinweis:Die nächsten drei Abschnitte beziehen sich alle auf dieselbe Demo. Du kannst die Demo unter Demo der Aktivitäts-Tabs selbst ausführen und die Quelle unter GoogleChrome/devtools-samples/perf/activitytabs.html ansehen.

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.

Stammaktivitäten sind solche, die den Browser zum Ausführen einer Aktion veranlassen. Wenn Sie beispielsweise auf eine Seite klicken, löst der Browser die Aktivität Event als Root-Aktivität aus. Dieser Event kann dann bewirken, dass ein Handler ausgeführt wird.

Im Flame-Diagramm des Haupt-Tracks befinden sich die Stammaktivitäten oben. Auf den Tabs Anrufbaum und Ereignisprotokoll 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. Informationen zur Auswahl von Teilen einer Aufzeichnung finden Sie unter Einen Teil einer Aufzeichnung 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 der Event den Function Call verursacht, der button.addEventListener verursacht hat, der b usw.

Die Selbstzeit stellt die Zeit dar, die direkt bei dieser Aktivität verbracht wurde. Gesamtzeit stellt die Zeit dar, die bei dieser Aktivität oder in einem ihrer untergeordneten Elemente 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 das Menü Gruppierung auf Keine Gruppierung festgelegt. 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 mit dem größten Stack zu füllen. Die Tabelle Heaviest Stack zeigt Ihnen, welche untergeordneten Elemente der ausgewählten Aktivität die längste Ausführungszeit gedauert haben.

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. Informationen zur Auswahl von Teilen einer Aufzeichnung finden Sie unter Einen Teil einer Aufzeichnung auswählen.

Im Flame-Diagramm Main in diesem Beispiel sehen Sie, dass fast die gesamte Zeit für die Ausführung der drei Aufrufe von wait() aufgewendet wurde. Dementsprechend ist die Top-Aktivität auf dem Tab Bottom-Up der Wert wait. Im Flame-Diagramm sind die Gelb unter den Aufrufen von wait Tausende von Minor GC-Aufrufen. Dementsprechend ist auf dem Tab Bottom-Up die nächst teure Aktivität Minor GC.

Die Spalte Selbstzeit stellt die aggregierte Zeit dar, die direkt bei dieser Aktivität über alle ihre Vorkommen hinweg verbracht 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. Informationen zur Auswahl von Teilen einer Aufzeichnung finden Sie unter Einen Teil einer Aufzeichnung 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 Start, Selbstzeit 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 Malen, um alle Aktivitäten aus diesen Kategorien herauszufiltern.

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.

Wenn Sie weitere Details auf dem Tab Zusammenfassung sehen möchten, wählen Sie eine Markierung aus. Um den Zeitstempel der Markierung zu sehen, bewegen Sie den Mauszeiger im Track Timings darüber.

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. Weitere Informationen finden Sie unter Bilder pro Sekunde in Echtzeit mit dem FPS-Messtool ansehen.

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 Frame blau.

Netzwerkanfragen ansehen

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

Anfragen sind so farblich gekennzeichnet:

• HTML: Blau
• CSS: Lila
• JS: Gelb
• Bilder: Grün

Klicken Sie auf eine Anfrage, um auf dem Tab Zusammenfassung weitere Informationen dazu zu sehen. Im Beispiel oben werden auf dem Tab Zusammenfassung Informationen zur ausgewählten grünen Anfrage angezeigt.

Ein dunkelblaues Quadrat oben links in einer Anfrage weist darauf hin, dass diese Anfrage eine höhere Priorität hat. Ein helleres blaues Quadrat bedeutet eine niedrigere Priorität. Im vorherigen Beispiel hat die ausgewählte Anfrage eine hohe Priorität und die blaue Anfrage darüber die höchste Priorität.

Der Abschnitt Zusammenfassung enthält die Felder Anfängliche Priorität und (abschließende) 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.

Im vorherigen Beispiel wird die Anfrage für www.google.com 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. Im nächsten Screenshot ist die entsprechende Darstellung derselben Anfrage im Bereich Netzwerk auf dem Tab Timing zu sehen. So werden diese beiden Darstellungen einander zugeordnet:

• Die linke Zeile entspricht dem gesamten Wert bis einschließlich der Connection Start-Ereignisgruppe. Mit anderen Worten: Es ist alles vor Request Sent, exklusiv.
• Der helle Teil des Balkens ist Request Sent und Waiting (TTFB).
• Der dunkle Teil des Balkens ist Content Download.
• Die rechte Zeile steht für die Zeit, die auf den Hauptthread gewartet wurde. Dies ist auf dem Tab Timing nicht enthalten.

Dieses Beispiel zeigt die Linienleistendarstellung der www.google.com-Anfrage.

In diesem Beispiel wird die www.google.com-Anfrage auf dem Tab Timing dargestellt.

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. Unter dem NET-Diagramm gibt es außerdem ein neues Diagramm namens HEAP. Das HEAP-Diagramm bietet dieselben Informationen wie die JS Heap-Zeile im Arbeitsspeicher-Diagramm.

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 Kästchen, um die 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

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 ziehen Sie sie nach links oder rechts, um einen Teil der Aufzeichnung 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 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 dem Zeitpunkt der Aufzeichnung angezeigt wurde. 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. 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 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 auf dem neuen Tab Ebenen neben dem Tab Ereignisprotokoll Informationen zu den zugehörigen Ebenen 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 Modus gedreht , um die Ansicht entlang der Z-Achse zu drehen.
• Klicken Sie auf Reset Transform , 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. DevTools skizziert die potenziell problematischen Elemente blaugrün.

Weitere Informationen finden Sie unter Probleme mit der Scrollleistung.