will-change
Propriété CSS qui prévient le navigateur à l'avance qu'un élément va bientôt être animé ou modifié, pour qu'il prépare une optimisation (par exemple en isolant l'élément dans sa propre couche du compositeur GPU). Puissante, mais facile à mal employer.
Mécanisme : will-change: transform dit au navigateur « cet élément va bientôt être transformé » ; il peut alors le promouvoir d'avance dans sa propre couche, que le GPU anime sans à-coups, si bien que la première image de l'animation ne saccade pas pendant la création de la couche. Cas d'usage : les éléments dont on sait qu'ils s'animeront au survol ou à l'interaction. Trois mises en garde. (1) Ne pas en abuser : chaque couche promue coûte de la mémoire, et will-change partout épuise les ressources et peut ralentir la page. (2) Idéalement, la poser juste avant l'animation (au survol, par exemple) et la retirer ensuite, plutôt que de la laisser en permanence dans le CSS. (3) C'est un indice, pas une garantie. À noter : transform et opacity sont les propriétés « bon marché » à animer (composition seule, sans recalcul de mise en page). Un outil de performance tranchant, mais à double tranchant.