Monitoraggio delle prestazioni nelle animazioni CSS

Pubblicato il

(Virendra Singh) (22 aprile 2020)

Animazione utilizzando JavaScript ? o Animazione utilizzando CSS ?

Questa domanda colpisce tutti gli sviluppatori una volta, o probabilmente due o più, nella loro carriera tecnica.

Nel corso del tempo, i fanatici di Javascript hanno escogitato molte librerie per fare animazioni nel browser e tutti sembra convinto di utilizzare queste librerie come soluzione standard. Ma, aspetta, è questa la soluzione giusta? Dovremmo fare lanimazione usando JavaScript? Oppure possiamo fare affidamento sullimplementazione CSS nativa per eseguire lanimazione in modo migliore ed efficiente?

Dato che stai leggendo questo blog, presumo che tu abbia familiarità con le animazioni JavaScript. Quindi esploriamo in dettaglio l “animazione basata su CSS” e vari tipi di animazione CSS insieme alle loro implicazioni sulle prestazioni.

La base dellanimazione si basa su alcune proprietà CSS che userete spesso nellanimazione basata su CSS. implementazioni.

posizione: (assoluta / relativa)

trasformare

opacità

sinistra, destra, in alto, in basso e molti altri.

Iniziamo esaminando i risultati di due esperimenti con diverse proprietà CSS per lanimazione.

(a) posizione assoluta con

(b) trasformare

Inoltre, perché non proviamo a trarre conclusioni sulle prestazioni e sui tempi di rendering in base a questi esperimenti?

Osservando questi due esempi, sembra che sia simile la funzionalità è stata imp lementato nonostante lutilizzo di approcci diversi. Tuttavia, quando misuriamo le metriche delle prestazioni nello strumento di sviluppo di Chrome, vediamo una differenza effettiva in termini di prestazioni per entrambi i casi.

Prima di approfondire per comprendere queste metriche delle prestazioni, dobbiamo capire come esegue il rendering dellinterfaccia utente e di tutte le azioni che esegue quando viene eseguito un aggiornamento sullinterfaccia utente.

Quindi la creazione dellinterfaccia utente inizia con:

1) Calcola gli stili che verranno applicati agli elementi (Ricalcola stile)

2) Creare il layout degli elementi e posizionarli sullo schermo (Layout)

3) Aggiungere i pixel in tutti i layout creati, è più che altro creare bitmap per ogni livello. GPU usa questa bitmap per renderizzare il livello sullo schermo (Paint)

4) Infine, crea i livelli sullo schermo, costruendo una pila di livelli. La vista dallalto di questo stack apparirà come una pagina web completa in cui ogni elemento ha la sua posizione (Strati Compositi)

La creazione di Strati Compositi è un luogo in cui la CPU parla con la GPU, per gestire lanimazione. Utilizzando proprietà come transform and opacity, possiamo forzare il browser a eseguire lanimazione utilizzando GPU invece di CPU.

In che modo la GPU ci aiuta a eseguire unanimazione fluida?

GPU è unaltra piccola macchina per gestire la nostra animazione e può gestire un gran numero di calcoli dellinterfaccia utente.

Quindi, quando si attiva la creazione di un livello composito, crea un altro livello. Questo è un altro modo per aiutarci a evitare di ripetere il rendering dellelemento che si sta animando e di altre parti degli elementi dellinterfaccia utente.

Nellimmagine seguente, entrambe le palline rosse sembrano essere sullo stesso livello. Tuttavia, quando spostiamo questo livello nella rotazione 3D, troviamo che Transform lanimazione ha un altro livello che è stato creato per la pallina rossa, fornendo unanimazione fluida.

La GPU mantiene questo albero degli oggetti di rendering in memoria e, senza eseguire nuovamente il rendering , può mettere questo livello sopra gli altri. Tuttavia, nel caso dellanimazione in alto a sinistra, lo stesso livello viene visualizzato più volte a causa delle modifiche a queste proprietà. Se controlliamo il comportamento di queste due proprietà CSS, vedremo che entrambe le proprietà hanno lasciato e top impatta il layout, provocando anche unoperazione di ridipintura e composita

Traduci vs Top / A sinistra

Lanimazione della palla sopra ha una chiara differenza tra traduci vs in alto / a sinistra .

In caso di in alto / a sinistra , la pallina viene renderizzata in ogni posizione fino a raggiungere la destinazione finale e, quando inizia a spostarsi di nuovo nella posizione iniziale, inizia la parte di rendering.

Nota: il colore viola rappresenta la creazione del layout della pallina rossa e il colore verde viene utilizzato per archiviare i pixel.

Entrambe le immagini sopra sono uno screenshot di come si comporta translate rispetto a top / left .

Evidenziando una singola attività di ciascuna, iniziamo a capire che lattività eseguita dallattività è diversa in entrambi i casi. Nel caso in alto / a sinistra , lattività ha eseguito la creazione del layout, la pittura e il ricalcolo dello stile. Nel caso di translate , una singola attività eseguita dal La GPU sposta il livello composito senza eseguire il rendering di nulla in DOM.

Quindi, con la potenza della GPU, manteniamo libero il nostro thread principale. Questo ci aiuta a migliorare le prestazioni dellapplicazione e il nostro thread principale è impegnato nel rendering del layout.

Il grafico della metrica delle prestazioni sopra fornisce ulteriori prove, spiegando lesatta misura in cui il nostro thread principale è impegnato nel ricalcolo del layout e dello stile. Questo grafico riflette continuamente i cambiamenti che avvengono nellinterfaccia utente.

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *