Zusammenfassung: Chromium aktualisiert seine Hardwarebeschleunigungsfunktionen automatisch für SVG-Animationen, prozentbasierte Transformationen und bald auch für Hintergrundfarben- und Clip-Path-Animationen.
Im Hinblick auf die Leistung von Webanimationen werden wahrscheinlich die Begriffe „hardwarebeschleunigte“ und „GPU-beschleunigte“ Animationen vorkommen. Aber was bedeuten diese überhaupt? Hardwarebeschleunigte Stile nutzen zum Rendern visueller Stile die GPU (Graphical Processing Unit) anstelle der CPU (Central Processing Unit). Das liegt daran, dass die GPU visuelle Änderungen auf einer Webseite schneller rendern kann als die CPU.
Die Verwendung der GPU zum Auslagern grafikintensiver Übergänge und Animationen führt zu flüssigeren Bildern und weniger Verzögerungen, da diese Animationen vom Hauptthread nicht betroffen sind. Wenn Sie sie aus dem Hauptthread ziehen, umgehen Ihre Animationen den gesamten Umfang anderer aktiver Skripts, die auf Ihrer Seite ausgeführt werden. Dies würde die Darstellung verlangsamen und zu Verzögerungen führen.
Hardwarebeschleunigte Animationen aktivieren
Hardwarebeschleunigte Animationen werden als Ebenen zusammengesetzt und helfen Entwicklern, flüssige Animationen mit 60 fps (Bilder pro Sekunde) zu erzielen, um die Leistung des visuellen Renderings zu verbessern. Es gibt derzeit mehrere Möglichkeiten, hardwarebeschleunigte Animationen und Übergänge im Web festzulegen und zu aktivieren:
- Verwenden Sie CSS-Funktionen vom Typ
transformoder ändern Sie die Werteopacityoderfilter - Fügen Sie Ihrem Element das Attribut
will-changehinzu. - Mit
OffscreenCanvaseine animierte Leinwandzeichnung erstellen - WebGL-3D-Zeichnungen erstellen
opacity, filter und transform umfassen, werden background-color und clip-path bald in die Liste aufgenommen. Was wird in Chromium sonst noch hardwarebeschleunigt? In Zukunft werden noch weitere Funktionen folgen, darunter SVG-Animationen. Diese haben sich Entwickler sehr gern gewünscht.
Hardwarebeschleunigte SVG-Animationen
SVG ist eine hervorragende Ergänzung für jede Website und jetzt können diese Interaktionen mit SVG noch leistungsstärker sein. Ab Chromium 89 wird Chrome ähnlich wie Firefox die Hardwarebeschleunigung bei SVG-Animationen standardmäßig aktivieren. Was müssen Sie als Entwickler tun? Nichts, dies wird automatisch auf SVG-Animationen in Chromium 89 und höher angewendet.
Beispiel
Sehen wir uns die Unterschiede zwischen SVG-Animationen mit und ohne aktivierte Hardwarebeschleunigung an. Ladeindikatoren sind häufig verwendete UI-Elemente wie dieses auf facebook.com. Diese Indikatoren weisen darauf hin, dass die Arbeit auf dem Server ausgeführt wird, während der Nutzer auf eine Antwort wartet. Im hier gezeigten Fall würde die Antwort lauten, zusätzliche Ergebnisse in der Seitenleiste zu laden.
Wenn wir die Entwicklertools öffnen, können wir ein Profil erstellen und die Unterschiede zwischen einer CPU- und GPU-beschleunigten Animation erkennen.
Links (Chromium 87) wird jedes Mal aktualisiert, wenn das rotierende Ladesymbol fortlaufend animiert wird. Auf der rechten Seite ist keine Neuerstellung möglich (Chromium 89 und Firefox). Das können wir im Rendering-Bereich der Entwicklertools testen, wenn wir Paint-Flashing aktivieren.
Wenn Sie sich das Steuerfeld „Leistung“ genauer ansehen, können Sie diesen Effekt wieder erkennen und sehen, wie er sich auf die Gesamtleistung Ihrer Web-Property auswirkt. Sie vermeiden das Rendering und das Malen der Animation vollständig, was flüssigere Animationen und leistungsfähigere Anwendungen bedeutet. Facebook wird dieses SVG-basierte Ladeprogramm erst dann bereitstellen, wenn die Browserunterstützung für hardwarebeschleunigtes SVG verbessert wurde. Es würde jedoch mehr Flexibilität in Bezug auf Themen, Skalierung und Auflösung bieten und eine einfachere Wartung ermöglichen.
Prozentanimationen
Das Interactions-Team bietet auch Support für prozentuale Transformationsanimationen in Chromium 89. Prozentbasierte Animationen beschreiben Interaktionen, die prozentuale Bewegungen umfassen. Sie können beispielsweise etwas um 20 % hochskalieren oder mit translateX: -100% ein responsives Seitenleistenmenü aus dem Off-Bildschirm verschieben.
Diese Arten von UI-Animationen sind relativ üblich, nutzen aber derzeit nicht die Hardwarebeschleunigung, da wir solche Animationen früher nicht zusammensetzen konnten. Die Prozentsätze der Transformationen hängen von der Feldgröße (d. h. dem Layout) ab. Solange sich die Layoutgröße jetzt jedoch nicht jeden Frame ändert, kann der Browser die absoluten Transformationswerte vorab berechnen und sie so ausführen, als hätte der Entwickler Pixelwerte angegeben. Die gute Nachricht ist, dass das Chromium-Team an dieser Funktion arbeitet. Diese Arten von Animationen werden bald automatisch zusammengestellt und hardwarebeschleunigt.
Was kommt als Nächstes?
Durch diese aktualisierten Animationen wird das Web-Styling deutlich flüssiger gestaltet. Wie bereits erwähnt, ist das Team ständig auf der Suche
nach neuen Webanforderungen. Aktuell ist für background-color und clip-path in zukünftigen Chromium-Versionen geplant, die Hardwarebeschleunigung automatisch zu nutzen.
background-color hat aufgrund der hohen Nutzungsanzahl für Übergänge und Effekte Priorität. clip-path ermöglicht dagegen wesentlich leistungsfähigere Übergangseffekte im Web. Wenn Leistung auf Interaktivität trifft, gewinnen alle!
Titelbild: Siora Photography für Unsplash.