Laufzeitleistung analysieren

Kayce Basques

Hinweis:Unter Websitegeschwindigkeit optimieren erfahren Sie, wie Sie dafür sorgen, dass Ihre Seiten schneller geladen werden.

Die Laufzeitleistung gibt die Leistung Ihrer Seite an, wenn sie ausgeführt wird, nicht wenn sie geladen wird. In dieser Anleitung erfahren Sie, wie Sie mithilfe des Steuerfelds „Leistung“ in den Chrome-Entwicklertools die Laufzeitleistung analysieren. Für das RAIL-Modell eignen sich die Fähigkeiten, die Sie in dieser Anleitung erlernen, für die Analyse der Antwort-, Animations- und Inaktivitätsphasen Ihrer Seite.

Achtung:Diese Anleitung basiert auf Chrome 59. Wenn Sie eine andere Version von Chrome verwenden, können sich die Benutzeroberfläche und die Funktionen der Entwicklertools unterscheiden. Mit chrome://help können Sie feststellen, welche Chrome-Version Sie verwenden.

Erste Schritte

In dieser Anleitung öffnen Sie die Entwicklertools auf einer Live-Seite und verwenden das Steuerfeld „Leistung“, um einen Leistungsengpass auf der Seite zu finden.

1. Öffnen Sie Google Chrome im Inkognitomodus. Der Inkognitomodus sorgt dafür, dass Chrome in einem sauberen Zustand ausgeführt wird. Wenn Sie beispielsweise viele Erweiterungen installiert haben, können diese Erweiterungen die Leistungsmessung verfälschen.

2. Laden Sie die folgende Seite in Ihr Inkognitofenster. Dies ist die Demo, für die Sie ein Profil erstellen werden. Auf der Seite sind 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+Umschalt+I (Windows, Linux), um die Entwicklertools zu öffnen.

   

   Abbildung 1. Links die Demo und rechts die Entwicklertools

   Hinweis: Für die restlichen Screenshots wurde die Entwicklertools in einem separaten Fenster geöffnet, damit du den Inhalt besser sehen kannst.

Mobile CPU simulieren

Mobilgeräte haben viel weniger CPU-Leistung als Computer und Laptops. Wenn Sie ein Profil für eine Seite erstellen, verwenden Sie CPU-Drosselung, um die Leistung Ihrer Seite auf Mobilgeräten zu simulieren.

1. Klicken Sie in den Entwicklertools auf den Tab Leistung.
2. Das Kästchen Screenshots muss angeklickt sein.
3. Klicken Sie auf Aufnahmeeinstellungen . Die Entwicklertools zeigen die Einstellungen für die Erfassung von Leistungsmesswerten an.

4. Wählen Sie für CPU die Option 2x rate aus. Die Entwicklertools drosseln die CPU so, dass sie doppelt so langsamer ist als üblich.

   

   Abbildung 2. CPU-Drosselung, blau umrandet

   Hinweis: Wenn Sie beim Testen anderer Seiten prüfen möchten, ob sie auf Low-End-Mobilgeräten gut funktionieren, stellen Sie die CPU-Drosselung auf 20-facher Verlangsamung ein. Diese Demo funktioniert nicht gut mit einer 20-fachen Verlangsamung. Daher wird zu Lehrzwecken nur die doppelte Verlangsamung verwendet.

Demo einrichten

Es ist schwierig, eine Demo zur Laufzeitleistung zu erstellen, die für alle Leser dieser Website einheitlich funktioniert. In diesem Abschnitt können Sie die Demo so anpassen, dass sie unabhängig von Ihrer jeweiligen Konfiguration weitgehend mit den Screenshots und Beschreibungen in dieser Anleitung übereinstimmt.

1. Klicken Sie so lange auf 10 hinzufügen, bis sich die blauen Quadrate deutlich langsamer bewegen als zuvor. Auf einem High-End-Computer kann dies etwa 20 Klicks dauern.

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

   Hinweis: Wenn Sie keinen merklichen Unterschied zwischen der optimierten und der nicht optimierten Version feststellen, klicken Sie mehrmals auf 10 abziehen und versuchen Sie es noch einmal. Wenn Sie zu viele blaue Quadrate addieren, ist die CPU-Auslastung ausgelastet und Sie werden keinen großen Unterschied in den Ergebnissen der beiden Versionen sehen.

3. Klicken Sie auf Optimierung aufheben. Die blauen Quadrate bewegen sich langsamer und es kommt wieder zu Verzögerungen.

Laufzeitleistung aufzeichnen

Wenn Sie die optimierte Version der Seite ausführen, bewegen sich die blauen Quadrate schneller. Why is that? Beide Versionen sollten jedes Quadrat in der gleichen Zeit um die gleiche Menge an Platz verschieben. Sehen Sie sich eine Aufzeichnung im Bereich „Leistung“ an, um zu erfahren, wie Sie Leistungsengpässe in der nicht optimierten Version erkennen können.

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

   

   Abbildung 3: Profil für die Seite erstellen

2. Warten Sie einige Sekunden.

3. Klicken Sie auf Beenden. Die Entwicklertools beenden die Aufzeichnung, verarbeiten die Daten und zeigen die Ergebnisse dann im Steuerfeld „Leistung“ an.

   

   Abbildung 4: Ergebnisse des Profils

Wow, das ist eine unglaubliche Menge an Daten. Keine Sorge, bald wird alles Sinn ergeben.

Ergebnisse analysieren

Sobald Sie die Leistung der Seite aufgezeichnet haben, können Sie deren Leistung messen und die Ursache(n) finden.

Bilder pro Sekunde analysieren

Der wichtigste Messwert zur Leistungsmessung bei Animationen sind die Bilder pro Sekunde (fps). Die Nutzer freuen sich, wenn Animationen mit 60 fps ausgeführt werden.

1. Sehen Sie sich das Diagramm für die fps an. Wenn du einen roten Balken über fps siehst, ist die Framerate so niedrig, dass die Nutzererfahrung beeinträchtigt wird. Allgemein gilt: Je höher der grüne Balken, desto höher die fps.

   

   Abbildung 5: FPS-Diagramm (blau umrandet)

2. Unter dem Diagramm fps sehen Sie das Diagramm CPU. Die Farben im Diagramm CPU entsprechen den Farben auf dem Tab Zusammenfassung unten im Steuerfeld „Leistung“. Das farbig dargestellte CPU-Diagramm weist darauf hin, dass die CPU während der Aufzeichnung aufgebraucht war. Wenn die CPU über einen längeren Zeitraum hinweg überlastet ist, ist dies ein Hinweis darauf, wie Sie weniger Arbeit leisten können.

   

   Abbildung 6: Das CPU-Diagramm und der Tab „Zusammenfassung“, blau umrandet

3. Bewegen Sie den Mauszeiger auf die Diagramme FPS, CPU oder NET. Die Entwicklertools zeigen einen Screenshot der Seite zu diesem Zeitpunkt. Bewegen Sie die Maus nach links und rechts, um die Aufnahme noch einmal abzuspielen. Dies wird als Scrubbing bezeichnet und ist nützlich, um den Verlauf von Animationen manuell zu analysieren.

   

   Abbildung 7: Screenshot der Seite um die 2.000 ms-Marke der Aufnahme herum anzeigen

4. Bewegen Sie den Mauszeiger im Bereich Frames auf eines der grünen Quadrate. Die Entwicklertools zeigen die fps für diesen Frame an. Jeder Frame liegt wahrscheinlich deutlich unter dem Zielwert von 60 fps.

   

   Abbildung 8: Bewegen des Mauszeigers auf einen Frame

Bei dieser Demo ist es natürlich ziemlich offensichtlich, dass die Seite keine gute Leistung erzielt. In realen Szenarien ist dies jedoch möglicherweise nicht so klar, sodass es nützlich ist, all diese Tools zur Messung zu haben.

Bonus: FPS-Anzeige öffnen

Ein weiteres praktisches Tool ist das Messtool für die Bilder pro Sekunde, das Echtzeit-Schätzungen der Bilder pro Sekunde während der Ausführung der Seite liefert.

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

3. Aktivieren Sie auf dem Tab Rendering die Option FPS-Messtool. Rechts oben im Darstellungsbereich wird ein neues Overlay angezeigt.

   

   Abbildung 9: fps-Messtool

4. Deaktivieren Sie das FPS-Messtool und drücken Sie die Esc-Taste, um den Tab Rendering zu schließen. Sie werden sie in dieser Anleitung nicht verwenden.

Engpass finden

Nachdem Sie gemessen und überprüft haben, ob die Animation nicht gut funktioniert, lautet die nächste Frage: Warum?

1. Beachten Sie die Registerkarte „Zusammenfassung“. Wenn keine Ereignisse ausgewählt sind, wird auf diesem Tab eine Aufschlüsselung der Aktivitäten angezeigt. Die Seite hat die meiste Zeit mit dem Rendern verbracht. Da Leistung die Kunst ist, weniger Arbeit zu erledigen, besteht Ihr Ziel darin, den Zeitaufwand für das Rendern zu reduzieren.

   

   Abbildung 10: Der blau umrandete Tab „Zusammenfassung“

2. Maximieren Sie den Hauptbereich. Die Entwicklertools zeigen ein Flammendiagramm der Aktivitäten im Hauptthread im Zeitverlauf. Die X-Achse stellt die Aufzeichnung 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 die Ereignisse übereinander gestapelt sind, bedeutet dies, dass die oberen Ereignisse die niedrigeren Ereignisse verursacht haben.

   

   Abbildung 11: Blau umrandeter Hauptbereich

3. Die Aufzeichnung enthält viele Daten. Zoomen Sie ein einzelnes Ereignis vom Typ Animation Frame Triggerd (Ausgelöste Animationsframe) heran. Klicken Sie dazu auf Übersicht, halten Sie die Maustaste gedrückt und ziehen Sie die Maus über die Diagramme mit den fps-, CPU- und NET-Diagrammen. Im Hauptbereich und auf dem Tab Zusammenfassung werden nur Informationen für den ausgewählten Teil der Aufzeichnung angezeigt.

   

   Abbildung 12: Heranzoomen bei einem einzelnen ausgelösten Animationsframe-Ereignis

   Hinweis: Sie können auch den Hauptbereich heranzoomen, indem Sie auf seinen Hintergrund klicken oder einen Termin auswählen und dann die Tasten W, A, S und D drücken.

4. Beachten Sie das rote Dreieck oben rechts beim Ereignis Animation Frame Ausgelöst. Wenn Sie ein rotes Dreieck sehen, weist dies auf ein Problem mit diesem Ereignis hin.

   Hinweis: Das Ereignis Animation Frame Fired (Bewegungsframe ausgelöst) tritt immer dann auf, wenn ein requestAnimationFrame()-Callback ausgeführt wird.

5. Klicken Sie auf das Ereignis Animation Frame Ausgelöst. Auf dem Tab Zusammenfassung finden Sie jetzt Informationen zu diesem Ereignis. Beachte den Link Enthüllung. Wenn Sie darauf klicken, wird in den Entwicklertools das Ereignis hervorgehoben, das das Ereignis Animation Frame Ausgelöste ausgelöst hat. Beachten Sie auch den Link app.js:94. Wenn Sie darauf klicken, gelangen Sie zur entsprechenden Zeile im Quellcode.

   

   Abbildung 13: Weitere Informationen zum Ereignis „Animation Frame Triggerd“

   Hinweis: Nachdem Sie ein Ereignis ausgewählt haben, können Sie es mit den Pfeiltasten daneben auswählen.

6. Unter dem Ereignis app.update finden Sie eine Reihe lilafarbener Ereignisse. Wären sie breiter, sieht es so aus, als hätten sie ein rotes Dreieck. Klicken Sie jetzt auf eines der lilafarbenen Layout-Ereignisse. In den Entwicklertools finden Sie auf dem Tab Zusammenfassung weitere Informationen zum Ereignis. Es gibt sogar eine Warnung zu erzwungenen Umbrüchen (ein anderes Wort für Layout).

7. Klicken Sie auf dem Tab Zusammenfassung unter Layout erzwungen auf den Link app.js:70. Die Entwicklertools führen Sie zur Codezeile, die das Layout erzwungen hat.

   

   Abbildung 13: Codezeile, die das erzwungene Layout verursacht hat

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

Geschafft! Das war eine Menge Arbeit, aber Sie haben jetzt eine solide Grundlage im grundlegenden Workflow zur Analyse der Laufzeitleistung. Gut gemacht.

Bonus: Optimierte Version analysieren

Klicken Sie unter Verwendung der Workflows und Tools, die Sie gerade kennengelernt haben, in der Demo auf Optimieren, um den optimierten Code zu aktivieren, eine weitere Leistungsaufzeichnung zu erstellen und dann die Ergebnisse zu analysieren. Von der verbesserten Framerate bis hin zur Reduzierung der Ereignisse im Flame-Diagramm im Main-Bereich kannst du sehen, dass die optimierte Version der App viel weniger Arbeit erledigt, was zu einer besseren Leistung führt.

Hinweis:Selbst diese optimierte Version ist nicht besonders gut, weil damit immer noch die top-Eigenschaft jedes Quadrats geändert wird. Ein besserer Ansatz besteht darin, sich an Eigenschaften zu halten, die sich nur auf die Zusammensetzung auswirken. Weitere Informationen finden Sie unter Änderungen an Transformationen und Deckkraft für Animationen verwenden.

Nächste Schritte

Die Grundlage für das Verständnis der Leistung ist das RAIL-Modell. Mit 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, damit Sie sich besser mit dem Steuerfeld „Leistung“ vertraut machen können. Erstellen Sie ein Profil für Ihre eigenen Seiten und analysieren Sie die Ergebnisse. Wenn Sie Fragen zu den Ergebnissen haben, öffnen Sie eine Stack Overflow-Frage mit dem Tag google-chrome-devtools. Fügen Sie wenn möglich Screenshots oder Links zu reproduzierbaren Seiten hinzu.

Um ein Experte für Laufzeitleistung zu werden, müssen Sie lernen, wie der Browser HTML, CSS und JS in Pixel auf einem Bildschirm umwandelt. Der beste Ausgangspunkt ist die Übersicht über die Rendering-Leistung. In The Anatomy Of A Frame (Anatomie eines Frames) gibt es noch mehr Details.

Zu guter Letzt gibt es viele Möglichkeiten, die Laufzeitleistung zu verbessern. In dieser Anleitung ging es um einen bestimmten Animationsengpass, um Ihnen eine detaillierte Tour durch den Bereich „Leistung“ zu zeigen. Dies ist jedoch nur einer von vielen Engpässen, die auftreten können. Der Rest der Reihe zur Rendering-Leistung enthält viele gute Tipps zur Verbesserung verschiedener Aspekte der Laufzeitleistung, z. B.:

• JS-Ausführung optimieren
• Umfang und Komplexität von Stilberechnungen reduzieren
• Große, komplexe Layouts und Layout-Thrashing vermeiden
• Farbkomplexität vereinfachen und Farbflächen reduzieren
• Eigenschaften nur für zusammengesetzte Eigenschaften beibehalten und Anzahl der Ebenen verwalten
• Eingabe-Handler entprellen