Zusammenfassung: Chromium aktualisiert seine Hardwarebeschleunigung automatisch für SVG-Animationen, prozentbasierte Transformationen und bald für Hintergrundfarben und Clippfad-Animationen.
Wenn es um die Leistung von Webanimationen geht, kommen wahrscheinlich die Begriffe „hardwarebeschleunigte“ und „GPU-beschleunigte“ Animation vor. Aber was bedeuten diese überhaupt? Hardwarebeschleunigte Stile sind Stile, die die GPU (Graphical Processing Unit) anstelle der CPU (Central Processing Unit) nutzen, um visuelle Stile zu rendern. Dies liegt daran, dass die GPU visuelle Änderungen auf einer Webseite schneller rendern kann als die CPU.
Die Verwendung der GPU zur Auslagerung grafikintensiver Übergänge und Animationen sorgt für flüssigere Grafiken und weniger Verzögerungen, da diese Animationen nicht vom Hauptthread beeinträchtigt werden. Wenn Sie sie aus dem Hauptthread entfernen, umgehen Ihre Animationen die Kruste anderer aktiver Skripts, die auf Ihrer Seite ausgeführt werden. Dies würde Ihre Bilder verlangsamen und zu Verzögerungen führen.
Hardwarebeschleunigte Animationen aktivieren
Hardwarebeschleunigte Animationen werden als Schichten zusammengesetzt. So können Entwickler flüssige Animationen mit 60 fps (Bilder pro Sekunde) erstellen, um die visuelle Rendering-Leistung zu verbessern. Es gibt derzeit einige Möglichkeiten, hardwarebeschleunigte Animationen und Übergänge im Web festzulegen und zu aktivieren:
transform-CSS-Funktionen verwenden oder dieopacity- oderfilter-Werte umstellen- Fügen Sie Ihrem Element die Eigenschaft
will-changehinzu. - Über
OffscreenCanvaseine animierte Leinwandzeichnung erstellen - WebGL-3D-Zeichnung erstellen
opacity, filter und transform. background-color und clip-path werden aber bald in die Liste aufgenommen. Was wird in Chromium außerdem standardmäßig hardwarebeschleunigt? In Zukunft kommen einige Dinge hinzu, darunter SVG-Animationen, die Entwickler intensiv beantragt haben.
Hardwarebeschleunigte SVG-Animationen
SVG ist eine tolle Ergänzung für jede Website und jetzt können diese Interaktionen mit SVG noch leistungsfähiger sein. Ab Chromium 89 wird auch Chrome wie Firefox hinzugefügt, um die Hardwarebeschleunigung standardmäßig für SVG-Animationen zu aktivieren. Was müssen Sie als Entwickler tun? Nichts – dies wird in Chromium 89 und höher automatisch auf SVG-Animationen angewendet.
Beispiel
Sehen wir uns die Unterschiede zwischen einer SVG-Animation mit und ohne aktivierter Hardwarebeschleunigung an. Ladeanzeigen sind häufig verwendete UI-Elemente, wie sie beispielsweise auf facebook.com zu sehen sind. Diese Indikatoren weisen darauf hin, dass die Arbeit auf dem Server ausgeführt wird, während der Nutzer auf eine Antwort wartet. In dem hier gezeigten Fall wäre die Antwort, zusätzliche Ergebnisse in die Seitenleiste zu laden.
Wenn wir die Entwicklertools öffnen, sehen wir die Unterschiede zwischen einer CPU- und einer GPU-beschleunigten Animation.
Auf der linken Seite (Chromium 87) wird jedes Mal, wenn sich das rotierende Ladesymbol wiederholt, wiederholt. Auf der rechten Seite wird kein Neuanstrichen angezeigt (Chromium 89 und Firefox). Das können wir in den Entwicklertools im Rendering-Bereich testen, wenn wir das blinken von Paint aktivieren.
Wenn Sie sich das Steuerfeld „Leistung“ genauer ansehen, können Sie wieder sehen, wie sich dieser Effekt auf die Gesamtleistung Ihrer Web-Property auswirkt. Sie vermeiden die Rendering- und Painting-Zeit für die Animation vollständig, was flüssigere Animationen und leistungsstärkere Anwendungen bedeutet. Facebook wird dieses SVG-basierte Ladeprogramm erst dann bereitstellen, wenn die Browserunterstützung für hardwarebeschleunigte SVG-Technologie höher ist, aber es bietet mehr Flexibilität in Bezug auf Design, Skalierung und Auflösung und eine einfachere Wartung.
Prozentsatz-Animationen
Das Interactions-Team bietet auch Support für prozentuale Transformationsanimationen in Chromium 89. Prozentbasierte Animationen beschreiben Interaktionen, die prozentuale Bewegungen beinhalten. Sie können beispielsweise etwas um 20 % vertikal skalieren oder ein responsives Seitenleistenmenü mit einem Format wie translateX: -100% von außerhalb des Bildschirms verschieben.
Diese Arten von UI-Animationen kommen relativ häufig vor, nutzen jedoch derzeit die Hardwarebeschleunigung nicht, da wir zuvor nicht in der Lage waren, solche Animationen zusammenzustellen. Prozentsätze in Transformationen hängen von der Boxgröße (d. h. dem Layout) ab. Solange sich die Layoutgröße 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. Bald werden Animationen dieser Art automatisch zusammengesetzt und hardwarebeschleunigt.
Wie geht es weiter?
Durch diese aktualisierten Animationen wird das Web-Design deutlich reibungsloser. Und wie bereits erwähnt, ist das Team
immer auf der Suche nach neuen Anforderungen im Web. Derzeit ist geplant, background-color und clip-path in zukünftigen Chromium-Versionen automatisch auf die Hardwarebeschleunigung umzustellen.
background-color hat aufgrund der hohen Nutzung für Übergänge und Effekte Priorität. clip-path ermöglicht wesentlich leistungsfähigere Übergangseffekte im Web. Wenn Leistung auf Interaktivität trifft, gewinnen alle!
Titelbild: Siora Photography für Unsplash.