Les navigateurs modernes peuvent animer deux propriétés CSS à moindre coût : transform et opacity.
Si vous animez autre chose, il est peu probable que vous atteigniez 60 images par seconde (FPS).
Cet article explique pourquoi.
Performances et fréquence d'images des animations
Il est largement admis qu'une fréquence d'images de 60 FPS est l'objectif à atteindre pour animer des éléments sur le Web. Cette fréquence d'images permet de s'assurer que vos animations sont fluides. Sur le Web, un frame correspond au temps nécessaire pour effectuer toutes les tâches requises pour mettre à jour et redessiner 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 retard.
Pipeline de rendu
Pour afficher un élément sur une page Web, le navigateur doit effectuer les étapes séquentielles suivantes :
- Style : calcule les styles qui s'appliquent aux éléments.
- Mise en page : générez la géométrie et la position de chaque élément.
- Peindre : remplissez les pixels de chaque élément.
- Composite : séparez les éléments en calques et dessinez les calques à l'écran.
Ces quatre étapes sont appelées pipeline de rendu du navigateur.
Lorsque vous animez un élément sur une page qui est 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 de se produire.
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 réexécutées. 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, il peut être nécessaire de recalculer la géométrie des autres éléments.
Par exemple, si vous modifiez la largeur de l'élément <html>, cela peut avoir une incidence sur l'un de ses enfants.
En raison de la façon dont les éléments débordent et s'affectent les uns les autres, les modifications plus bas dans l'arborescence peuvent parfois entraîner des calculs de mise en page jusqu'en haut.
Plus l'arborescence des éléments visibles est grande, plus les calculs de mise en page prennent du temps.
Animer les propriétés de peinture
Paint est le processus qui détermine l'ordre dans lequel les éléments doivent être peints à l'écran. Il s'agit souvent de la tâche la plus longue du pipeline.
La majorité de la peinture dans les navigateurs modernes est effectuée dans des rasterizers logiciels. Selon la façon dont les éléments de votre application sont regroupés en couches, il peut être nécessaire de peindre d'autres éléments que celui qui a changé.
Animer des propriétés composites
La composition consiste à séparer la page en calques, à convertir les informations sur l'apparence de la page en pixels (rastérisation) et à assembler les calques pour créer une page (composition).
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 son propre calque, les modifications qui y sont apportées peuvent être gérées par le GPU lors de l'étape de composition.
Les navigateurs basés sur Chromium et WebKit créent un calque pour tout élément comportant une transition ou une animation CSS sur opacity.
Qu'est-ce qu'un calque ?
En plaçant les éléments qui seront animés ou auxquels une transition sera appliquée sur un nouveau calque, le navigateur n'a besoin de repeindre que ces éléments et rien d'autre. 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 fasse un bon travail pour décider quels éléments doivent se trouver sur un nouveau calque, il existe des moyens de forcer la création d'un calque s'il en manque un. Pour en savoir plus, consultez Créer des animations hautes performances. Toutefois, vous devez créer des calques avec précaution, car chacun d'eux utilise de la mémoire. Sur les appareils dont la mémoire est limitée, la création de calques peut entraîner des problèmes de performances plus importants que ceux 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 en termes de performances.
Les animations basées sur CSS et Web Animations (dans les navigateurs compatibles avec l'API) sont généralement gérées sur un thread appelé thread du compositeur. Il est différent 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 être interrompues.
Comme expliqué dans cet article, d'autres modifications apportées aux transformations et à l'opacité peuvent, dans de nombreux cas, être également 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 devra effectuer des tâches. Cela vaut pour les animations CSS et JavaScript. De plus, la surcharge de mise en page ou de peinture éclipsera probablement tout travail associé à l'exécution de CSS ou de JavaScript, ce qui rendra la question sans objet.