Animations non composées

Qu'est qu'une animation non composée ?

Lorsqu'un navigateur interprète le code d'une page et convertit le HTML, CSS et JavaScript en pixels, il effectue ce qu'on appelle le pipeline de pixels. C'est un processus qui comporte 5 étapes séquentielles :

1. JavaScript / CSS
2. Calculs de style
3. Mise en page
4. Rendu
5. Composition

À chaque étape, le navigateur utilise le résultat de l'étape précédente pour créer de nouvelles données.  Une animation non composée est un rendu qui oblige la navigateur à revenir sur une étape précédente (JavaScript / CSS, Calculs de style et Mise en page) ce qui augmente les calculs nécessaires et donc le délai de rendu.

Pourquoi sont-elles à éviter ?

Les animations non composées peuvent sembler saccadées lors du rendu par le navigateur sur des machines peu puissantes  ou lorsque de lourdes tâches sont exécutées en même temps. Ce manque de fluidité nuit à la perception visuelle de la page pour les utilisateurs.

Comment les corriger ?

Il existe plusieurs raisons pour lesquelles une animation est non composée où il est nécessaire d'intervenir sur les règles CSS mises en place :

• propriété CSS incompatible
• la propriété liée à "transform" dépend de la taille de la zone
• la propriété liée à "filter" peut déplacer des pixels
• le mode de composite de l'effet n'est pas "replace"
• la cible contient une autre animation incompatible
• l'effet comporte des paramètres de minutage non compatibles

Pour plus d'informations sur le pipeline de pixels et l'optimisation des performances pour le rendu, consultez la documentation Google sur les performances de rendu.