Mise en page, peinture et composition : la chaîne de rendu

Une fois l’arbre de rendu construit, le navigateur exécute trois étapes : la mise en page (calcul des dimensions et des positions des éléments), la peinture (remplissage des pixels avec des couleurs, du texte et des images) et la composition (combinaison des calques peints et affichage à l’écran).

La mise en page calcule la géométrie — largeur, hauteur et position x/y — de chaque élément. Modifier des propriétés qui affectent la géométrie (width, margin, padding, font-size, position) déclenche la mise en page de l’élément et potentiellement de tout son sous-arbre : c’est l’étape la plus coûteuse.

La peinture remplit les pixels de chaque calque : arrière-plans, bordures, texte et ombres. Modifier color, background-color, visibility ou border-radius déclenche une nouvelle peinture sans recalcul de la mise en page : c’est moins coûteux que la mise en page, mais cela reste onéreux si une grande zone doit être repeinte.

Le compositeur combine les calques à l’aide du GPU. Les propriétés CSS qui n’affectent que la composition — transform et opacity — peuvent être animées sans déclencher de mise en page ni de peinture. Le GPU les traite à 60fps avec une intervention minimale du CPU.

csstriggers.com (désormais une documentation côté navigateur) indique, pour chaque moteur de navigateur, quelles propriétés CSS déclenchent la mise en page, la peinture et/ou la composition. Utilisez-le pour vérifier les propriétés d’animation. Préférez transform et opacity pour les propriétés animées.

La surcharge de la mise en page se produit lorsque JavaScript alterne entre la lecture de propriétés de mise en page (offsetWidth) et l’écriture de propriétés de style dans une boucle. Chaque écriture invalide la mise en page ; chaque lecture force une redistribution synchrone. Regroupez toutes les lectures avant toutes les écritures pour éviter cette surcharge.

Seuls transform et opacity sont entièrement gérés par le compositeur lorsque l’élément se trouve sur son propre calque. Animer toute autre propriété, même left/top, déclenche la mise en page ou la peinture sur le fil d’exécution principal et peut provoquer des saccades.

Les navigateurs placent les éléments sur leur propre calque GPU lorsqu’ils utilisent will-change: transform, une animation CSS sur transform/opacity, une position fixe avec des éléments voisins composités ou une transformation 3D. Chaque calque utilise de la mémoire GPU ; un trop grand nombre de calques entraîne une pression sur la mémoire.

Une tempête de peinture se produit lorsqu’une grande partie de la page est repeinte à chaque image. Effectuez un profilage dans Chrome DevTools → Rendu → Clignotement des peintures pour repérer les zones repeintes. Isolez les éléments fréquemment animés sur leurs propres calques afin de limiter la zone de repeinture.

Enregistrez un profil de performances dans Chrome DevTools. Le graphique en flammes affiche les événements de mise en page, de mise à jour de l’arbre des calques, de peinture et de composition. De longues barres de mise en page ou de peinture indiquent des goulots d’étranglement. Visez des durées d’image inférieures à 16 ms pour maintenir 60 images/s.

Animez la transformation et l’opacité autant que possible. Utilisez le découpage au lieu de la largeur et de la hauteur pour les animations de révélation — le découpage est favorable au compositeur dans les navigateurs modernes. Évitez d’animer l’ombre portée ; utilisez plutôt l’opacité et un pseudo-élément avec une ombre pré-rendue.

Quelles sont les deux propriétés CSS qui peuvent être animées sans déclencher de mise en page ni de peinture ?

La chaîne de rendu — mise en page, peinture, composition — détermine les performances des animations. La mise en page est la plus coûteuse, la peinture a un coût modéré et les propriétés limitées à la composition (transformation, opacité) sont gérées par le GPU. Comprendre les déclencheurs permet de créer des animations fluides à 60 images/s sans recalculs incessants de la mise en page ni tempêtes de peinture.