Diese Seite wurde von der Cloud Translation API übersetzt.

Laufzeitleistung analysieren

Kayce Basques

Die Laufzeitleistung gibt an, wie Ihre Seite während der Ausführung funktioniert, im Gegensatz zum Laden. In dieser Anleitung erfahren Sie, wie Sie mit dem Chrome-Entwicklertools-Steuerfeld „Leistung“ die Laufzeitleistung analysieren. Im Hinblick auf das RAIL-Modell sind die in dieser Anleitung vermittelten Fähigkeiten nützlich, um die Phasen „Antwort“, „Animation“ und „Inaktiv“ Ihrer Seite zu analysieren.

Jetzt starten

In dieser Anleitung verwenden wir den Bereich Leistung, um einen Leistungsengpass auf einer Liveseite zu finden. Gehen Sie so vor:

Ö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 Ihre Leistungsmessungen verfälschen.
Laden Sie die folgende Seite in Ihrem Inkognitofenster. Das ist die Demo, die Sie profilieren werden. Auf der Seite sind viele kleine blaue Quadrate zu sehen, die sich nach oben und unten bewegen.

https://googlechrome.github.io/devtools-samples/jank/
Drücken Sie Befehlstaste + Wahltaste + I (Mac) oder Strg + Umschalttaste + I (Windows, Linux), um die DevTools zu öffnen.

Hinweis: Auf den restlichen Screenshots sind die Entwicklertools in einem separaten Fenster angedockt, damit Sie den Inhalt besser sehen können.

Eine mobile CPU simulieren

Mobilgeräte haben eine viel geringere CPU-Leistung als Computer und Laptops. Verwenden Sie beim Erstellen eines Seitenprofils die CPU-Drosselung, um die Leistung Ihrer Seite auf Mobilgeräten zu simulieren.

Klicken Sie in den DevTools auf den Tab Leistung.
Das Kästchen für Screenshots muss aktiviert sein.
Klicken Sie auf Aufnahmeeinstellungen . In den DevTools werden Einstellungen angezeigt, die sich auf die Erfassung von Leistungsmesswerten beziehen.
Wählen Sie für CPU die Option 4-fache Verlangsamung aus. In den DevTools wird die CPU so gedrosselt, dass sie viermal langsamer als normal ist.

Hinweis: Wenn Sie andere Seiten testen und dafür sorgen möchten, dass sie auch auf Low-End-Mobilgeräten gut funktionieren, legen Sie die CPU-Drosselung auf 20-fache Verlangsamung fest. Diese Demo funktioniert nicht gut mit einer 20-fachen Zeitlupe. Aus didaktischen Gründen wird daher nur eine 4-fache Zeitlupe verwendet.

Demo einrichten

Es ist schwierig, eine Laufzeit-Leistungsdemo zu erstellen, die für alle Leser dieser Website einheitlich funktioniert. In diesem Abschnitt können Sie die Demo anpassen, damit sie unabhängig von Ihrer spezifischen Konfiguration relativ den Screenshots und Beschreibungen in dieser Anleitung entspricht.

Klicken Sie so oft auf 10 hinzufügen, bis sich die blauen Quadrate deutlich langsamer bewegen als zuvor. Auf einem High-End-Computer kann es etwa 20 Klicks dauern.
Klicken Sie auf Optimieren. Die blauen Quadrate sollten sich schneller und gleichmäßiger bewegen.

Hinweis: Wenn Sie keinen deutlichen Unterschied zwischen der optimierten und der nicht optimierten Version sehen, klicken Sie einige Male auf 10 abziehen und versuchen Sie es noch einmal. Wenn Sie zu viele blaue Quadrate hinzufügen, wird die CPU nur ausgelastet und es gibt keinen großen Unterschied zwischen den Ergebnissen der beiden Versionen.
Klicken Sie auf Optimierung aufheben. Die blauen Quadrate bewegen sich wieder langsamer und ruckeln mehr.

Laufzeitleistung erfassen

Bei der optimierten Version der Seite bewegen sich die blauen Quadrate schneller. Warum? Bei beiden Versionen soll jedes Quadrat in derselben Zeit um denselben Abstand verschoben werden. Erstellen Sie eine Aufzeichnung im Bereich Leistung, um zu erfahren, wie Sie den Leistungsengpass in der nicht optimierten Version erkennen.

Klicken Sie in den Entwicklertools auf Aufzeichnen . In den Entwicklertools werden Leistungsmesswerte erfasst, während die Seite ausgeführt wird.
Warten Sie einige Sekunden.
Klicken Sie auf Beenden. In DevTools wird die Aufzeichnung beendet, die Daten werden verarbeitet und die Ergebnisse werden im Bereich Leistung angezeigt.

Wow, das ist eine überwältigende Menge an Daten. Keine Sorge, das 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 Anzahl der Bilder pro Sekunde (Frames per Second, FPS). Nutzer sind zufrieden, wenn Animationen mit 60 fps laufen.

Sehen Sie sich das Diagramm FPS an. Wenn Sie über FPS einen roten Balken sehen, ist die Framerate so niedrig, dass die Nutzererfahrung wahrscheinlich beeinträchtigt wird.
Unterhalb des Diagramms für die FPS sehen Sie das Diagramm für die CPU. Die Farben im Diagramm CPU entsprechen den Farben auf dem Tab Zusammenfassung unten im Bereich Leistung. Wenn das Diagramm für die CPU vollständig ausgemalt ist, war die CPU während der Aufzeichnung maximal ausgelastet. Wenn die CPU über einen längeren Zeitraum ausgelastet ist, sollten Sie nach Möglichkeiten suchen, die Arbeit zu reduzieren.
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 Aufzeichnung noch einmal abzuspielen. Dies 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 sehen Sie die FPS für diesen bestimmten Frame. Die Framerate liegt wahrscheinlich weit unter dem Ziel von 60 fps.

Bei dieser Demo ist es natürlich ziemlich offensichtlich, dass die Seite nicht gut abschneidet. In der Praxis ist das jedoch nicht immer so klar. Daher sind all diese Tools zur Messung sehr nützlich.

Bonus: FPS-Messgerät öffnen

Ein weiteres praktisches Tool ist der FPS-Messwert, der Echtzeitschätzungen für die FPS während der Ausführung der Seite liefert.

Drücken Sie Befehlstaste + Umschalttaste + P (Mac) oder Strg + Umschalttaste + P (Windows, Linux), um das Befehlsmenü zu öffnen.
Geben Sie im Befehlsmenü Rendering ein und wählen Sie Rendering anzeigen aus.
Aktivieren Sie im Bereich Rendering die Option Rendering-Statistiken anzeigen. Rechts oben im Darstellungsbereich wird ein neues Overlay angezeigt.
Deaktivieren Sie den FPS-Messer und drücken Sie die Esc-Taste, um den Bereich Rendering zu schließen. Sie wird in dieser Anleitung nicht verwendet.

Engpass finden

Nachdem Sie die Leistung der Animation gemessen und festgestellt haben, dass sie nicht gut abschneidet, sollten Sie sich fragen: Warum?

Beachten Sie den Tab Zusammenfassung. Wenn keine Ereignisse ausgewählt sind, wird auf diesem Tab eine Aufschlüsselung der Aktivitäten angezeigt. Der Großteil der Zeit wurde für das Rendern der Seite benötigt. Da Leistung bedeutet, weniger Arbeit zu leisten, besteht Ihr Ziel darin, die Zeit für das Rendern zu reduzieren.
Maximieren Sie den Bereich Haupt. In den DevTools wird ein Flammendiagramm mit den 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 liegen, bedeutet das, dass die oberen Ereignisse die unteren verursacht haben.
Die Aufnahme enthält viele Daten. Sie können auf ein einzelnes Ereignis vom Typ Animation Frame Fired heranzoomen, indem Sie auf die Übersicht klicken, die Maustaste gedrückt halten und den Mauszeiger über die Diagramme FPS, CPU und NET ziehen. Im Bereich Haupt und auf dem Tab Zusammenfassung werden nur Informationen für den ausgewählten Teil der Aufzeichnung angezeigt.

Tipp :Sie können auch WASD verwenden, um durch die Aufzeichnung zu navigieren. Klicken Sie auf den Hintergrund des Bereichs Haupt oder wählen Sie ein Ereignis aus, um den Fokus darauf zu legen. Drücken Sie dann die Taste W, um heranzuzoomen, S, um herauszuzoomen, A, um nach links zu scrollen, oder D, um nach rechts zu scrollen.
Beachten Sie das rote Dreieck rechts oben bei den Task- und Layout-Ereignissen. Ein rotes Dreieck weist auf ein mögliches Problem im Zusammenhang mit diesem Ereignis hin. Ein rotes Dreieck bei einer Aufgabe bedeutet, dass es sich um eine lange Aufgabe handelt.
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 Von klicken, wird in DevTools das Ereignis hervorgehoben, das das Ereignis Animation Frame Fired ausgelöst hat. Beachten Sie auch den Link app.update @. Wenn Sie darauf klicken, gelangen Sie zur entsprechenden Zeile im Quellcode.

Hinweis: Nachdem Sie ein Ereignis ausgewählt haben, können Sie mit den Pfeiltasten die Ereignisse daneben auswählen.
Unter dem Ereignis app.update gibt es eine Reihe lilafarbener Ereignisse. Wenn sie breiter wären, würde es so aussehen, als hätte jedes ein rotes Dreieck. Klicken Sie jetzt auf eines der lilafarbenen Layout-Ereignisse. In den DevTools finden Sie auf dem Tab Zusammenfassung weitere Informationen zum Ereignis. Tatsächlich gibt es eine Warnung zu erzwungenen Neuanpassungen (ein anderes Wort für Layout).
Klicken Sie auf dem Tab Zusammenfassung unter Animation Frame Requested (Angeforderter Animationsframe) auf den Link neben app.update @. In den Entwicklertools gelangen Sie zur Codezeile, die das Layout erzwungen hat.

Hinweis: Das Problem mit diesem Code besteht darin, dass in jedem Animationsframe der Stil für jedes Quadrat geändert und dann die Position jedes Quadrats auf der Seite abgefragt wird. Da sich die Stile geändert haben, weiß der Browser nicht, ob sich die Position der einzelnen Quadrate geändert hat. Daher muss er das Layout des Quadrats neu erstellen, um seine Position zu berechnen. Weitere Informationen finden Sie unter Erzwungene synchrone Layouts vermeiden.

Geschafft! Das war eine Menge, 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 Optimieren, um den optimierten Code zu aktivieren, eine weitere Leistungsaufzeichnung durchzuführen und die Ergebnisse zu analysieren. Im Flammendiagramm im Bereich Haupt sehen Sie, dass die optimierte Version der App viel weniger Arbeit erledigt, was zu einer besseren Leistung führt. Das zeigt sich auch an der verbesserten Framerate und der geringeren Anzahl von Ereignissen.

Hinweis:Auch diese optimierte Version ist nicht so toll, da sie immer noch die Eigenschaft top jedes Quadrats manipuliert. Besser ist es, sich auf Eigenschaften zu beschränken, die sich nur auf das Compositing auswirken. Weitere Informationen finden Sie unter Transformations- und Deckkraftänderungen für Animationen verwenden.

Nächste Schritte

Das RAIL-Modell ist die Grundlage für das Verständnis der Leistung. 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.

Übung macht den Meister. Erstellen Sie ein Profil Ihrer eigenen Seiten und analysieren Sie die Ergebnisse. Wenn Sie Fragen zu Ihren Ergebnissen haben, stellen Sie eine Stack Overflow-Frage mit dem Tag google-chrome-devtools. Fügen Sie nach Möglichkeit Screenshots oder Links zu reproduzierbaren Seiten hinzu.

Wenn Sie ein Experte für die Laufzeitleistung werden möchten, müssen Sie lernen, wie der Browser HTML, CSS und JS in Pixel auf einem Bildschirm umwandelt. Am besten rufen Sie dazu die Übersicht zur Renderingleistung auf. Im Artikel The Anatomy Of A Frame (Die Anatomie eines Frames) gehen wir noch detaillierter darauf ein.

Schließlich gibt es viele Möglichkeiten, die Laufzeitleistung zu verbessern. In diesem Tutorial haben wir uns auf einen bestimmten Animationseinschränkungsfall konzentriert, um Ihnen einen detaillierten Überblick über den Bereich „Leistung“ zu geben. Es gibt jedoch viele weitere Engpässe, auf die Sie stoßen können. Im Rest der Reihe zur Renderingleistung finden Sie viele gute Tipps zur Verbesserung verschiedener Aspekte der Laufzeitleistung, z. B.: