Laufzeitleistung analysieren

Kayce Basken

Twitter GitHub Glitch

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

Die Laufzeitleistung beschreibt die Leistung Ihrer Seite, wenn sie ausgeführt wird (im Gegensatz zum Laden). In dieser Anleitung erfahren Sie, wie Sie im Bereich „Leistung“ der Chrome-Entwicklertools die Laufzeitleistung analysieren. Im Hinblick auf das RAIL-Modell sind die Fähigkeiten, die Sie in dieser Anleitung erlernen, für die Analyse der Phasen Antwort, Animation und Inaktivität Ihrer Seite nützlich.

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. Prüfen Sie chrome://help, um festzustellen, welche Chrome-Version Sie verwenden.

Mehr erfahren

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

1. Öffnen Sie Google Chrome im Inkognitomodus. Der Inkognitomodus sorgt dafür, dass Chrome fehlerfrei 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 Ihrem Inkognitofenster. Dies ist die Demo, zu der Sie ein Profil erstellen werden. Auf der Seite sind einige kleine blaue Quadrate zu sehen, die sich nach oben und unten bewegen.

   https://googlechrome.github.io/devtools-samples/jank/

3. Drücken Sie Befehlstaste+Option+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 wesentlich 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 . In den Entwicklertools sehen Sie Einstellungen für die Erfassung von Leistungsmesswerten.

4. Wählen Sie für CPU die Option 2x slow aus. DevTools drosselt die CPU, sodass sie doppelt so langsam ist wie sonst.

   

   Abbildung 2. CPU-Drosselung, blau umrandet

   Hinweis: Wenn du beim Testen anderer Seiten prüfen möchtest, ob sie auf Low-End-Mobilgeräten gut funktionieren, setze die CPU-Drosselung auf 20-fache Verlangsamung. Diese Demo funktioniert nicht gut mit einem 20-fachen Verlangsamen. Daher wird nur die 2-fache Verlangsamung zu Lehrzwecken 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 Einrichtung ungefähr den Screenshots und Beschreibungen in dieser Anleitung entspricht.

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

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 hinzufügen, wird die CPU einfach ausgeschöpft und Sie werden keinen großen Unterschied in den Ergebnissen für die beiden Versionen feststellen.

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

Laufzeitleistung aufzeichnen

Wenn Sie die optimierte Version der Seite ausführen, bewegen sich die blauen Quadrate schneller. Why is that? Beide Versionen sollen 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 einen Leistungsengpass in der nicht optimierten Version erkennen.

1. Klicken Sie in den Entwicklertools auf Record (Aufzeichnen) . DevTools erfasst Leistungsmesswerte während der Seite.

   

   Abbildung 3: Profilerstellung für die Seite

2. Warten Sie einige Sekunden.

3. Klicken Sie auf Beenden. Die Entwicklertools beenden die Aufzeichnung, verarbeitet die Daten und zeigt die Ergebnisse dann im Bereich „Leistung“ an.

   

   Abbildung 4: Die Ergebnisse des Profils

Wow, das ist eine riesige Menge an Daten. Keine Sorge, das wird gleich alles Sinn ergeben.

Ergebnisse analysieren

Sobald Sie die Leistung der Seite aufgezeichnet haben, können Sie messen, wie schlecht die Seite ist, und die Ursache(n) ermitteln.

Bilder pro Sekunde analysieren

Der wichtigste Messwert zur Leistungsmessung einer Animation ist die Anzahl der Bilder pro Sekunde (fps). Nutzer sind zufrieden, wenn Animationen mit 60 fps laufen.

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

   

   Abbildung 5: Das FPS-Diagramm, blau umrandet

2. Unterhalb des Diagramms für die fps (Bilder pro Sekunde) befindet sich das Diagramm CPU (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 voll ausgeschöpft war. Wenn die CPU über einen längeren Zeitraum hinweg überlastet ist, ist dies ein Hinweis darauf, nach Möglichkeiten zu suchen, weniger Arbeit zu erledigen.

   

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

3. Bewegen Sie den Mauszeiger auf die Diagramme FPS, CPU oder NET. DevTools zeigt einen Screenshot der Seite zu diesem Zeitpunkt an. Bewegen Sie den Mauszeiger nach links und rechts, um die Aufnahme noch einmal abzuspielen. Dies wird als Scrubbing bezeichnet und ist nützlich für die manuelle Analyse des Verlaufs von Animationen.

   

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

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

   

   Abbildung 8: Bewegen der Maus über einen Frame

Bei dieser Demo ist es natürlich ziemlich offensichtlich, dass die Seite keine gute Leistung erbringt. Aber in realen Szenarien ist es vielleicht nicht ganz so klar, sodass es praktisch ist, alle diese Tools zur Messung zu haben.

Bonus: FPS-Messtool öffnen

Ein weiteres praktisches Tool ist das Messtool für die Bilder pro Sekunde. Es zeigt Echtzeit-Schätzungen für die Bilder pro Sekunde an, während die Seite ausgeführt wird.

1. Drücken Sie Befehlstaste+Umschalttaste+P (Mac) oder Strg+Umschalt+P (Windows, Linux), um das Befehlsmenü zu öffnen.
2. Geben Sie im Befehlsmenü die ersten Buchstaben 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: Das Messtool für die fps (Bilder pro Sekunde)

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 ermitteln

Nachdem Sie nun gemessen und überprüft haben, dass die Animation nicht gut funktioniert, lautet die nächste Frage, die Sie beantworten müssen: 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 gerendert. Da Leistung die Kunst ist, weniger Arbeit zu erledigen, besteht Ihr Ziel darin, die Zeit für das Rendering zu reduzieren.

   

   Abbildung 10: Tab "Zusammenfassung" (blau umrandet)

2. Maximieren Sie den Bereich Main (Hauptbereich). Die Entwicklertools zeigen ein Flame-Diagramm 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 Sie die übereinander gestapelten Ereignisse sehen, bedeutet dies, dass die oberen Ereignisse die niedrigeren Ereignisse verursacht haben.

   

   Abbildung 11: Der Hauptbereich (blau umrandet)

3. Die Aufzeichnung enthält viele Daten. Zoomen Sie ein einzelnes Ereignis vom Typ Animation Frame Fired (Ausgelöste Animationsframe) heran. Klicken Sie dazu, halten Sie die Maus gedrückt und ziehen Sie die Maus über Overview. Dies ist der Bereich mit den Diagrammen FPS, CPU und NET. Auf den Tabs Main (Hauptseite) und Summary (Zusammenfassung) werden nur Informationen zum ausgewählten Teil der Aufzeichnung angezeigt.

   

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

   Hinweis: Eine andere Möglichkeit zum Zoomen ist, den Fokus auf den Hauptbereich zu setzen. Klicken Sie dazu auf seinen Hintergrund oder wählen Sie ein Ereignis aus und drücken Sie dann die Tasten W, A, S und D.

4. Beachten Sie das rote Dreieck oben rechts beim Ereignis Animation Frame Triggerd (Ausgelöste Animationsframe). Wenn Sie ein rotes Dreieck sehen, weist dies auf ein Problem im Zusammenhang mit diesem Ereignis hin.

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

5. Klicken Sie auf das Ereignis Animation Frame Triggerd (Ausgelöste Animationsframe). Auf dem Tab Zusammenfassung finden Sie jetzt Informationen zu diesem Ereignis. Beachten Sie den Link Anzeigen. Wenn Sie darauf klicken, wird in den Entwicklertools das Ereignis hervorgehoben, das das Ereignis Animation Frame Fired initiiert 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 zum Auslösen des Animationsframes

   Hinweis: Nachdem Sie ein Ereignis ausgewählt haben, können Sie mit den Pfeiltasten die daneben befindlichen Ereignisse 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 jede einzelne ein rotes Dreieck. Klicken Sie jetzt auf eines der lilafarbenen Layout-Ereignisse. Auf dem Tab Zusammenfassung finden Sie in den Entwicklertools weitere Informationen zu dem Ereignis. Es gibt tatsächlich eine Warnung zu erzwungenen Umbrüchen (ein anderes Wort für Layout).

7. Klicken Sie auf dem Tab Zusammenfassung unter Erzwungenes Layout auf den Link app.js:70. Mit den Entwicklertools gelangen 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 viel zu lernen, aber Sie haben jetzt eine solide Grundlage im grundlegenden Workflow zur Analyse der Laufzeitleistung. Gut gemacht.

Bonus: Optimierte Version analysieren

Klicken Sie mithilfe der Workflows und Tools, die Sie gerade kennengelernt haben, in der Demo auf Optimieren, um den optimierten Code zu aktivieren, eine weitere Leistungsaufzeichnung aufzunehmen und die Ergebnisse zu analysieren. Von der verbesserten Framerate bis zur Reduzierung der Ereignisse im Flame-Diagramm des Main-Bereichs können Sie 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, da sie weiterhin die top-Eigenschaft jedes Quadrats verändert. Ein besserer Ansatz besteht darin, bei Eigenschaften zu bleiben, 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. Bei diesem Modell erfahren Sie, welche Leistungsmesswerte für Ihre Nutzer am wichtigsten sind. Weitere Informationen finden Sie unter Messung der Leistung mit dem RAIL-Modell.

Übung macht den Meister, damit du dich besser mit dem Steuerfeld „Leistung“ vertraut machen kannst. Erstellen Sie Profile 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 nach Möglichkeit 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 zur Rendering-Leistung. In The Anatomy Of A Frame erhältst du noch mehr Details.

Zu guter Letzt gibt es viele Möglichkeiten, die Laufzeitleistung zu verbessern. In dieser Anleitung wurde ein bestimmter Engpass bei Animationen beschrieben, 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 zum Thema 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überschneidungen vermeiden
• Vereinfachung der Farben und Reduzierung der Farbflächen
• Eigenschaften nur für zusammengesetzte Elemente beibehalten und Anzahl der Ebenen verwalten
• Eingabe-Handler entprellen