Le animazioni devono avere un buon rendimento, altrimenti influiranno negativamente sull'esperienza utente.
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.
- Assicurati che le animazioni non causino problemi di prestazioni; assicurati di conoscere l'impatto dell'animazione di una determinata proprietà CSS.
- L'animazione di proprietà che modificano la geometria della pagina (layout) o causano la visualizzazione del disegno sono particolarmente costose.
- Dove puoi, attieniti a trasformazioni e opacità modificate.
- Utilizza
will-changeper assicurarti che il browser conosca il contenuto dell'animazione.
L'animazione delle proprietà non è senza costi e alcune proprietà 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 di 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, è 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, questo significa limitare le animazioni a opacity o transform, entrambe le cui attività possono essere altamente ottimizzate dal browser; non è importante se l'animazione viene gestita tramite 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. Ciò consente al browser di applicare le ottimizzazioni più appropriate prima che apporti la modifica. Non fare un uso eccessivo di will-change, perché così facendo può causare uno spreco di risorse da parte del browser, causando così ulteriori problemi di prestazioni.
In generale, se l'animazione potrebbe essere attivata nei successivi 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, will-change dovrebbe essere attivato per tutte le proprietà che intendi modificare. Nel caso del riquadro di esempio 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 esistono numerose pagine e thread di commenti che discutono dei 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 lo stile, il layout, la pittura 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 colorazione, layout o entrambi, sarà necessario il "thread principale". Questo è vero sia per le animazioni basate su CSS che per JavaScript e l'overhead di layout o colorazione probabilmente supererà qualsiasi lavoro associato all'esecuzione di CSS o JavaScript, rendendo la domanda moot.