Animations et performances

Les animations doivent être performantes, sans quoi 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 provoquent pas de problèmes de performances. Assurez-vous 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.
• 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 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 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 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 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. Cela permet au navigateur de mettre en place les optimisations les plus appropriées avant le moment où vous effectuez 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 interne pour permettre de modifier ou d'animer ces propriétés.

Performances du CSS par rapport à 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 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 apportées aux transformations et à l'opacité peuvent également être gérées par le thread du compositeur.

• Si une animation déclenche l'application de peinture, de mise en page ou les deux, le "thread principal" sera nécessaire pour effectuer le travail. 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.