Die Laufzeitleistung gibt an, wie Ihre Seite während der Ausführung im Gegensatz zum Laden funktioniert. In diesem Tutorial erfahren Sie, wie Sie mit dem Bereich „Leistung“ der Chrome-Entwicklertools die Laufzeitleistung analysieren. Im Hinblick auf das RAIL-Modell sind die in dieser Anleitung erworbenen Kenntnisse nützlich, um die Phasen „Antwort“, „Animation“ und „Leerlauf“ Ihrer Seite zu analysieren.
Jetzt starten
In dieser Anleitung verwenden wir das Leistungsbereich, um einen Leistungsengpass auf einer Live-Seite zu finden. So gehts:
- Öffnen Sie Google Chrome im Inkognitomodus. Im Inkognitomodus wird Chrome in einem sauberen Zustand ausgeführt. Wenn Sie beispielsweise viele Erweiterungen installiert haben, können diese die Leistungsmessungen beeinträchtigen.
Laden Sie die folgende Seite in Ihrem Inkognitofenster. Dies ist die Demo, die Sie profilieren werden. Auf der Seite sind viele kleine blaue Quadrate zu sehen, die sich auf und ab bewegen.
https://googlechrome.github.io/devtools-samples/jank/Drücken Sie Befehlstaste + Wahltaste + I (Mac) oder Strg + Umschalttaste + I (Windows, Linux), um die Entwicklertools zu öffnen.
Mobile CPU simulieren
Mobilgeräte haben viel weniger CPU-Leistung als Computer und Laptops. Verwenden Sie beim Erstellen eines Profils für eine Seite immer die CPU-Drosselung, um zu simulieren, wie Ihre Seite auf Mobilgeräten funktioniert.
- Klicken Sie in den DevTools auf den Tab Leistung.
- Achten Sie darauf, dass das Kästchen Screenshots aktiviert ist.
- Klicke auf Aufnahmeeinstellungen . In DevTools werden Einstellungen dazu angezeigt, wie Leistungsmesswerte erfasst werden.
Wählen Sie für CPU die Option 4x slowdown (4-fache Verlangsamung) aus. DevTools drosselt die CPU, sodass sie viermal langsamer als gewöhnlich ist.
Demo einrichten
Es ist schwierig, eine Demo zur Laufzeitleistung zu erstellen, die für alle Leser dieser Website konsistent funktioniert. In diesem Abschnitt können Sie die Demo anpassen, damit sie unabhängig von Ihrer speziellen Einrichtung relativ konsistent mit den Screenshots und Beschreibungen in diesem Tutorial ist.
- Klicken Sie immer wieder auf 10 hinzufügen, bis sich die blauen Quadrate deutlich langsamer bewegen als zuvor. Auf einem High-End-Computer sind dafür möglicherweise etwa 20 Klicks erforderlich.
Klicken Sie auf Optimieren. Die blauen Quadrate sollten sich schneller und flüssiger bewegen.
Klicken Sie auf Nicht optimieren. Die blauen Quadrate bewegen sich wieder langsamer und ruckartiger.
Laufzeitleistung aufzeichnen
Wenn Sie die optimierte Version der Seite ausführen, bewegen sich die blauen Quadrate schneller. Warum? In beiden Versionen soll jedes Quadrat in derselben Zeit um dieselbe Strecke verschoben werden. Nehmen Sie eine Aufzeichnung im Bereich Leistung vor, um zu erfahren, wie Sie den Leistungsengpass in der nicht optimierten Version erkennen.
Klicken Sie in den Entwicklertools auf Aufzeichnen . DevTools erfasst Leistungsmesswerte während der Ausführung der Seite.
Warten Sie einige Sekunden.
Klicken Sie auf Beenden. Die Entwicklertools beenden die Aufzeichnung, verarbeiten die Daten und zeigen die Ergebnisse dann im Bereich Leistung an.
Wow, das ist eine überwältigende Menge an Daten. Keine Sorge, es wird gleich klarer.
Ergebnisse analysieren
Sobald Sie eine Leistungsaufzeichnung haben, können Sie analysieren, wie schlecht die Leistung der Seite ist, und die Ursache(n) ermitteln.
Bilder pro Sekunde analysieren
Der wichtigste Messwert für die Leistung einer Animation ist die Framerate (Frames per Second, FPS). Nutzer sind zufrieden, wenn Animationen mit 60 FPS ausgeführt werden.
Sehen Sie sich das FPS-Diagramm an. Wenn Sie einen roten Balken über FPS sehen, bedeutet das, dass die Framerate so niedrig ist, dass sie sich wahrscheinlich negativ auf die Nutzerfreundlichkeit auswirkt.
Unter dem FPS-Diagramm sehen Sie das CPU-Diagramm. Die Farben im Diagramm CPU entsprechen den Farben im Tab Zusammenfassung unten im Bereich Leistung. Die Tatsache, dass das CPU-Diagramm vollständig farbig ist, bedeutet, dass die CPU während der Aufzeichnung voll ausgelastet war. Wenn die CPU über längere Zeiträume hinweg maximal ausgelastet ist, ist das ein Hinweis darauf, dass Sie weniger Arbeit verrichten müssen.
Bewegen Sie den Mauszeiger auf die Diagramme FPS, CPU oder NET. In den Entwicklertools wird ein Screenshot der Seite zu diesem Zeitpunkt angezeigt. Bewegen Sie die Maus nach links und rechts, um die Aufnahme wiederzugeben. Das wird als Scrubbing bezeichnet und ist nützlich, um den Ablauf von Animationen manuell zu analysieren.
Bewegen Sie den Mauszeiger im Bereich Frames auf eines der grünen Quadrate. In den DevTools wird die FPS für diesen Frame angezeigt. Jeder Frame liegt wahrscheinlich deutlich unter dem Ziel von 60 FPS.
Bei dieser Demo ist es natürlich ziemlich offensichtlich, dass die Seite keine gute Leistung erbringt. In der Realität ist das aber nicht immer so eindeutig. Daher ist es hilfreich, alle diese Tools für Messungen zur Verfügung zu haben.
Bonus: FPS-Zähler öffnen
Ein weiteres praktisches Tool ist das FPS-Messgerät, das Echtzeitschätzungen für die FPS während der Ausführung der Seite liefert.
- Drücken Sie Befehlstaste + Umschalt + P (Mac) oder Strg + Umschalt + P (Windows, Linux), um das Befehlsmenü zu öffnen.
- Geben Sie
Renderingin das Befehlsmenü ein und wählen Sie Rendering anzeigen aus. Aktivieren Sie im Bereich Rendering die Option Rendering-Statistiken anzeigen. Rechts oben im Sichtfeld wird ein neues Overlay angezeigt.
Deaktivieren Sie das FPS-Messgerät und drücken Sie die Esc-Taste, um den Bereich Rendering zu schließen. In dieser Anleitung wird sie nicht verwendet.
Engpass finden
Nachdem Sie gemessen und überprüft haben, dass die Animation nicht gut funktioniert, müssen Sie sich als Nächstes fragen, warum.
Beachten Sie den Tab Zusammenfassung. Wenn keine Ereignisse ausgewählt sind, sehen Sie auf diesem Tab eine Aufschlüsselung der Aktivitäten. Die Seite wurde die meiste Zeit gerendert. Da es bei der Leistung darum geht, weniger Arbeit zu verrichten, ist es Ihr Ziel, die für das Rendern benötigte Zeit zu verkürzen.
Maximieren Sie den Bereich Haupt. In DevTools wird ein Flammen-Diagramm der Aktivitäten im Hauptthread im Zeitverlauf angezeigt. Die X-Achse stellt die Aufnahme im Zeitverlauf dar. Jeder Balken steht für ein Ereignis. Ein breiterer Balken bedeutet, dass das Ereignis länger gedauert hat. Die Y-Achse stellt den Aufrufstack dar. Wenn Ereignisse übereinander gestapelt sind, bedeutet das, dass die oberen Ereignisse die unteren Ereignisse verursacht haben.
Die Aufzeichnung enthält viele Daten. Zoomen Sie auf ein einzelnes Animation Frame Fired-Ereignis, indem Sie mit der Maus auf den Abschnitt Übersicht klicken, die Maustaste gedrückt halten und die Maus ziehen. Dieser Abschnitt enthält die Diagramme FPS, CPU und NET. Im Bereich Hauptteil und auf dem Tab Zusammenfassung werden nur Informationen für den ausgewählten Teil der Aufzeichnung angezeigt.
Achten Sie auf das rote Dreieck rechts oben in den Task- und Layout-Ereignissen. Wenn Sie ein rotes Dreieck sehen, ist das eine Warnung, dass es möglicherweise ein Problem mit diesem Ereignis gibt. Ein rotes Dreieck bei einer Aufgabe bedeutet, dass es sich um eine lange Aufgabe gehandelt hat.
Klicken Sie auf das Ereignis Animation Frame Fired. Auf dem Tab Zusammenfassung werden jetzt Informationen zu diesem Ereignis angezeigt. Wenn Sie auf den Link neben Initiated by (Ausgelöst von) klicken, wird in DevTools das Ereignis hervorgehoben, das das Ereignis Animation Frame Fired (Animationsframe ausgelöst) ausgelöst hat. Beachten Sie auch den Link app.update @. Wenn Sie darauf klicken, werden Sie zur entsprechenden Zeile im Quellcode weitergeleitet.
Unter dem Ereignis app.update gibt es eine Reihe von lila Ereignissen. Wenn sie breiter wären, würde es so aussehen, als ob jedes ein rotes Dreieck hätte. Klicken Sie jetzt auf eines der lila Layout-Ereignisse. In DevTools finden Sie auf dem Tab Zusammenfassung weitere Informationen zum Ereignis. Tatsächlich gibt es eine Warnung vor erzwungenen Reflows (ein anderes Wort für Layout).
Klicken Sie auf dem Tab Zusammenfassung unter Animation Frame Requested (Animationsframe angefordert) neben app.update @ auf den Link. In den Entwicklertools wird die Codezeile angezeigt, die das Layout erzwungen hat.
Geschafft! Das war viel Stoff, aber Sie haben jetzt eine solide Grundlage für den grundlegenden Workflow zur Analyse der Laufzeitleistung. Gut gemacht.
Bonus: Optimierte Version analysieren
Klicken Sie mit den Workflows und Tools, die Sie gerade kennengelernt haben, in der Demo auf Optimize (Optimieren), um den optimierten Code zu aktivieren, eine weitere Leistungserfassung vorzunehmen und die Ergebnisse zu analysieren. An der verbesserten Framerate und der Reduzierung der Ereignisse im Flammen-Chart des Bereichs Main sehen Sie, dass die optimierte Version der App viel weniger Arbeit verrichtet, was zu einer besseren Leistung führt.
Nächste Schritte
Die Grundlage für das Verständnis der Leistung ist das RAIL-Modell. In diesem Modell erfahren Sie, welche Leistungsmesswerte für Ihre Nutzer am wichtigsten sind. Weitere Informationen finden Sie unter Leistung mit dem RAIL-Modell messen.
Um sich mit dem Bereich „Leistung“ vertraut zu machen, ist Übung das A und O. Profilieren Sie Ihre eigenen Seiten und analysieren Sie die Ergebnisse. Wenn Sie Fragen zu Ihren Ergebnissen haben, stellen Sie eine Frage auf Stack Overflow mit dem Tag google-chrome-devtools. Fügen Sie nach Möglichkeit Screenshots oder Links zu reproduzierbaren Seiten hinzu.
Um ein Experte für die Laufzeitleistung zu werden, müssen Sie wissen, wie der Browser HTML-, CSS- und JS-Code in Pixel auf einem Bildschirm umwandelt. Am besten beginnen Sie mit der Übersicht zur Rendering-Leistung. Im Artikel The Anatomy Of A Frame (Die Anatomie eines Frames) finden Sie noch mehr Details.
Schließlich gibt es viele Möglichkeiten, die Laufzeitleistung zu verbessern. In diesem Tutorial wurde ein bestimmter Animationsengpass behandelt, um Ihnen einen gezielten Überblick über das Leistungspanel zu geben. Es ist jedoch nur einer von vielen Engpässen, die auftreten können. Im Rest der Reihe „Rendering Performance“ finden Sie viele gute Tipps zur Verbesserung verschiedener Aspekte der Laufzeitleistung, z. B.: