Moderne Browser können zwei CSS-Eigenschaften kostengünstig animieren: transform und opacity.
Wenn Sie etwas anderes animieren, erreichen Sie
wahrscheinlich keine flüssigen 60 Bilder pro Sekunde (fps).
In diesem Beitrag wird erläutert, warum das so ist.
Animationsleistung und Framerate
Es ist weithin anerkannt, dass bei Animationen von beliebigen Inhalten im Web eine Framerate von 60 fps das Ziel ist. Diese Framerate sorgt dafür, dass Ihre Animationen flüssig erscheinen. Im Web ist ein Frame die Zeit, die für die Aktualisierung und Aktualisierung des Bildschirms benötigt wird. Wenn jeder Frame nicht innerhalb von 16,7 ms abgeschlossen wird (1.000 ms ÷ 60 👉 16,7), nehmen Nutzer die Verzögerung wahr.
Rendering-Pipeline
Um Inhalte auf einer Webseite anzuzeigen, muss der Browser die folgenden Schritte nacheinander ausführen:
- Stil: Berechnen Sie die Stile, die auf die Elemente angewendet werden.
- Layout: Damit generieren Sie die Geometrie und Position für jedes Element.
- Farbe: Füllen Sie die Pixel für jedes Element in Ebenen aus.
- Zusammengesetzt: Die Ebenen werden auf dem Bildschirm gezeichnet.
Diese vier Schritte werden als Rendering-Pipeline des Browsers bezeichnet.
Wenn Sie etwas auf einer bereits geladenen Seite animieren, müssen diese Schritte wiederholt werden. Dieser Prozess beginnt mit dem Schritt, der geändert werden muss, damit die Animation stattfinden kann.
Wie bereits erwähnt, sind diese Schritte sequentiell. Wenn Sie beispielsweise etwas animieren, das das Layout ändert, müssen die Farb- und die zusammengesetzten Schritte ebenfalls noch einmal ausgeführt werden. Das Animieren von etwas, das das Layout ändert, ist daher teurer als das Animieren von etwas, das nur den Aufbau ändert.
Layouteigenschaften animieren
Layoutänderungen umfassen die Berechnung der Geometrie (Position und Größe) aller von der Änderung betroffenen Elemente.
Wenn Sie ein Element ändern, muss möglicherweise die Geometrie anderer Elemente neu berechnet werden.
Wenn Sie beispielsweise die Breite des <html>-Elements ändern, wirkt sich das möglicherweise auf alle untergeordneten Elemente aus.
Da Elemente überlaufen und sich gegenseitig beeinflussen, können Änderungen weiter unten in der Baumstruktur manchmal zu Layoutberechnungen bis zurück zum Anfang führen.
Je größer die Struktur sichtbarer Elemente, desto länger dauert es, Layoutberechnungen durchzuführen.
Farbeigenschaften animieren
Mit Farbe wird festgelegt, in welcher Reihenfolge Elemente auf dem Bildschirm dargestellt werden sollen. Sie ist häufig die am längsten ausgeführte aller Aufgaben in der Pipeline.
Der Großteil der Malerei in modernen Browsern erfolgt in Softwarerastern. Je nachdem, wie die Elemente in Ihrer App in Ebenen gruppiert sind, müssen unter Umständen auch andere Elemente außer dem geänderten Element gerendert werden.
Zusammengesetzte Eigenschaften animieren
Beim Kombinieren wird die Seite in Ebenen unterteilt, die Informationen darüber, wie die Seite in Pixel dargestellt werden soll (Rasterung) und die Ebenen zu einer Seite zusammengefügt (Compositing).
Aus diesem Grund ist die Property opacity in der Liste der Elemente enthalten, die kostengünstig animiert werden können.
Solange sich diese Eigenschaft in einer eigenen Schicht befindet, können Änderungen daran von der GPU während des Compositing-Schritts vorgenommen werden.
Chromium-basierte Browser und WebKit erstellen eine neue Ebene für jedes Element, das auf opacity einen CSS-Übergang oder eine Animation hat.
Was ist eine Ebene?
Wenn die Elemente, die animiert werden oder die auf eine neue Ebene übertragen werden, platziert werden, muss der Browser nur diese Elemente neu streichen, nicht alles andere. Vielleicht sind Sie mit dem Konzept von Photoshop vertraut, das eine Reihe von Elementen enthält, die zusammen verschoben werden können. Ähnlich wie die Rendering-Ebenen eines Browsers.
Der Browser kann gut entscheiden, welche Elemente sich auf einer neuen Ebene befinden sollen. Wenn ein Element fehlt, gibt es jedoch Möglichkeiten, die Erstellung von Ebenen zu erzwingen. Weitere Informationen dazu finden Sie unter Animationen mit hoher Leistung erstellen. Das Erstellen neuer Ebenen sollte jedoch mit Bedacht erfolgen, da jede Schicht Speicher verbraucht. Auf Geräten mit begrenztem Arbeitsspeicher kann das Erstellen neuer Ebenen ein größeres Leistungsproblem verursachen als das, das Sie zu lösen versuchen. Außerdem müssen die Texturen jeder Ebene auf die GPU hochgeladen werden. Dies kann zu Bandbreitenbeschränkungen zwischen CPU und GPU kommen.
CSS- und JavaScript-Leistung im Vergleich
Sie fragen sich vielleicht: Ist es aus Leistungssicht besser, CSS oder JavaScript für Animationen zu verwenden?
CSS-basierte Animationen und Web Animationen (in Browsern, die die API unterstützen) werden normalerweise in einem Thread verarbeitet, der auch als Compositor-Thread bezeichnet wird. Dies unterscheidet sich vom Hauptthread des Browsers, in dem Stil, Layout, Painting und JavaScript ausgeführt werden. Wenn der Browser also teure Aufgaben im Hauptthread ausführt, können diese Animationen ohne Unterbrechung fortgesetzt werden.
Wie in diesem Artikel erläutert, können andere Änderungen an Transformationen und an der Deckkraft in vielen Fällen auch vom Compositor-Thread übernommen werden.
Wenn eine Animation Farbe, Layout oder beides auslöst, ist der Hauptthread erforderlich, um zu arbeiten. Dies gilt sowohl für CSS- als auch für JavaScript-Animationen. Der Overhead für Layout oder Paint wird wahrscheinlich alle Vorgänge in Bezug auf die CSS- oder JavaScript-Ausführung in den Vordergrund stellen, wodurch die Frage schief gehen kann.