Les navigateurs modernes peuvent animer deux propriétés CSS à faible coût: transform et opacity.
Si vous animez autre chose, il est probable que vous n'atteigniez pas les 60 images par seconde (FPS).
Cet article explique pourquoi.
Performances d'animation et fréquence d'images
Il est largement admis qu'une fréquence d'images de 60 FPS est la cible lorsque vous animez un élément sur le Web. Cette fréquence d'images garantit la fluidité de vos animations. Sur le Web, un frame correspond au temps nécessaire pour effectuer tout le travail requis pour mettre à jour et repeindre l'écran. Si chaque frame ne se termine pas dans un délai de 16,7 ms (1 000 ms / 60 ≈ 16,7), les utilisateurs percevront le délai.
Pipeline de rendu
Pour afficher un élément sur une page Web, le navigateur doit suivre les étapes séquentielles suivantes:
- Style: calculez les styles qui s'appliquent aux éléments.
- Mise en page: génère la géométrie et la position de chaque élément.
- Peinture: remplissez les pixels de chaque élément.
- Composite: séparez les éléments en couches et dessinez les couches à l'écran.
Ces quatre étapes sont appelées le pipeline de rendu du navigateur.
Lorsque vous animez un élément sur une page déjà chargée, ces étapes doivent être répétées. Ce processus commence à l'étape qui doit être modifiée pour permettre l'animation.
Comme indiqué précédemment, ces étapes sont séquentielles. Par exemple, si vous animez un élément qui modifie la mise en page, les étapes de peinture et de composition doivent également être exécutées à nouveau. Animer un élément qui modifie la mise en page est donc plus coûteux que d'animer un élément qui ne modifie que la composition.
Animer les propriétés de mise en page
Les modifications de mise en page impliquent de calculer la géométrie (position et taille) de tous les éléments concernés par la modification.
Si vous modifiez un élément, la géométrie des autres éléments peut devoir être recalculée.
Par exemple, si vous modifiez la largeur de l'élément <html>, l'un de ses enfants peut être affecté.
En raison de la façon dont les éléments débordent et s'influencent les uns les autres, les modifications effectuées plus loin dans l'arborescence peuvent parfois entraîner des calculs de mise en page jusqu'en haut.
Plus l'arborescence des éléments visibles est importante, plus le calcul de la mise en page prend du temps.
Animer les propriétés de peinture
La peinture consiste à déterminer dans quel ordre les éléments doivent être peints à l'écran. Il s'agit souvent de la tâche la plus longue du pipeline.
La plupart des opérations de peinture dans les navigateurs modernes sont effectuées dans des rastreurs logiciels. Selon la façon dont les éléments de votre application sont regroupés en calques, d'autres éléments que celui qui a changé peuvent également devoir être peints.
Animer des propriétés composites
Le compositing consiste à séparer la page en calques, à convertir les informations sur l'apparence de la page en pixels (rastreisation) et à assembler les calques pour créer une page (compositing).
C'est pourquoi la propriété opacity est incluse dans la liste des éléments peu coûteux à animer.
Tant que cette propriété se trouve dans sa propre couche, les modifications apportées peuvent être gérées par le GPU lors de l'étape de composition.
Les navigateurs Chromium et WebKit créent une nouvelle couche pour tout élément qui comporte une transition ou une animation CSS sur opacity.
Qu'est-ce qu'une couche ?
En plaçant les éléments qui seront animés ou mis en transition sur une nouvelle couche, le navigateur n'a besoin de repeindre que ces éléments et non tout le reste. Vous connaissez peut-être le concept de calque de Photoshop, qui contient un ensemble d'éléments pouvant être déplacés ensemble. Les calques de rendu du navigateur sont semblables à cette idée.
Bien que le navigateur prenne de bonnes décisions sur les éléments à placer sur une nouvelle couche, s'il en manque un, il existe des moyens de forcer la création de la couche. Pour en savoir plus, consultez Créer des animations hautes performances. Toutefois, vous devez créer des calques avec précaution, car chaque calque utilise de la mémoire. Sur les appareils dont la mémoire est limitée, la création de couches peut entraîner un problème de performances plus important que celui que vous essayez de résoudre. De plus, les textures de chaque calque doivent être importées dans le GPU. Vous risquez donc de rencontrer des contraintes de bande passante entre le processeur et le GPU.
Performances du CSS par rapport à JavaScript
Vous vous demandez peut-être s'il est préférable d'utiliser CSS ou JavaScript pour les animations.
Les animations basées sur CSS et les animations Web (dans les navigateurs compatibles avec l'API) sont généralement gérées sur un thread appelé thread du moteur de rendu. Il s'agit d'un fonctionnement différent de celui du thread principal 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.
Comme expliqué dans cet article, d'autres modifications des transformations et de l'opacité peuvent, dans de nombreux cas, également être gérées par le thread du moteur de rendu.
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 CSS et JavaScript. Le coût de la mise en page ou de la peinture éclipsera probablement tout travail associé à l'exécution CSS ou JavaScript, ce qui rend la question sans objet.