Animazioni e rendimento

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

Paul Lewis

Sam Thorogood

Mantieni la frequenza di 60 f/s ogni volta che attivi l'animazione, perché una riduzione inferiore causa stuttering o blocchi che saranno evidenti per gli utenti e incide negativamente sulle loro esperienze.

• Fai attenzione che le animazioni non causino problemi di prestazioni e assicurati di conoscere l'impatto dell'animazione di una determinata proprietà CSS.
• Le animazioni delle proprietà che modificano la geometria della pagina (layout) o causano il disegno sono particolarmente costose.
• Se possibile, limita la modifica a trasformazioni e opacità.
• Utilizza will-change per assicurarti che il browser sappia cosa intendi animare.

L'animazione delle proprietà non è gratuita e alcune sono più economiche da animare rispetto ad altre. Ad esempio, l'animazione dei valori width e height di un elemento ne modifica la geometria e potrebbe causare lo spostamento o la modifica delle dimensioni di altri elementi sulla pagina. Questo processo è chiamato layout (o ripetizione del flusso nei browser basati su Gecko come Firefox) e può essere costoso se la pagina contiene molti elementi. Ogni volta che viene attivato il layout, in genere è necessario disegnare la pagina o parte di essa, il che in genere è ancora più costoso dell'operazione di layout stessa.

Se possibile, evita di animare le proprietà che attivano il layout o la pittura. Per la maggior parte dei browser moderni, ciò significa limitare le animazioni a opacity o transform, entrambe ottimizzate in modo elevato dal browser; non importa se l'animazione è gestita da JavaScript o CSS.

Leggi una guida completa sulla creazione di animazioni ad alto rendimento.

Utilizzo della proprietà will-change

Utilizza will-change per assicurarti che il browser sappia che intendi modificare la proprietà di un elemento. Ciò consente al browser di applicare le ottimizzazioni più appropriate prima che apporti la modifica. Tuttavia, non utilizzare troppo will-change, perché il browser potrebbe sprecare risorse, causando a sua volta ulteriori problemi di prestazioni.

La regola generale è che se l'animazione potrebbe essere attivata nei 200 ms successivi, a causa dell'interazione di un utente o dello stato dell'applicazione, è consigliabile impostare will-change sugli elementi in animazione. Nella maggior parte dei casi, quindi, per qualsiasi elemento della visualizzazione corrente dell'app che intendi animare deve essere attivato will-change per le proprietà che prevedi di modificare. Nel caso dell'esempio di riquadro che abbiamo utilizzato nelle guide precedenti, l'aggiunta di will-change per le trasformazioni e l'opacità ha il seguente aspetto:

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

Ora i browser che la supportano, attualmente la maggior parte dei browser moderni, apporteranno le ottimizzazioni appropriate per supportare la modifica o l'animazione di tali proprietà.

Rendimento CSS e JavaScript

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

• Le animazioni basate su CSS e le animazioni web, se supportate in modo nativo, vengono generalmente gestite in un thread noto come "thread del compositore". È diverso dal "thread principale" del browser, in cui vengono eseguiti stile, layout, disegno e JavaScript. Ciò significa che se il browser esegue alcune 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 compositore.

• Se un'animazione attiva la pittura, il layout o entrambi, il "thread principale" dovrà eseguire un'operazione. Questo vale sia per le animazioni basate su CSS che su JavaScript e il sovraccarico del layout o della pittura probabilmente supererà qualsiasi lavoro associato all'esecuzione di CSS o JavaScript, rendendo la domanda irrilevante.