Animazioni e rendimento

Le animazioni devono avere un buon rendimento, altrimenti influiranno negativamente sull'esperienza utente.

Paul Lewis

Sam Thorogood

Mantieni una frequenza di 60 f/s ogni volta che attivi l'animazione, altrimenti meno interruzioni o stalli saranno evidenti per gli utenti e incideranno negativamente sulle loro esperienze.

• Verifica che le animazioni non causino problemi di rendimento e di conoscere l'impatto dell'animazione di una determinata proprietà CSS.
• L'animazione delle proprietà che modificano la geometria della pagina (layout) o causa la colorazione è particolarmente costosa.
• Dove puoi, attieniti alla modifica delle trasformazioni e dell'opacità.
• Usa will-change per assicurarti che il browser sappia cosa intendi animare.

Le proprietà di animazione non sono senza costi e alcune proprietà sono più economiche di altre. Ad esempio, animare gli elementi width e height di un elemento ne modifica la geometria e potrebbe causare lo spostamento o la modifica delle dimensioni di altri elementi della pagina. Questa procedura è chiamata layout (o adattamento dinamico del contenuto nei browser basati su Gecko come Firefox) e può essere costosa se la pagina ha molti elementi. Quando il layout viene attivato, in genere deve essere dipinto la pagina o parte di esso, il che in genere è ancora più costoso dell'operazione di layout stessa.

Dove puoi, evita di animare le proprietà che attivano il layout o la colorazione. Per la maggior parte dei browser moderni, questo significa limitare le animazioni a opacity o transform, entrambe le quali il browser possono ottimizzare altamente; non importa se l'animazione è gestita da JavaScript o CSS.

Leggi una guida completa sulla creazione di animazioni ad alte prestazioni.

Utilizzo della proprietà will-change

Utilizza will-change per assicurarti che il browser sappia che intendi modificare la proprietà di un elemento. In questo modo, il browser può applicare le ottimizzazioni più appropriate prima di apportare la modifica. Tuttavia, non abusare di will-change, perché così facendo potrebbe causare lo spreco di risorse del browser, causando a sua volta ancora più problemi di prestazioni.

Come regola generale, se l'animazione potrebbe essere attivata nei successivi 200 ms, dall'interazione di un utente o dallo stato dell'applicazione, è consigliabile impostare will-change sull'animazione degli elementi. Nella maggior parte dei casi, per ogni elemento della vista corrente dell'app che intendi animare, deve essere attivato will-change per le proprietà che intendi modificare. Nel caso dell'esempio di riquadro che abbiamo utilizzato nelle guide precedenti, l'aggiunta di will-change per le trasformazioni e l'opacità appare come segue:

.box {
  will-change: transform, opacity;
}

Ora i browser che lo supportano, attualmente quelli più moderni, apporteranno le ottimizzazioni appropriate per supportare la modifica o l'animazione di queste proprietà.

Rendimento CSS e JavaScript

Sul web sono disponibili numerose pagine e thread di commenti che discutono dei meriti relativi delle animazioni CSS e JavaScript dal punto di vista del rendimento. Ecco alcuni punti da tenere presente:

• Le animazioni basate su CSS e le animazioni web, se supportate in modo nativo, sono generalmente gestite in un thread noto come "thread compositor". È diverso dal "thread principale" del browser, in cui vengono eseguiti stile, layout, disegno e JavaScript. Ciò significa che se il browser esegue attività costose sul thread principale, queste animazioni possono continuare senza essere interrotte.

• In molti casi, anche altre modifiche alle trasformazioni e all'opacità possono essere gestite dal thread del compositor.

• Se un'animazione attiva la colorazione, il layout o entrambi, il "thread principale" dovrà funzionare. Questo vale sia per le animazioni basate su CSS che su JavaScript e il sovraccarico di layout o di disegno probabilmente sovrasterà qualsiasi lavoro associato all'esecuzione di CSS o JavaScript, rendendo il moot della domanda.