Les animations doivent être performantes, sinon elles auront un impact négatif sur l'expérience utilisateur.
Maintenez une fréquence d'images de 60 ips chaque fois que vous créez votre animation, car moins vous obtiendriez des stutterings, des blocages qui seront perceptibles pour les utilisateurs et qui auront un impact négatif sur leur expérience.
- Assurez-vous que vos animations n'entraînent pas de problèmes de performances. vous assurer de connaître l'impact de l'animation d'une propriété CSS donnée.
- Les propriétés d'animation qui modifient la géométrie de la page (mise en page) ou qui entraînent la peinture sont particulièrement coûteuses.
- Si possible, continuez à modifier les transformations et l'opacité.
- Utilisez
will-change
pour vous assurer que le navigateur sait ce que vous prévoyez d'animer.
L'animation des propriétés n'est pas sans frais, et certaines propriétés sont moins chères à animer que d'autres. Par exemple, l'animation des propriétés width
et height
d'un élément modifie sa géométrie, et peut entraîner le déplacement ou la modification de la taille d'autres éléments de la page. Ce processus est appelé mise en page (ou reflow dans les navigateurs basés sur Gecko comme Firefox) et peut s'avérer coûteux si votre page comporte de nombreux éléments. Chaque fois que la mise en page est déclenchée, la page ou une partie de celle-ci doit normalement être peinte, ce qui est généralement plus onéreux que l'opération de mise en page elle-même.
Dans la mesure du possible, évitez d'animer des propriétés qui déclenchent la mise en page ou la peinture. Dans la plupart des navigateurs récents, cela implique de limiter les animations à opacity
ou transform
, que le navigateur peut optimiser de manière très poussée. peu importe que l'animation soit gérée par JavaScript ou CSS.
Consultez notre guide complet sur la création d'animations hautes performances.
Utiliser la propriété will-change
Navigateurs pris en charge
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
Utilisez le will-change
pour vous assurer que le navigateur sait que vous avez l'intention de modifier la propriété d'un élément. Cela permet au navigateur de mettre en place les optimisations les plus appropriées avant le moment où vous effectuez la modification. Toutefois, n'abusez pas de will-change
, car cela pourrait entraîner un gaspillage de ressources par le navigateur, ce qui entraînerait encore plus de problèmes de performances.
En règle générale, si l'animation peut être déclenchée dans les 200 ms suivantes, soit par l'interaction d'un utilisateur, soit en raison de l'état de votre application, il est recommandé d'utiliser will-change
sur les éléments d'animation. Dans la plupart des cas, pour les propriétés que vous prévoyez de modifier, will-change
doit être activé pour tous les éléments de la vue actuelle de votre application que vous souhaitez animer. Dans le cas de l'exemple de boîte que nous avons utilisé dans les guides précédents, l'ajout de will-change
pour les transformations et l'opacité se présente comme suit:
.box {
will-change: transform, opacity;
}
Désormais, les navigateurs compatibles (actuellement la plupart des navigateurs récents) effectuent les optimisations appropriées en arrière-plan pour permettre la modification ou l'animation de ces propriétés.
Performances des CSS et JavaScript
Il existe de nombreuses pages et fils de commentaires sur le Web qui évoquent les avantages relatifs des animations CSS et JavaScript du point de vue des performances. Voici quelques points à retenir:
Les animations basées sur CSS et les animations Web lorsqu'elles sont prises en charge de manière native sont généralement gérées sur un thread appelé "thread du compositeur". Ce thread est différent du "thread principal" du navigateur, dans lequel le style, la mise en page, le dessin et le JavaScript sont exécutés. Cela signifie que si le navigateur exécute des tâches coûteuses sur le thread principal, ces animations peuvent se poursuivre sans être interrompues.
Dans de nombreux cas, d'autres modifications apportées aux transformations et à l'opacité peuvent également être gérées par le thread du compositeur.
Si une animation déclenche la peinture, la mise en page ou les deux, le "thread principal" seront nécessaires pour faire le travail. Cela s'applique à la fois aux animations CSS et JavaScript. Le surcoût lié à la mise en page ou à la peinture va probablement éclipser toute tâche associée à l'exécution de CSS ou de JavaScript, ce qui rendrait la question inutile.