will-change et promotion des couches

will-change indique au navigateur qu’un élément sera animé, ce qui lui permet de préparer les optimisations à l’avance — par exemple en promouvant l’élément vers son propre calque de composition du GPU avant le début de l’animation.

Précisez quelle propriété changera : will-change: transform, will-change: opacity, will-change: transform, opacity. Utilisez will-change: auto pour supprimer les indications à la fin de l’animation.

Appliquez will-change uniquement aux éléments qui seront réellement animés et seulement pendant la durée de l’animation. L’ajouter et le supprimer avec JavaScript (par l’intermédiaire d’une classe) est plus efficace que de le laisser en permanence sur des éléments statiques.

Chaque calque promu consomme de la mémoire GPU. Promouvoir de nombreux éléments simultanément crée une pression sur la mémoire, ce qui peut dégrader les performances — en particulier sur les appareils mobiles disposant d’une mémoire RAM GPU limitée. Promouvez les éléments avec parcimonie et de manière délibérée.

N’appliquez jamais will-change à * ni à un grand nombre d’éléments. Le coût de l’optimisation dépasse son bénéfice lorsque trop de calques sont créés. Effectuez d’abord un profilage ; ajoutez will-change uniquement lorsqu’un problème précis de saccades est confirmé.

Avant will-change, les développeurs utilisaient transform: translateZ(0) ou translate3d(0,0,0) pour forcer la promotion vers le GPU. will-change est l’approche correcte et sémantique. L’astuce de translation sur l’axe Z fonctionne toujours, mais il s’agit d’un détail d’implémentation, et non de l’expression d’une intention.

Les calques promus créent de nouveaux contextes d’empilement. Cela modifie le comportement de l’ordre d’empilement — les enfants d’un élément promu sont empilés par rapport à cet élément, et non à la racine du document. Tenez compte des changements de contexte d’empilement lorsque vous promouvez des éléments.

Ajoutez will-change lors du survol de la souris ou au début d’une animation, puis retirez-le lorsque le pointeur quitte l’élément ou à la fin de l’animation. Le navigateur dispose ainsi de temps pour se préparer sans consommer en permanence de la mémoire GPU pour les éléments inactifs.

Le panneau Calques de Chrome DevTools visualise les calques promus. Un nombre élevé de calques (des centaines) indique une promotion excessive. La section Mémoire affiche l’utilisation de la mémoire GPU. Maintenez le nombre de calques promus au minimum et surveillez-le avec des profils d’appareils d’entrée de gamme.

CSS contain: layout paint limite les calculs de mise en page et de peinture à un sous-arbre, de manière similaire à l’isolation. Cette propriété améliore les performances des composants autonomes sans créer de calques GPU — une optimisation moins coûteuse que will-change pour les éléments non animés.

will-change est entièrement pris en charge par tous les navigateurs modernes. Les navigateurs le traitent comme une indication, et non comme une commande — ils peuvent l’ignorer si les ressources sont limitées. Ne vous y fiez pas comme à une garantie ; utilisez-le uniquement comme indication de performance.

will-change promeut les éléments vers des calques de composition du GPU avant les animations, ce qui élimine le coût de promotion au début de l’animation. Appliquez-le dynamiquement et avec parcimonie — uniquement lorsque le profilage révèle des saccades — afin d’éviter une consommation excessive de mémoire GPU due à une promotion trop importante.