In modernen Browsern können zwei CSS-Eigenschaften kostengünstig animiert werden: transform und opacity.
Wenn Sie etwas anderes animieren, ist es wahrscheinlich, dass Sie nicht die satten 60 Frames pro Sekunde (fps) erreichen.
In diesem Beitrag wird erklärt, warum das so ist.
Animationsleistung und Framerate
Es ist weithin anerkannt, dass eine Framerate von 60 fps das Ziel für Animationen im Web ist. Mit dieser Framerate sehen Ihre Animationen flüssig aus. Im Web ist ein Frame die Zeit, die für die Aktualisierung und Neugestaltung des Bildschirms benötigt wird. Wenn jeder Frame nicht innerhalb von 16,7 ms (1.000 ms ÷ 60 ≈ 16,7) fertiggestellt wird, nehmen Nutzer die Verzögerung wahr.
Die Rendering-Pipeline
Damit etwas auf einer Webseite angezeigt werden kann, muss der Browser die folgenden Schritte ausführen:
- Stil: Hier werden die Stile berechnet, die auf die Elemente angewendet werden.
- Layout: Hier werden die Geometrie und die Position für jedes Element generiert.
- Farbe: Füllen Sie die Pixel für jedes Element in Ebenen aus.
- Composite: Die Ebenen werden auf dem Bildschirm gezeichnet.
Diese vier Schritte werden als Rendering-Pipeline des Browsers bezeichnet.
Wenn Sie etwas auf einer Seite animieren, die bereits geladen wurde, müssen diese Schritte erneut ausgeführt werden. Dieser Prozess beginnt mit dem Schritt, der geändert werden muss, damit die Animation stattfinden kann.
Wie bereits erwähnt, sind diese Schritte abfolgeabhängig. Wenn Sie beispielsweise etwas animieren, das das Layout ändert, müssen auch die Schritte „Paint“ und „Composite“ noch einmal ausgeführt werden. Die Animation von etwas, das das Layout ändert, ist daher teurer als die Animation von etwas, das nur die Komposition ändert.
Layouteigenschaften animieren
Bei Layoutänderungen wird die Geometrie (Position und Größe) aller von der Änderung betroffenen Elemente berechnet.
Wenn Sie ein Element ändern, muss die Geometrie anderer Elemente möglicherweise neu berechnet werden.
Wenn Sie beispielsweise die Breite des <html>-Elements ändern, kann sich das auf eines seiner untergeordneten Elemente auswirken.
Da Elemente überlaufen und sich gegenseitig beeinflussen, können Änderungen weiter unten im Stammbaum manchmal zu Layoutberechnungen bis ganz oben führen.
Je größer der Baum der sichtbaren Elemente ist, desto länger dauert es, die Layoutberechnungen durchzuführen.
Farbeigenschaften animieren
Bei der Paint-Phase wird festgelegt, in welcher Reihenfolge Elemente auf dem Bildschirm dargestellt werden sollen. Dies ist häufig die am längsten laufende aller Aufgaben in der Pipeline.
Der Großteil der Darstellung in modernen Browsern erfolgt in Software-Rasterizern. Je nachdem, wie die Elemente in Ihrer App in Ebenen gruppiert sind, müssen neben dem geänderten möglicherweise auch andere Elemente gezeichnet werden.
Zusammengesetzte Eigenschaften animieren
Beim Compositing wird die Seite in Ebenen unterteilt, die Informationen dazu, wie die Seite aussehen soll, in Pixel umgewandelt (Rasterung) und die Ebenen zu einer Seite zusammengesetzt (Compositing).
Aus diesem Grund ist die opacity-Property in der Liste der Elemente enthalten, die sich kostengünstig animieren lassen.
Solange sich diese Eigenschaft in einer eigenen Ebene befindet, können Änderungen daran während des Compositing-Schritts von der GPU verarbeitet werden.
Chromium-basierte Browser und WebKit erstellen eine neue Ebene für jedes Element, das einen CSS-Übergang oder eine CSS-Animation auf opacity hat.
Was ist eine Ebene?
Wenn Sie die Elemente, die animiert oder übergangen werden sollen, auf eine neue Ebene platzieren, muss der Browser nur diese Elemente neu zeichnen und nicht alles andere. Vielleicht kennen Sie das Konzept einer Photoshop-Ebene, die mehrere Elemente enthält, die gemeinsam verschoben werden können. Die Darstellungsebenen im Browser ähneln diesem Konzept.
Der Browser trifft zwar gute Entscheidungen darüber, welche Elemente auf einer neuen Ebene sein sollten, aber wenn er eine übersieht, gibt es Möglichkeiten, das Erstellen der Ebene zu erzwingen. Weitere Informationen finden Sie unter Leistungsstarke Animationen erstellen. Das Erstellen neuer Ebenen sollte jedoch mit Bedacht erfolgen, da jede Ebene Arbeitsspeicher belegt. Auf Geräten mit begrenztem Arbeitsspeicher kann das Erstellen neuer Ebenen zu einem größeren Leistungsproblem führen als dem, das Sie beheben möchten. Außerdem müssen die Texturen jeder Ebene auf die GPU hochgeladen werden. Daher kann es zu Einschränkungen bei der Bandbreite zwischen CPU und GPU kommen.
Leistung von CSS im Vergleich zu JavaScript
Sie fragen sich vielleicht, ob es aus Leistungssicht besser ist, CSS oder JavaScript für Animationen zu verwenden?
CSS-basierte Animationen und Webanimationen in Browsern, die die API unterstützen, werden normalerweise in einem als zusammengesetzten Thread bezeichneten Thread verarbeitet. Dies unterscheidet sich vom Hauptthread des Browsers, in dem Styling, Layout, Painting und JavaScript ausgeführt werden. Das bedeutet, dass diese Animationen auch dann weiterlaufen können, wenn der Browser einige ressourcenintensive Aufgaben im Hauptthread ausführt.
Wie in diesem Artikel erläutert, können auch andere Änderungen an Transformationen und Deckkraft in vielen Fällen vom Compositor-Thread verarbeitet werden.
Wenn eine Animation das Zeichnen, das Layout oder beides auslöst, muss der Hauptthread die Arbeit erledigen. Das gilt sowohl für CSS- als auch für JavaScript-Animationen. Der Overhead von Layout oder Paint wird wahrscheinlich jede Arbeit im Zusammenhang mit der Ausführung von CSS oder JavaScript in den Schatten stellen, sodass die Frage irrelevant wird.