Riepilogo: Chromium sta aggiornando automaticamente le funzionalità di accelerazione hardware per le animazioni SVG, le trasformazioni basate sulla percentuale e, a breve, le animazioni del colore di sfondo e dei percorsi dei clip.
Per quanto riguarda il rendimento dell'animazione web, probabilmente verranno utilizzati i termini "con accelerazione hardware" e "accelerazione GPU". Ma cosa significano? Gli stili con accelerazione hardware sfruttano la GPU (Graphical Processing Unit) anziché la CPU (Central Processing Unit) per il rendering degli stili visivi. Questo perché la GPU è in grado di eseguire il rendering delle modifiche visive su una pagina web più velocemente rispetto alla CPU.
Usare la GPU per ridurre il carico di transizioni e animazioni che richiedono un uso intensivo della grafica significa immagini più fluide e meno interruzioni, poiché queste animazioni non sono interessate dal thread principale. Rimuovendole dal thread principale, le tue animazioni bypasseranno la base di altri script attivi in esecuzione sulla pagina, il che rallenterebbe le tue immagini e creerà jank.
Attivazione delle animazioni con accelerazione hardware
Le animazioni con accelerazione hardware sono composte come livelli e aiutano gli sviluppatori a ottenere animazioni a 60 FPS (frame al secondo) fluide e burrose per migliorare le prestazioni del rendering visivo. Attualmente esistono alcuni 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 su tela animato tramite
OffscreenCanvas - Creare un disegno 3D WebGL
opacity, filter e transform per il momento, background-color e clip-path presto entreranno nell'elenco. Cos'altro sta diventando l'accelerazione hardware per impostazione predefinita in Chromium? Ci sono alcune cose in arrivo nella pipeline, comprese le animazioni SVG, che gli sviluppatori hanno richiesto con grande interesse.
Animazioni SVG con accelerazione hardware
Il formato SVG è un'ottima aggiunta a qualsiasi sito web e ora le interazioni con i file SVG possono essere più efficaci. A partire dalla versione 89 di Chromium, Chrome si unirà ad altri browser come Firefox per attivare per impostazione predefinita l'accelerazione hardware nelle animazioni SVG. Che cosa devi fare in qualità di sviluppatore? Niente, questo verrà applicato automaticamente per le 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 dell'interfaccia utente di uso comune, come questo visibile su facebook.com. Questi indicatori suggeriscono che l'operazione viene eseguita sul server, mentre l'utente attende una risposta. Nel caso mostrato qui, la risposta sarà 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.
Puoi notare che sulla sinistra (Chromium 87) viene eseguito il ridipingere ogni volta che si attiva l'animazione dell'icona di rotazione (in modo continuo). Sulla destra non è possibile eseguire il repainting (Chromium 89 e Firefox). Possiamo verificarlo nel riquadro Rendering DevTools quando attiviamo il flash di Paint.
Esaminando più da vicino il riquadro Rendimento, puoi osservare nuovamente l'effetto e il modo in cui influisce sul rendimento complessivo della tua proprietà web. Evita completamente il tempo di rendering e pittura per l'animazione, il che significa animazioni più fluide e applicazioni più performanti. Facebook non spedisce questo caricatore basato su SVG fino a quando non sarà più supportato dal browser il formato SVG con accelerazione hardware, ma offrirebbe una maggiore flessibilità in termini di requisiti di temi, scalabilità e risoluzione, oltre a una manutenzione più semplice.
Animazioni percentuali
Il team Interactions fornisce anche il supporto per le animazioni con trasformazione percentuale in Chromium 89. Le animazioni basate sulla percentuale descrivono le interazioni che includono il movimento su base percentuale. Ad esempio, puoi ingrandire un elemento del 20% o far scorrere un menu della barra laterale adattabile dalla parte fuori 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 queste animazioni. Le percentuali delle trasformazioni dipendono dalle dimensioni della casella (ovvero il layout), ma ora, finché 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 i valori dei pixel. La buona notizia è che il team di Chromium sta lavorando a questa funzionalità e, a breve, questi tipi di animazioni saranno automaticamente composte e con accelerazione hardware.
E adesso?
Queste animazioni aggiornate renderanno molto più fluido lo stile web. Come accennato in precedenza, il team cerca
sempre di individuare le nuove esigenze del web. Al momento siamo in programma di convertire
background-color e clip-path per utilizzare automaticamente l'accelerazione hardware nelle versioni future di
Chromium.
background-color è una priorità data l'elevato
conteggio di utilizzo per transizioni
ed effetti e clip-path consente effetti di transizione molto più performanti sul web. Quando prestazioni incontra interattività, tutti vincono.
Immagine di copertina: Siora Photography per Unsplash.