web-dev-qa-db-fra.com

CSS `will-change` - comment l'utiliser, comment cela fonctionne

J'ai trouvé CSS will-changedocuments W3.org , documents MDN (qui fonctionne déjà dans Chrome et est partiellement supporté par Firefox et Opera) mais je ne sais pas vraiment comment cela fonctionne. Quelqu'un en sait-il plus sur cette chose mystérieuse?

Je viens de lire qu'il permet au navigateur de préparer le calcul sur l'élément à l'avenir. Je ne veux pas me méprendre. J'ai donc quelques questions.

  1. Dois-je ajouter cette propriété à la classe d'élément ou à son état de survol?

    .my-class{
    will-change: 'opacity, transform'
}
.my-class:hover{
    opacity: 0.5
}
.my-class:active{
    transform: rotate(5deg);
}

    OR

    .my-class{
    ...
}
.my-class:hover{
    will-change: 'opacity'
    opacity: 0.5
}
.my-class:active{
    will-change: 'transform'
    transform: rotate(5deg);
}

  2. Comment peut-il augmenter les performances d'un navigateur? Théoriquement, lorsque CSS est chargé, le navigateur "sait" déjà ce qui se passera avec chaque élément, n'est-ce pas?

Si vous pouvez ajouter un bon exemple illustrant comment l'utiliser efficacement, je vous en serai reconnaissant :)

csscss3will-change
51
LJ Wadowski

Je ne copierai pas coller l'intégralité de article ici mais voici une version tl; dr:

Le fait de spécifier exactement ce que vous souhaitez modifier permet au navigateur de prendre de meilleures décisions concernant les optimisations qu'il doit effectuer pour ces modifications particulières. C'est évidemment un meilleur moyen d'obtenir une augmentation de vitesse sans recourir à des hacks et forcer le navigateur à créer des couches qui peuvent être nécessaires ou utiles.

Comment l'utiliser:

will-change: transform, opacity;

Comment ne pas l'utiliser:

will-change: all;

.potato:hover {
  will-change: opacity;
  opacity:1;
}

En précisant will-change au survol n'a aucun effet:

Définir le changement de volonté sur un élément immédiatement avant qu'il ne change n'a peu ou pas d'effet. (Cela pourrait en fait être pire que de ne pas le définir du tout. Vous pourriez encourir le coût d'un nouveau calque alors que ce que vous animez n'aurait pas été précédemment qualifié pour un nouveau calque!)

28
Patsy Issa

J'ai passé un peu de temps à chercher comment fonctionne la propriété will-change Et comment nous l'utilisons. J'espère que ce sera un résumé utile. Merci à tous pour les réponses.

1. Couches Hack/Null Transform Hack

Dans les temps anciens (comme il y a 2 ans), quelqu'un a découvert que vous pouvez dessiner votre animation CSS plus rapidement.

Comment ça marche?

Si vous ajoutez transform: translateZ(0) à un sélecteur css, cela forcera un navigateur à déplacer l'élément avec ce sélecteur vers le nouveau calque de compositeur. De plus, cela augmentera les performances (dans la plupart des situations, utilisez les pouvoirs du GPU à la place du CPU) lire la suite ici .

2. Bye Bye hacks, bienvenue "will-change:"

Il est probablement trop tôt pour dire au revoir à Layer Hack, mais cette fois viendra sous peu. La nouvelle propriété will change Est apparue dans les spécifications de CSS et sera un grand successeur du hack de couche.

3. Prise en charge du navigateur

Pour l'instant, il est disponible dans Chrome et Opera et partiellement pris en charge par Firefox également).

4. Comment l'utiliser correctement

N'utilisez le changement à volonté nulle part dans votre CSS avant d'avoir terminé la mise en œuvre de vos animations. Ce n'est qu'alors que vous devriez revenir à votre CSS et appliquer la volonté de changer. Plus

C'est probablement le conseil le plus précieux que vous puissiez obtenir.

Il est inutile de l'utiliser directement avant le début d'une action, par ex. l'ajouter à l'état :hover d'un sélecteur. Parce que le navigateur n'aura pas besoin de temps pour préparer l'optimisation avant l'occurrence du changement. Le navigateur aura besoin d'env. 200 ms pour appliquer l'optimisation, il est donc préférable, par exemple, d'ajouter will-change À un élément lorsqu'un élément parent est en survol. Plus

Exemple:

 .parent:hover .change{
     will-change: opacity;
 }
 .change:hover{
    opacity: .5;
 }

Vous devez l'utiliser avec parcimonie. Si vous voulez tout optimiser, les résultats seront opposés à ceux attendus. will-change Force le navigateur à maintenir l'optimisation activée et à réserver des ressources comme la mémoire pour des changements futurs qui ne se produiront peut-être jamais. Il est recommandé de désactiver will-change Par la suite, lorsque cela n'est plus nécessaire, par exemple lorsque l'animation est terminée.

Vous pouvez le faire facilement en utilisant JavaScript document.getElementById('my_element_id').style.willChange = off;

15
LJ Wadowski

Maintenant, avec l'aide de CSS, vous pouvez faire diverses animations, et parfois cette animation devient un goulot d'étranglement pour un processeur. Donc, au lieu de faire ce travail sur un CPU, il serait bien d'utiliser le GPU pour cette tâche. Et il n'y a pas si longtemps, les gens ont commencé à utiliser une astuce pour le faire pour une transformation 2D en faisant quelque chose comme:

.accelerate {
  -webkit-transform: translate3d(0, 0, 0);
}

Cela a fait penser à un navigateur qu'il faisait une transformation 3D, et comme toutes les transformations 3D utilisent le GPU, cela déchargera le CPU. Cela semble hacky (car en fait c'est le cas) et will-change La propriété va changer cela en informant le navigateur de rechercher les changements à venir, d'optimiser et d'allouer de la mémoire en conséquence.

Basé sur projet W3C ,

La propriété CSS will-change… permet à un auteur d'informer l'UA à l'avance des types de modifications qu'ils sont susceptibles d'apporter à un élément. Cela permet à l'agent utilisateur d'optimiser la façon dont il gère l'élément à l'avance, en effectuant un travail potentiellement coûteux pour préparer une animation avant que l'animation ne commence réellement.

Bonne idée à utiliser will-change est de faire savoir au navigateur à l'avance les changements attendus sur un élément. Cela permet au navigateur de faire les optimisations appropriées à l'avance, ce qui conduit à un rendu plus rapide.

Cette information a été prise à partir de cette excellente explication à propos de will-change propriété. L'article a un exemple supplémentaire quand il est agréable de l'utiliser et quand il est inutile voire nuisible

7
Salvador Dali

Pour autant que je sache...

  1. C'est une alternative pour translate-z: 0.
  2. Je ne connais pas le survol, mais afaik de son mieux pour l'utiliser sur des propriétés qui sont modifiées progressivement par JS, changeant l'opacité, la position pendant le défilement, etc.
  3. Cette propriété ne doit pas être surutilisée, en particulier sur les téléphones, les tablettes, son utilisation sur trop d'éléments peut entraîner des problèmes de performances.
  4. Il est recommandé de supprimer/désactiver cette propriété par JS lorsqu'elle n'est plus pertinente.

Ainsi, un exemple d'utilisation serait de l'appliquer à un moment donné du défilement, avec scrollTop: 400, puis d'animer progressivement l'opacité et, disons scrollTop: 500, de désactiver à nouveau la volonté de changer.

Source: podcast shoptalkshow - ils mentionnent cet article - https://dev.opera.com/articles/css-will-change-property/ - qui est probablement une meilleure source d'informations que mon article: D

3
Martin Malinda