(Un rapido sguardo dentro il browser)
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.
I browsers moderni hanno 2 threads di esecuzione.
The main thread
The compositor thread
La GPU (Graphics Processing Unit) e` presente in molti dispositivi mobile e tablet ed e` molto brava a fare queste cose:
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!
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
Meglio delegare il più attività possibili alla GPU
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".
Le proprietà particolarmente veloci da animare sono: