Le changement de volonté ne peut pas être abusé car il entra?nera une consommation supplémentaire de ressources dans le navigateur et empêchera l'optimisation. Sa fonction consiste à informer les éléments du navigateur à l'avance qu'ils changeront, déclenchant ainsi des mécanismes d'optimisation tels que l'amélioration des couches et l'accélération matérielle. Cependant, si vous utilisez un grand nombre d'éléments ou d'animations inutiles, cela entra?nera une utilisation excessive de la mémoire et un brouillage de page. Convient pour des éléments d'interface utilisateur en mouvement fréquents (tels que des menus coulissants, des fenêtres contextuelles), des éléments de tra?née, des animations de défilement complexes et d'autres scénarios. L'utilisation correcte comprend: la spécification des attributs spécifiques au lieu de tous; ajouter dynamiquement lorsque cela est nécessaire et les retirer dans le temps après la fin de l'animation; et la mise en ?uvre de l'addition de souris, de l'élimination des retards de Mouseleave et d'autres méthodes pour réduire l'utilisation des ressources en combinaison avec JS.

Parfois, les animations Web seront bloquées, surtout lorsque vous utilisez CSS pour créer des effets complexes. à l'heure actuelle, de nombreuses personnes penseront au will-change de propriété, mais si elles sont mal utilisées, cela affectera les performances.

En fait, sa fonction est de dire au navigateur à l'avance: "Je vais déplacer certains attributs de cet élément ensuite, vous feriez mieux de le préparer à l'avance." De cette fa?on, le navigateur peut effectuer un travail d'optimisation à l'avance, comme l'amélioration des couches, l'activation de l'accélération matérielle, etc., mais si elle est abusée, elle sera non seulement malsaine, mais elle peut également ralentir la page.

Pourquoi ne pouvez-vous pas utiliser Will Changeschandial?

will-change ne sera pas une bonne chose si vous ajoutez tous les éléments. Après que le navigateur l'a vu, il peut faire beaucoup de travail supplémentaire, comme:

• Promouvoir cet élément en une couche composite séparée
• Allouer des ressources de mémoire et de GPU supplémentaires
• Bloquer certains mécanismes d'optimisation du rendu

Si une page compte des dizaines d'éléments utilisant will-change: transform , le navigateur doit réserver des ressources pour chaque élément, ce qui peut éventuellement conduire à une utilisation excessive de la mémoire et même la page est bloquée.

Par conséquent, il est recommandé de ne l'utiliser que sur des éléments qui nécessitent vraiment des animations de haute performance et de les supprimer dans le temps après la fin de l'animation .

Quand est-il adapté d'utiliser Will-Change?

Toutes les animations ne nécessitent pas will-change . Si vous faites simplement un effet de volant simple ou une couleur d'arrière-plan de transition lente, vous n'en avez pas du tout besoin.

Les scénarios vraiment adaptés incluent:

• Des éléments d'interface utilisateur se dépla?ant fréquemment tels que les menus coulissants, les pop-ups, etc.
• éléments de tra?née et de dép?t
• Animation de défilement complexe ou défilement de parallaxe

Par exemple: si vous avez une carte qui doit être mise à l'échelle et décalée en douceur lorsque l'utilisateur glisse, vous pouvez l'écrire comme ceci:

 .carte {
  transition: transformer 0,3 s facilité;
}

.Card: Hover {
  Transformée: échelle (1.1) Translatey (-10px);
}

Il est plus raisonnable d'ajouter will-change pour le moment:

 .carte {
  Volonté: Transformer;
}

Mais n'oubliez pas que si cet élément n'a qu'une seule animation, vous pouvez supprimer will-change via JS une fois l'animation terminée pour réduire l'utilisation inutile des ressources.

Comment utiliser Will Change correctement?

Il ne suffit pas d'utiliser le bon endroit, et le choix des valeurs de syntaxe et d'attribut est également très important.

Les méthodes de mépris courantes sont:

 Volonté: tout;

Cela équivaut à dire au navigateur: "Je ne sais pas quoi changer, vous devez être préparé de toute fa?on", ce qui est désastreux pour les performances.

Les pratiques recommandées sont:

• Spécifiez uniquement les attributs spécifiques que vous souhaitez modifier , tels que transform , opacity , top , left , etc.
• Si vous n'êtes pas s?r des attributs spécifiques, il est préférable de ne pas les utiliser d'abord, puis de décider après avoir observé les performances.
• Vous pouvez ajouter et supprimer dynamiquement will-change en combinaison avec JS pour éviter l'occupation des ressources à long terme

Par exemple, ajoutez lorsque la souris entre et retarde le retrait après avoir quitté:

 const card = document.QuerySelector ('. Card');

card.addeventListener ('MouseEnter', () => {
  card.style.willchange = 'transform';
});

card.addeventListener ('Mouseleave', () => {
  setTimeout (() => {
    card.style.willchange = 'auto';
  }, 300); // laisse un temps de mise en mémoire tampon});

Fondamentalement, c'est tout. will-change est un outil utile, mais il est facile d'être utilisé à mauvais escient. La clé est de comprendre son mécanisme d'action et de l'utiliser au bon moment et à la bonne méthode.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!