Leistungsüberwachung in CSS-Animationen

Veröffentlicht

(Virendra Singh) (22. April 2020)

Animation mit JavaScript ? oder Animation mit CSS ?

Diese Frage trifft jeden Entwickler einmal oder wahrscheinlich zweimal oder öfter in seiner technischen Karriere.

Im Laufe der Zeit haben sich Javascript-Freaks viele Bibliotheken ausgedacht, um Animationen im Browser zu erstellen, und alle scheint überzeugt zu sein, diese Bibliotheken als Standardlösung zu verwenden. Aber Moment mal, ist das die richtige Lösung? Sollten wir Animationen mit JavaScript machen? Oder können wir uns auf die native CSS-Implementierung verlassen, um Animationen besser und leistungsfähiger zu machen?

Da Sie diesen Blog lesen, gehe ich davon aus, dass Sie mit JavaScript-Animationen vertraut sind. Lassen Sie uns also „CSS-basierte Animation“ im Detail und verschiedene Varianten von CSS-Animationen sowie deren Auswirkungen auf die Leistung untersuchen.

Die Grundlage der Animation basiert auf einigen CSS-Eigenschaften, die Sie häufig in CSS-basierten Animationen verwenden Implementierungen.

Position: (absolut / relativ)

Transformation

Deckkraft

links, rechts, oben, unten und viele mehr.

Betrachten wir zunächst die Ergebnisse von zwei Experimenten mit unterschiedlichen CSS-Eigenschaften für die Animation.

(a) Position absolut mit links und oben

(b) transformiere

Warum versuchen wir nicht, anhand dieser Experimente Schlussfolgerungen zur Leistung und Renderzeit zu ziehen?

Wenn wir uns diese beiden Beispiele ansehen, fühlt es sich ähnlich an Funktionalität wurde imp trotz unterschiedlicher Ansätze umgesetzt. Wenn wir jedoch die Leistungsmetriken in Chrome Dev-Tool messen, sehen wir in beiden Fällen einen tatsächlichen Leistungsunterschied.

Bevor wir uns eingehend mit diesen Leistungsmetriken befassen, müssen wir verstehen, wie der Browser funktioniert rendert die Benutzeroberfläche und alle Aktionen, die bei einer Aktualisierung der Benutzeroberfläche ausgeführt werden.

Die Erstellung der Benutzeroberfläche beginnt also mit:

1) Berechnen Sie die Stile, die auf die Elemente angewendet werden sollen (Stil neu berechnen)

2) Erstellen Sie das Layout der Elemente und positionieren Sie sie auf dem Bildschirm (Layout).

3) Fügen Sie die Pixel in alle erstellten Layouts ein. Es geht eher darum, eine Bitmap für jede Ebene zu erstellen. Die GPU verwendet diese Bitmap, um die Ebene auf dem Bildschirm zu rendern (Malen).

4) Zuletzt erstellen Sie die Ebenen auf dem Bildschirm und erstellen einen Stapel von Ebenen. Die Draufsicht auf diesen Stapel sieht aus wie eine vollständige Webseite, auf der jedes Element seine eigene Position hat (zusammengesetzte Ebenen).

Die Erstellung zusammengesetzter Ebenen ist ein Ort, an dem die CPU mit der GPU spricht die Animation. Mit Eigenschaften wie Transformation und Deckkraft können wir den Browser zwingen, Animationen anstelle von GPU durchzuführen CPU.

Wie hilft uns die GPU, eine reibungslose Animation durchzuführen?

Die GPU ist eine weitere kleine Maschine für unsere Animation und kann eine große Anzahl von UI-Berechnungen verarbeiten.

Wenn die Erstellung einer zusammengesetzten Ebene ausgelöst wird, wird eine weitere Ebene erstellt. Dies ist eine weitere Möglichkeit, um zu vermeiden, dass das animierte Element und andere Teile der UI-Elemente erneut gerendert werden.

In der Abbildung unten scheinen sich beide roten Kugeln auf derselben Ebene zu befinden. Wenn wir diese Ebene jedoch in 3D-Rotation verschieben, stellen wir fest, dass die Transform Animation hat eine weitere Ebene, die für die rote Kugel erstellt wurde und eine reibungslose Animation bietet.

Die GPU behält diesen Renderobjektbaum im Speicher und ohne erneutes Rendern kann diese Ebene über die anderen legen. Bei Animationen oben links wird jedoch aufgrund von Änderungen dieser Eigenschaften immer wieder dieselbe Ebene gerendert. Wenn wir das Verhalten dieser beiden CSS-Eigenschaften überprüfen, werden wir feststellen, dass beide Eigenschaften und top wirken sich auf das Layout aus und verursachen auch einen Repaint- und Composite-Vorgang.

vs Top / Links

Die obige Animation des Balls weist einen deutlichen Unterschied zwischen übersetzen gegen oben / links .

Im Fall von oben / links Animation, der Ball wird an jeder Position gerendert, bis er das endgültige Ziel erreicht, und wenn er sich wieder an die Ausgangsposition bewegt, startet er den Rendering-Teil.

Hinweis: Die Farbe Lila stellt die Layouterstellung der roten Kugel dar und die grüne Farbe wird zum Ablegen der Pixel verwendet.

Beide Bilder oben sind ein Screenshot der Leistung von translate gegenüber oben / links .

Durch Hervorheben einer einzelnen Aufgabe von jeder beginnen wir zu verstehen dass die von der Aufgabe ausgeführte Aktivität in beiden Fällen unterschiedlich ist. Im oberen / linken Fall führte die Aufgabe die Layouterstellung, das Malen und die Neuberechnung des Stils durch. Im Fall von translate wird eine einzelne Aufgabe von der ausgeführt Die GPU verschiebt die zusammengesetzte Ebene, ohne etwas in DOM zu rendern.

Mit der GPU-Leistung halten wir unseren Haupt-Thread frei. Dies hilft uns, die Anwendungsleistung zu steigern, und unser Hauptthread ist mit dem Rendern des Layouts beschäftigt.

Das obige Leistungsmetrikdiagramm liefert weitere Hinweise und erklärt das genaue Ausmaß, in dem unser Hauptthread mit der Neuberechnung von Layout und Stil beschäftigt ist. Dieses Diagramm spiegelt kontinuierlich die Änderungen auf der Benutzeroberfläche wider.

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.