Animazioni e rendimento

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

Paul Lewis
X Home page
Sam Thorogood

Mantieni 60 fps ogni volta che crei animazioni, perché un numero inferiore di frame al secondo comporta scatti o interruzioni che saranno evidenti per gli utenti e incideranno negativamente sulle loro esperienze.

  • Assicurati che le animazioni non causino problemi di prestazioni; 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 di 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. Questo processo si chiama layout (o riflusso nei browser basati su Gecko come Firefox) e può essere costoso se la pagina contiene molti elementi. Ogni volta che viene attivato il layout, è necessario colorare la pagina o parte di esso, il che in genere è ancora più costoso dell'operazione sul layout.

Dove puoi, dovresti evitare di animare proprietà che attivano il layout o la colorazione. 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

Supporto dei browser

  • Chrome: 36.
  • Edge: 79.
  • Firefox: 36.
  • Safari: 9.1.

Origine

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 che tu apporti la modifica. Tuttavia, non utilizzare troppo will-change, perché il browser potrebbe sprecare risorse, causando a sua volta ulteriori problemi di prestazioni.

In generale, se l'animazione potrebbe essere attivata nei prossimi 200 ms, a causa dell'interazione di un utente o dello stato dell'applicazione, è consigliabile avere will-change per animare gli elementi. 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 in genere 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à dispendiose nel 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.