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:

  1. Ö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.

  2. 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/

  3. Drücken Sie Befehlstaste + Wahltaste + I (Mac) oder Strg + Umschalttaste + I (Windows, Linux), um die DevTools zu öffnen.

    Die Demo auf der linken Seite und die DevTools auf der rechten Seite.

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.

  1. Klicken Sie in den DevTools auf den Tab Leistung.
  2. Das Kästchen für Screenshots muss aktiviert sein.
  3. Klicken Sie auf Aufnahmeeinstellungen . In den DevTools werden Einstellungen angezeigt, die sich auf die Erfassung von Leistungsmesswerten beziehen.

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

    CPU-Drosselung auf 4-fache Verlangsamung festgelegt.

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.

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

  2. Klicken Sie auf Optimieren. Die blauen Quadrate sollten sich schneller und gleichmäßiger bewegen.

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

  1. Klicken Sie in den Entwicklertools auf Aufzeichnen . In den Entwicklertools werden Leistungsmesswerte erfasst, während die Seite ausgeführt wird.

    Demoseite wird profiliert.

  2. Warten Sie einige Sekunden.

  3. Klicken Sie auf Beenden. In DevTools wird die Aufzeichnung beendet, die Daten werden verarbeitet und die Ergebnisse werden im Bereich Leistung angezeigt.

    Die Seite mit dem Bericht zur Nutzersegmentierung.

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.

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

    Das FPS-Diagramm ist hervorgehoben.

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

    Das CPU-Diagramm und der Tab „Zusammenfassung“

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

    Screenshot in einer Leistungsaufzeichnung ansehen

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

    Bewegen Sie den Mauszeiger auf einen Frame.

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.

  1. Drücken Sie Befehlstaste + Umschalttaste + P (Mac) oder Strg + Umschalttaste + P (Windows, Linux), um das Befehlsmenü zu öffnen.
  2. Geben Sie im Befehlsmenü Rendering ein und wählen Sie Rendering anzeigen aus.

  3. Aktivieren Sie im Bereich Rendering die Option Rendering-Statistiken anzeigen. Rechts oben im Darstellungsbereich wird ein neues Overlay angezeigt.

    Das Messtool für die Framerate.

  4. 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?

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

    Der Tab „Zusammenfassung“ ist blau umrandet.

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

    Der Hauptbereich

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

    Es wurde herangezoomt auf ein einzelnes Ereignis vom Typ „Animation Frame Fired“.

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

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

    Weitere Informationen zum Ereignis „Animation Frame Fired“

  6. 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).

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

    Die Codezeile, die das erzwungene Layout verursacht hat.

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.

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