Laufzeitleistung analysieren

Kayce Basques

Die Laufzeitleistung gibt Aufschluss über die Leistung Ihrer Seite während der Ausführung, im Gegensatz zur Ladeleistung. In dieser Anleitung erfahren Sie, wie Sie mit dem Chrome-Entwicklertools-Steuerfeld „Leistung“ die Laufzeitleistung analysieren. In Bezug auf das RAIL-Modell sind die in dieser Anleitung erworbenen Fähigkeiten nützlich, um die Antwort-, Animations- und Inaktivitätsphase Ihrer Seite zu analysieren.

Jetzt starten

In dieser Anleitung verwenden wir das Steuerfeld Leistung, um einen Leistungsengpass auf einer Live-Seite 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 die Leistungsmessungen verfälschen.

  2. Laden Sie die folgende Seite in Ihr Inkognitofenster. Das ist die Demo, die Sie analysieren werden. Auf der Seite sind viele kleine blaue Quadrate zu sehen, die 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.

Mobile CPU simulieren

Mobilgeräte haben eine viel geringere CPU-Leistung als Computer und Laptops. Verwenden Sie für jedes Profil einer Seite 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 sind hierfür etwa 20 Klicks erforderlich.

  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. Die Tatsache, dass das CPU-Diagramm farbig ist, bedeutet, dass die CPU während der Aufzeichnung ausgeschöpft wurde. 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 das Diagramm FPS, CPU oder NET. in den Entwicklertools einen Screenshot der Seite zu diesem Zeitpunkt. Bewegen Sie die Maus nach links und rechts, um die Aufzeichnung noch einmal abzuspielen. Das 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. Jeder Frame liegt wahrscheinlich deutlich 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 realen Szenarien ist es jedoch möglicherweise nicht so verständlich, daher sind all diese Tools für Messungen nützlich.

Bonus: FPS-Messwert öffnen

Ein weiteres praktisches Tool ist das fps-Messtool, das Echtzeitschätzungen für die Framerate liefert, während die Seite ausgeführt wird.

  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. Oben rechts im Darstellungsbereich wird ein neues Overlay angezeigt.

    Die FPS-Anzeige.

  4. Deaktivieren Sie das fps-Messtool 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 überprüft haben, lautet die nächste Frage: Warum?

  1. Beachten Sie den Tab Zusammenfassung. Wenn keine Ereignisse ausgewählt sind, sehen Sie auf diesem Tab eine Aufschlüsselung der Aktivitäten. 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 Hauptbereich. 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 Aufzeichnung 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 Abschnitt Main (Hauptbereich) und auf dem Tab Summary (Zusammenfassung) werden nur Informationen zum 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. Wenn ein rotes Dreieck zu sehen ist, bedeutet dies, dass es ein Problem im Zusammenhang mit diesem Ereignis gibt. 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 ausgelöst“.

  6. Unter dem Ereignis app.update sind mehrere lilafarbene Ereignisse zu sehen. Wären sie breiter, 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 Neuformatierungen (ein anderes Wort für Layout).

  7. Klicken Sie auf dem Tab Zusammenfassung unter Erste Layout-Entwertung auf den Link neben app.update @. Mit DevTools gelangen Sie zu der 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 vorzunehmen und die Ergebnisse zu analysieren. Von der verbesserten Framerate bis hin zur Reduzierung der Ereignisse im Flame-Diagramm des Main-Bereichs wird deutlich, dass die optimierte Version der App viel weniger Arbeit ausführt, was zu einer besseren Leistung führt.

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 für Ihre 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. Der Rest der Reihe zur Renderingleistung enthält viele gute Tipps zur Verbesserung verschiedener Aspekte der Laufzeitleistung, z. B.: