Performance delle
CSS animations e
CSS transitions

(Un rapido sguardo dentro il browser)

Obbiettivi

Capire come i browser gestiscono le animazioni, in modo da prevedere quali saranno le performance dell'animazione prima ancora di scriverla.

Essere in grado di realizzare animazioni quanto più fluide possibili, al fine di migliorare la user experience.

Sotto il cofano del browser

I browsers moderni hanno 2 threads di esecuzione.

The main thread

The compositor thread

• Esegue il vostro JavaScript.
• Calcola l'HTML e lo stile CSS.
• Costruisce il layout della pagina.
• Crea le bitmap degli elementi.
• Passa queste bitmap al compositor thread.

• Fa il render delle bitmaps sullo schermo via GPU.
• Chiede al Main Thread di aggiornare le bitmap per le parti visibili o da visualizzare a breve.
• Calcola quali parti della pagina sono visibili sullo schermo
• Calcola quali parti della pagina saranno a breve visibili sullo schermo durante lo scroll
• Muove le varie parti della pagina mentre si scrolla

la GPU

La GPU (Graphics Processing Unit) e` presente in molti dispositivi mobile e tablet ed e` molto brava a fare queste cose:

1. Il render di nuovi elementi sullo schermo
2. Renderizzare gli stessi elementi all'infinito
3. Renderizzare lo stesso elemento in una diversa posizione, rotazione o scala

Transition: height

Supponiamo di avere un elemento DIV e di applicare una transizione all'attributo HEIGHT

div {
    height: 100px;
    transition: height 1s linear;
}
 
div:hover {
    height: 200px;
}

I 2 threads del browser agiranno seguendo il seguente diagramma:

Nel caso in cui non si riuscisse a leggere...
http://blogs.adobe.com/webplatform/files/2014/03/animate-height-2x.png

I box arancioni sono quelli piu` costosi in termini di tempo

Quelli in turchese sono piu` rapidi

Il motivo per cui il browser riesegue il render dell'elemento cosi tante volte e` perche` l'elemento CAMBIA

cambiando l'height dell'elemento cambiano le sue dimensioni, costringendo il browser a ricalcolare il layout della pagina ad ogni ciclo.

That's not cool!

Transition: transform

Supponiamo ora di avere quest'altra situazione

div {
    transform: scale(0.5);
    transition: transform 1s linear;
}
 
div:hover {
    transform: scale(1.0);
}

I 2 threads del browser agiranno seguendo il seguente diagramma:

Nel caso in cui non si riuscisse a leggere...

http://blogs.adobe.com/webplatform/files/2014/03/animate-transform-2x.png

Buone notizie per il browser!

Una volta caricato l'elemento nella GPU e renderizzato, il layout non viene più modificato perché l'elemento viene trasformato.

La GPU e` molto veloce a fare il draw dell'elemento sullo schermo!

That's cool!

La capacità della GPU di trasformare gli elementi senza ricalcolarne le dimensioni e il layout della pagina è detta

GPU Compositing

o più comunemente

Hardware acceleration

Altri aspetti di cui tener presente

• Ogni elemento trasformato crea un layer nella GPU con una texture e occupa spazio in memoria. Troppi elementi possono creare dei comportamenti inaspettati, come crash o flickering.
   
• Ogni browser gestisce la GPU compositing a suo modo, e alcune operazioni vengono lasciate alla CPU
   
• Il passaggio di informazioni tra GPU e CPU avviene attraverso dei bus a banda limitata

Meglio delegare il più attività possibili alla GPU

Conclusioni

E` proibito animare l'height, width, margin, border, ecc... ?

No, se l'elemento e` piccolo e non porta grandi cambiamenti al layout della pagina le performance non ne risentiranno molto. Pero` possibile scegliere sarebbe meglio farlo con "cognizione di causa".

Basta tenere presente che...

Le proprietà particolarmente veloci da animare sono: 

• CSS transform
• CSS opacity
• CSS filter