Animations et performances

Les animations doivent être efficaces, sinon elles auront un impact négatif sur l'expérience utilisateur.

Paul Lewis

Sam Thorogood

Maintenez une fréquence d'images de 60 FPS lorsque vous animez, car un nombre inférieur entraîne des à-coups ou des arrêts que vos utilisateurs remarqueront et qui auront un impact négatif sur leur expérience.

• Veillez à ce que vos animations ne causent pas de problèmes de performances. Assurez-vous de connaître l'impact de l'animation d'une propriété CSS donnée.
• L'animation de propriétés qui modifient la géométrie de la page (mise en page) ou qui provoquent un dessin est particulièrement coûteuse.
• Dans la mesure du possible, limitez-vous à 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 de propriétés n'est pas sans frais, et certaines propriétés sont moins chères à animer que d'autres. Par exemple, animer les width et height d'un élément modifie sa géométrie et peut entraîner le déplacement ou la redimensionnement 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). Il peut être coûteux si votre page contient de nombreux éléments. Chaque fois que la mise en page est déclenchée, la page ou une partie de celle-ci doit généralement être peinte, ce qui est généralement encore plus coûteux 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. Pour la plupart des navigateurs modernes, cela signifie limiter les animations à opacity ou transform, que le navigateur peut optimiser de manière très efficace. Peu importe si l'animation est gérée par JavaScript ou CSS.

Consultez le guide complet sur la création d'animations hautes performances.

Utiliser la propriété will-change

Utilisez will-change pour vous assurer que le navigateur sait que vous avez l'intention de modifier la propriété d'un élément. Le navigateur peut ainsi mettre en place les optimisations les plus appropriées avant que vous n'apportiez la modification. N'abusez pas de will-change, car cela peut entraîner un gaspillage de ressources par le navigateur, ce qui entraîne 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 à venir, soit par l'interaction d'un utilisateur, soit en raison de l'état de votre application, il est judicieux d'utiliser will-change pour animer les éléments. Dans la plupart des cas, will-change doit être activé pour toutes les propriétés que vous prévoyez de modifier dans 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;
}

Les navigateurs compatibles (actuellement la plupart des navigateurs modernes) effectueront désormais les optimisations appropriées en arrière-plan pour permettre de modifier ou d'animer ces propriétés.

Performances du CSS par rapport à JavaScript

De nombreuses pages et fils de commentaires sur le Web discutent des avantages relatifs des animations CSS et JavaScript du point de vue des performances. Voici quelques points à prendre en compte:

• Les animations basées sur CSS et les animations Web, lorsqu'elles sont prises en charge en mode natif, sont généralement gérées sur un thread appelé "thread du moteur de rendu". Il s'agit d'un thread différent de celui du navigateur, où le style, la mise en page, la peinture et 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 continuer sans interruption.

• Dans de nombreux cas, d'autres modifications des transformations et de 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" doit effectuer des tâches. Cela est vrai pour les animations basées sur CSS et JavaScript. Les coûts liés à la mise en page ou à la peinture seront probablement bien plus importants que tout travail associé à l'exécution CSS ou JavaScript, ce qui rend la question sans objet.