Riepilogo: Chromium sta aggiornando automaticamente le proprie funzionalità di accelerazione hardware per le animazioni SVG, le trasformazioni basate su percentuale e, a breve, le animazioni del colore di sfondo e dei percorsi di clip.
Per quanto riguarda le prestazioni delle animazioni web, è probabile che vengano utilizzati i termini "animazioni con accelerazione hardware" e "accelerazione GPU". Ma che cosa significano? Gli stili con accelerazione hardware sono quelli che utilizzano la GPU (Graphical Processing Unit) anziché la CPU (Central Processing Unit) per il rendering degli stili visivi. Questo perché la GPU può eseguire il rendering delle modifiche visive su una pagina web più velocemente della CPU.
L'utilizzo della GPU per ridurre il carico di transizioni e animazioni che richiedono un uso intensivo della grafica significa immagini più fluide e meno jank, poiché queste animazioni non sono interessate dal thread principale. Estraili dal thread principale, le animazioni bypasseranno la parte di altri script attivi in esecuzione sulla pagina, il che rallenta le immagini e crea jank.
Abilitazione delle animazioni con accelerazione hardware
Le animazioni con accelerazione hardware vengono composte come livelli e aiutano gli sviluppatori a ottenere animazioni a 60 f/s (frame al secondo) fluide per migliorare le prestazioni di rendering visivo. Al momento, esistono diversi modi per specificare e attivare animazioni e transizioni con accelerazione hardware sul web:
- Utilizza le funzioni
transformCSS o esegui la transizione dei valoriopacityofilter - Aggiungi la proprietà
will-changeall'elemento. - Crea un disegno animato del canvas tramite
OffscreenCanvas - Crea un disegno 3D WebGL
opacity, filter e
transform, ma a breve background-color e clip-path entreranno a far parte dell'elenco. Cos'altro sta diventando l'accelerazione hardware per impostazione predefinita in Chromium? Ci sono alcuni aspetti che entrano in gioco nella pipeline, incluse le animazioni SVG, che gli sviluppatori hanno richiesto con estrema attenzione.
Animazioni SVG con accelerazione hardware
Il formato SVG rappresenta un'ottima aggiunta a qualsiasi sito web e ora le interazioni con questo tipo di contenuti possono risultare più efficaci. A partire da Chromium 89, Chrome unirà elementi come Firefox per attivare l'accelerazione hardware per impostazione predefinita nelle animazioni SVG. Cosa deve fare lo sviluppatore? Niente: questa operazione verrà applicata automaticamente alle animazioni SVG in Chromium 89 e versioni successive.
Esempio
Diamo un'occhiata alle differenze tra un'animazione SVG con e senza accelerazione hardware attivata. Gli indicatori di caricamento sono elementi di interfaccia utente di uso comune, come questo su facebook.com. Questi indicatori suggeriscono che il lavoro viene svolto sul server, mentre l'utente attende una risposta. Nel caso mostrato qui, la risposta consiste nel caricare risultati aggiuntivi nella barra laterale.
Quando apriamo DevTools, possiamo iniziare a profilare e vedere davvero le differenze tra un'esperienza di animazione con accelerazione CPU e GPU.
Come puoi notare, a sinistra (Chromium 87), la ricolorazione viene eseguita ogni volta che la rotellina si anima (in continuo). Sulla destra non è presente alcuna ridipingimento (Chromium 89 e Firefox). Possiamo verificare questa funzionalità nel riquadro Rendering DevTools, quando attivi il flashing della colorazione.
Esaminando meglio il riquadro Rendimento, puoi nuovamente vedere questo effetto e come influisce sul rendimento complessivo della tua proprietà web. Eviterai completamente il tempo di rendering e disegno per l'animazione, il che significa animazioni più fluide e applicazioni più performanti. Anche se Facebook non distribuirà questo caricatore basato su SVG fino a quando il supporto browser per SVG con accelerazione hardware non sarà maggiore, consentirebbe una maggiore flessibilità in termini di tematizzazione, requisiti di scalabilità e risoluzione e manutenzione più semplice.
Percentuale di animazioni
Il team delle interazioni offre anche il supporto per le animazioni di trasformazione percentuale in
Chromium 89. Le animazioni basate sulla percentuale descrivono le interazioni che includono il movimento
basato sulla percentuale. Ad esempio, puoi ingrandire un elemento del 20% o far scorrere un menu della barra laterale adattabile
dall'esterno dello schermo utilizzando un elemento come translateX: -100%.
Questi tipi di animazioni dell'interfaccia utente sono relativamente comuni, ma al momento non sfruttano l'accelerazione hardware perché in precedenza non era possibile comporre tali animazioni. Le percentuali nelle trasformazioni dipendono dalle dimensioni della casella (ovvero dal layout), ma ora, se le dimensioni del layout non cambiano ogni frame, il browser può precalcolare i valori di trasformazione assoluti ed eseguirli come se lo sviluppatore avesse fornito valori in pixel. La buona notizia è che il team di Chromium sta lavorando a questa funzionalità e presto, questi tipi di animazioni verranno compositi automaticamente e con accelerazione hardware.
E adesso?
Queste animazioni aggiornate renderanno gli stili web molto più fluidi. Come già detto, il team è sempre alla ricerca
di capire quali nuove esigenze del web emergono. Al momento, abbiamo in programma di convertire background-color e clip-path in modo da utilizzare automaticamente l'accelerazione hardware nelle versioni future di Chromium.
background-color è una priorità per via del suo elevato
numero di utilizzo per transizioni ed
effetti, mentre clip-path consente effetti di transizione molto più efficaci sul web. Quando le prestazioni incontrano l'interattività, tutti vincono.
Immagine di copertina: Siora Photography per Unsplash.