Samenvatting: Chromium werkt zijn hardwareversnellingsmogelijkheden automatisch bij voor SVG-animaties, op percentages gebaseerde transformaties en binnenkort ook achtergrondkleur- en clippad-animaties.
Als het gaat om de prestaties van webanimaties, zullen de termen 'hardware-versnelde' en 'GPU-versnelde' animaties waarschijnlijk naar voren komen. Maar wat betekenen deze eigenlijk? Hardware-versnelde stijlen zijn stijlen die gebruik maken van de GPU (Graphical Processing Unit) in plaats van de CPU (Central Processing Unit) om visuele stijlen weer te geven. Dit komt omdat de GPU sneller visuele wijzigingen op een webpagina kan weergeven dan de CPU.
Het gebruik van de GPU om grafisch-intensieve overgangen en animaties te ontlasten betekent vloeiendere beelden en minder rommel, omdat deze animaties niet worden beïnvloed door de rode draad. Door ze uit de rode draad te halen, omzeilen uw animaties de korst van andere actieve scripts die op uw pagina worden uitgevoerd, wat uw beelden zou vertragen en rommel zou veroorzaken.
Hardwareversnelde animaties inschakelen
Door hardware versnelde animaties worden als lagen samengesteld en helpen ontwikkelaars uiterst vloeiende animaties van 60 FPS (frames per seconde) te realiseren om de visuele weergaveprestaties te verbeteren. Er zijn momenteel een aantal manieren om hardwareversnelde animaties en overgangen op internet te specificeren en in te schakelen:
- Gebruik CSS-
transformof zet deopacityoffilterover - Voeg de
will-changeeigenschap toe aan uw element. - Maak een geanimeerde canvastekening via
OffscreenCanvas - Maak een WebGL 3D-tekening
opacity , filter en transform omvatten, zullen background-color en clip-path binnenkort aan de lijst worden toegevoegd.Wat wordt er nog meer standaard door hardware versneld in Chromium? Er staan een aantal dingen op stapel, waaronder SVG-animaties, iets waar ontwikkelaars met klem om hebben gevraagd .
Hardwareversnelde SVG-animaties
SVG is een geweldige aanvulling op elke website, en nu kunnen de interacties met SVG beter presteren. Vanaf Chromium 89 sluit Chrome zich aan bij Firefox om hardwareversnelling standaard in te schakelen bij SVG-animaties. Wat moet u, de ontwikkelaar, doen? Niets: dit wordt automatisch toegepast op SVG-animaties in Chromium 89+.
Voorbeeld
Laten we eens kijken naar de verschillen tussen een SVG-animatie met en zonder ingeschakelde hardwareversnelling. Laadindicatoren zijn veelgebruikte UI-elementen, zoals deze te zien op facebook.com. Deze indicatoren geven aan dat er werk wordt gedaan op de server, terwijl de gebruiker op een reactie wacht. In het hier getoonde geval zou de reactie bestaan uit het laden van aanvullende resultaten in de zijbalk.
Wanneer we DevTools openen, kunnen we beginnen met het profileren en echt de verschillen zien tussen een CPU- en GPU-versnelde animatie-ervaring.
Je kunt zien dat aan de linkerkant (Chroom 87) opnieuw wordt geschilderd elke keer dat de spinner animeert (wat continu is). Aan de rechterkant is er geen herschildering (Chromium 89 en Firefox). We kunnen dit testen in het DevTools Rendering-paneel, wanneer Paint Flashing wordt ingeschakeld.
Als u het paneel Prestaties nader bekijkt, ziet u dit effect opnieuw en ziet u hoe dit de algehele prestaties van uw webproperty beïnvloedt. U vermijdt volledig de tijd voor het renderen en schilderen van de animatie, wat vloeiendere animaties en beter presterende toepassingen betekent. Hoewel Facebook deze SVG-gebaseerde lader pas zal leveren als de browserondersteuning voor hardware-versnelde SVG groter is, zou dit meer flexibiliteit mogelijk maken op het gebied van thema's, schaling en resolutievereisten, en eenvoudiger onderhoud.
Percentage animaties
Het Interactions-team levert ook ondersteuning voor animaties met procentuele transformatie in Chromium 89. Op percentages gebaseerde animaties beschrijven interacties die op percentages gebaseerde bewegingen omvatten. U kunt bijvoorbeeld iets met 20% vergroten, of een responsief zijbalkmenu van buiten het scherm verschuiven met behulp van zoiets als translateX: -100% .
Dit soort UI-animaties komen relatief vaak voor, maar maken momenteel geen gebruik van hardwareversnelling omdat we voorheen dergelijke animaties niet konden samenstellen. Percentages in transformaties zijn afhankelijk van de doosgrootte (dwz de lay-out), maar nu, zolang de lay-outgrootte niet elk frame verandert, kan de browser de absolute transformatiewaarden vooraf berekenen en deze uitvoeren alsof de ontwikkelaar pixelwaarden had opgegeven. Het goede nieuws is dat het Chromium-team aan deze functie werkt, en binnenkort zullen dit soort animaties automatisch worden samengesteld en hardwarematig worden versneld.
Wat komt er hierna?
Deze bijgewerkte animaties zullen de webstyling veel soepeler maken. En zoals hierboven vermeld, is het team altijd op zoek naar nieuwe webbehoeften. Op dit moment zijn we van plan background-color en clip-path te converteren om automatisch hardwareversnelling te gebruiken in toekomstige versies van Chromium.
background-color heeft prioriteit vanwege het hoge gebruiksaantal voor overgangen en effecten, en clip-path maakt veel performantere overgangseffecten op internet mogelijk. Wanneer prestatie en interactiviteit samenkomen, wint iedereen!
Omslagafbeelding: Siora Photography voor Unsplash.