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.
- Veillez à ce que vos animations n'entraînent pas de problèmes de performances et à 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-changepour 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 être 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 la 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 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
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" sera nécessaire pour effectuer le travail. Cela s'applique aussi bien aux animations CSS qu'à celles basées sur JavaScript. Il est probable que la surcharge liée à la mise en page ou à la peinture éclipsera toute tâche associée à l'exécution de CSS ou de JavaScript, ce qui rendrait la question inutile.