En savoir plus sur l'attribut will-change en CSS

Qu'est-ce que l'attribut CSS will-change ? Comment l'utiliser ? Cet article vous amènera à étudier l'attribut will-change pour voir quand l'utiliser, comment l'utiliser et comment mieux définir will-change en CSS.

will-change

La propriété CSS will-change fournit aux développeurs Web un moyen d'indiquer au navigateur que cet élément va Quelles méthodes de modification peuvent être utilisées pour que le navigateur puisse effectuer les préparations d'optimisation correspondantes à l'avance avant que les attributs de l'élément ne changent réellement. Cette optimisation permet de préparer à l'avance une partie du travail de calcul complexe, rendant la page plus réactive et réactive.

Important  : will-change est destiné à être utilisé en dernier recours lorsque l'on tente de résoudre des problèmes de performances existants. Il ne doit pas être utilisé pour prédire des problèmes de performances.

Remplacer translateZ() Hack

Par exemple, lorsque vous utilisez la transformation CSS 3D pour déplacer un élément sur l'écran, l'élément et leur contenu peut être transféré vers un « calque » où ils peuvent être rendus indépendamment du reste de la page et composés ultérieurement. Cela isole le rendu du contenu, évite que le reste de la page doive être restitué si la transformation de l'élément est le seul contenu qui change entre les images, et offre souvent des avantages significatifs en termes de vitesse.

Cependant, définir un élément dans un nouveau calque est une opération relativement coûteuse qui peut retarder le début de l'animation de transformation d'une fraction de seconde notable.

Pour éviter ce délai lors de l'utilisation des transformations CSS et d'autres opérations CSS, nous utilisons depuis longtemps TranslateZ (ou parfois Translate3d) pour déplacer les éléments vers leur propre couche, permettant ainsi aux opérations accélérées par le matériel de s'exécuter de manière plus fluide, plus rapide et sans problèmes. . Cependant, cette technique - également connue sous le nom de "translateZ() (ou translate3d()) Hack" - a un prix. Paul Lewis a écrit un article très utile à ce sujet, vous devriez absolument le consulter si vous utilisez cette technique. will-change permet d'optimiser nos animations sans avoir à recourir à ce hack - ou à tout autre hack.

(Partage de vidéos d'apprentissage : tutoriel vidéo CSS)

Séparés par des virgules

Vous pouvez passer Précisez les noms de propriétés que vous souhaitez modifier (séparés par des virgules) pour déclarer au navigateur que vous comptez modifier la position de défilement d'un élément, son contenu ou la valeur d'une ou plusieurs de ses propriétés CSS. La plupart des propriétés n'auront aucun effet lorsqu'elles seront spécifiées car les agents utilisateurs n'effectuent aucune optimisation spéciale sur les modifications apportées à la plupart des propriétés. Cependant, il est toujours prudent de les spécifier, même si cela n’a aucun effet.

Si vous prévoyez ou envisagez de modifier plusieurs valeurs/aspects d'un élément, vous pouvez fournir une liste de valeurs séparées par des virgules. La liste de valeurs séparées par des virgules peut inclure des mots-clés et/ou des noms de propriétés prédéfinis. (Voir la section Exemples ci-dessous.)

Créez en outre un contexte d'empilement et un bloc contenant

si vous déclarez une valeur non initiale pour le property Un contexte d'empilement sera créé sur l'élément. Spécifier cet attribut dans will-change créera définitivement un contexte d'empilement sur l'élément. Par exemple, définir l'opacité sur une valeur autre que 1 crée un contexte d'empilement sur l'élément. Par conséquent, le paramètre va changer : l'opacité créera également un contexte d'empilement, même si l'opacité est toujours égale à 1.

De même, la spécification de l'attribut dans will-change doit amener l'élément à générer un bloc conteneur pour les éléments à position fixe si une valeur non initiale de l'attribut amènerait l'élément à générer un bloc conteneur pour les éléments à position fixe. positionner les éléments. L'attribut

will-change n'a aucun effet direct sur l'élément qu'il spécifie, autre que la création susmentionnée de contextes d'empilement et de blocs contenant - il s'agit simplement d'un indice de rendu pour l'agent utilisateur, lui permettant d'être utilisé sur certains types de mettre en place des optimisations potentiellement coûteuses avant que les changements ne commencent réellement à se produire.

À utiliser avec prudence

Cela étant dit, il est important que vous sachiez que vous devez utiliser cette propriété avec prudence. Différents navigateurs peuvent utiliser les informations de Will-Change de différentes manières, et même un seul navigateur peut les utiliser de différentes manières à différents moments. Une utilisation excessive peut entraîner l'ignorance totale de la déclaration. Par exemple, les navigateurs qui promeuvent les éléments vers leur propre « couche GPU » lorsque l’élément a will-change . Mais lorsqu'il y a trop de déclarations d'éléments, le navigateur ignorera les déclarations pour éviter de manquer de mémoire GPU.

De plus, will-change ne doit pas être utilisé à moins que l'on sache ou que l'on s'attend à ce que l'élément change dans un avenir proche (par exemple, en une fraction de seconde). Il doit être désinitialisé une fois qu'il n'est plus nécessaire :

Définissez will-change sur la propriété que vous allez réellement modifier sur l'élément qui change réellement. et retirez-les quand ils s'arrêtent. - Tab Atkins Jr. (éditeur de spécifications)

L'optimisation du navigateur pour les changements à venir est souvent coûteuse et, comme nous l'avons mentionné plus tôt, très gourmande en ressources sur la machine. Le comportement normal d'optimisation du navigateur consiste à supprimer ces optimisations et à revenir au comportement normal le plus rapidement possible. Cependant, will-change remplace ce comportement, conservant l'optimisation plus longtemps que le navigateur ne le ferait autrement.

Par conséquent, vous devez toujours penser à supprimer le changement de volonté une fois que l'élément a fini de changer afin que le navigateur puisse restaurer l'optimisation de toutes les ressources déclarées.

La configuration de Will-Change à l'aide de JavaScript

La configuration de Will-Change via JavaScript permet un contrôle plus précis et un plus grand nombre de navigateurs prêts aux modifications temps, et vous permet également de le désactiver immédiatement après la fin de l'événement d'animation. À l'aide de JavaScript, vous déclarez vos modifications dans le navigateur, puis supprimez le changement lorsque les modifications sont terminées en écoutant le moment où ces modifications sont terminées.

Par exemple, vous pouvez écouter quand un élément (ou son ancêtre) est survolé, puis définir un changement de volonté lors de la saisie de la souris. Si votre élément est animé, vous pouvez utiliser l'événement DOM animationEnd pour écouter la fin de l'animation, puis supprimer le changement de volonté après le déclenchement de animationEnd.

// Rough generic example
// Get the element that is going to be animated on click, for example
var el = document.getElementById('element');

// Set will-change when the element is hovered
el.addEventListener('mouseenter', hintBrowser);
el.addEventListener('animationEnd', removeHint);

function hintBrowser() {
	// The optimizable properties that are going to change
	// in the animation's keyframes block
	this.style.willChange = 'transform, opacity';
}

function removeHint() {
	this.style.willChange = 'auto';
}

Mieux vaut définir le changement de volonté en CSS

Si vous voulez vraiment définir le changement de volonté dans la feuille de style pour pouvoir optimiser les éléments qui changez en survol, puis afin de dire au navigateur d'optimiser les modifications que vous souhaitez effectuer en survol, vous pouvez faire ce qui suit :

.el:hover {
    will-change: transform;
    transform: rotate()...;
}

Ce n'est pas particulièrement faux, mais ce n'est pas particulièrement utile. Vous devez déclarer vos intentions au navigateur quelque temps avant que le changement ne se produise réellement, plutôt que lorsque le changement se produit, pour lui donner le temps de se préparer au changement et d'effectuer les optimisations requises. Ainsi, dans un scénario comme celui-ci, vous pouvez faire ceci :

.el {
    will-change: transform;
}

.el:hover {
    transform: rotate()...;
}

Alternativement, vous pouvez définir le changement de volonté au survol du conteneur de l'élément, car il faut un certain temps à l'événement de survol pour atteindre l'élément lui-même. , puis le navigateur. Ce temps peut être utilisé pour préparer les modifications de l'élément lui-même :

.container:hover .el {
    will-change: transform;
}

.el:hover {
    transform: rotate()...;
}

Pour résumer, pensez à utiliser will-change avec parcimonie, n'en abusez pas, ne le définissez que lorsque vous savez que l'élément est sur le point de changer et n'oubliez pas d'annuler le paramètre une fois les modifications terminées.

Syntaxe officielle

• Instruction :

will-change: auto | <animateable-feature>#

où

<animateable-feature> = scroll-position | contents | <custom-ident>

Balise (#) signifie que vous pouvez spécifier plusieurs valeurs, séparées par des virgules.

• Valeur initiale : auto
• S'applique à : tous les éléments
• Animation : pas de

valeur ( Valeurs)

auto

C'est la valeur par défaut. Il n’exprime aucune intention particulière. Le navigateur n'est informé d'aucune modification et n'effectue donc aucune optimisation pour s'adapter à d'éventuelles modifications futures.

scroll-position

indique que l'auteur souhaite animer ou modifier la position de défilement de l'élément dans un avenir proche. Le navigateur sera au préalable correctement optimisé pour ce changement.

Par exemple, les navigateurs n'affichent généralement que le contenu dans une "fenêtre défilante" sur les éléments défilants, ainsi que le contenu qui a déjà traversé cette fenêtre, équilibrant ainsi les économies de temps et de mémoire liées au saut de rendu et à la nécessité de défilement Ça a l'air mieux. Les navigateurs peuvent utiliser cette valeur comme signal pour étendre la plage de contenu autour de la fenêtre de défilement rendue afin qu'un défilement plus long/plus rapide puisse être effectué en douceur.

contenu

indique quelque chose que l'auteur souhaite animer ou modifier le contenu de l'élément dans un avenir proche. Le navigateur sera au préalable correctement optimisé pour ce changement.

Par exemple, les navigateurs « mettent souvent en cache » le rendu des éléments au fil du temps car la plupart des éléments ne changent pas très souvent, ou changent simplement de position. Cependant, si l'élément change régulièrement de contenu, générer et maintenir ce cache est une perte de temps. Les navigateurs peuvent prendre cette valeur comme un signal pour mettre en cache l'élément de manière moins agressive, ou éviter la mise en cache du tout et simplement restituer continuellement l'élément à partir de zéro. Valeur

e53daba18c25ef518ad73d82fe4f7af3 (028aa264268b1d80e0a56150adf879cc)

e53daba18c25ef518ad73d82fe4f7af3 (voir l'entrée e53daba18c25ef518ad73d82fe4f7af3 pour plus de détails). Indique que l'auteur souhaite animer ou modifier une propriété portant le nom donné sur un élément dans un avenir proche.

Par exemple, les navigateurs distinguent souvent les éléments avec un ensemble d'attributs de valeur non initiale transform des autres éléments, peut-être en les restituant dans leur propre "couche GPU", ou en utilisant d'autres mécanismes pour faciliter la recherche rapide. transformer. Le navigateur peut prendre la valeur de transform comme signal qu'il doit promouvoir l'élément vers son propre calque immédiatement avant que l'élément ne commence la transition, afin d'éviter tout retard impliqué dans le rendu des anciens et des nouveaux calques.

除了通常从 e53daba18c25ef518ad73d82fe4f7af3 中排除的关键字之外，e53daba18c25ef518ad73d82fe4f7af3 值不能是以下关键字之一：will-change、none、all、auto、scroll-position 和 contents。

请注意，大多数属性在指定时将不起作用，因为用户代理不会对大多数属性的更改执行任何特殊优化。不过，指定它们仍然是安全的，虽然它根本没有效果。

注：感觉虽然命名为『自定义标志』, 其实主要碰到的还是 css 预定义好的标志，譬如 transform、opacity

例子

下面告诉浏览器期望元素的变换属性发生变化，以便提前进行适当的优化。

.el {
    will-change: transform;
}

上面的 will-change 声明应该通过 JavaScript 添加，然后在更改结束后删除或取消设置 (will-change: auto)。

以下所有的都是可能且有效的 will-change 值：

will-change: contents;
will-change: scroll-position;
will-change: opacity;/* multiple comma-separated values */will-change: contents, transform;
will-change: scroll-position, opacity;

使用小结

想使用好 will-change 并不是太容易，以下使用忠告摘录于官方文档，可见真是太难了。

• 不要将 will-change 应用到太多元素上： 浏览器已经尽力尝试去优化一切可以优化的东西了。有一些更强力的优化，如果与 will-change 结合在一起的话，有可能会消耗很多机器资源，如果过度使用的话，可能导致页面响应缓慢或者消耗非常多的资源。

• 有节制地使用： 通常，当元素恢复到初始状态时，浏览器会丢弃掉之前做的优化工作。但是如果直接在样式表中显式声明了 will-change 属性，则表示目标元素可能会经常变化，浏览器会将优化工作保存得比之前更久。所以最佳实践是当元素变化之前和之后通过脚本来切换 will-change 的值。

• 不要过早应用 will-change 优化： 如果你的页面在性能方面没什么问题，则不要添加 will-change 属性来榨取一丁点的速度。 will-change 的设计初衷是作为最后的优化手段，用来尝试解决现有的性能问题。它不应该被用来预防性能问题。过度使用 will-change 会导致大量的内存占用，并会导致更复杂的渲染过程，因为浏览器会试图准备可能存在的变化过程。这会导致更严重的性能问题。

• 给它足够的工作时间准备，不要过迟应用： 这个属性是用来让页面开发者告知浏览器哪些属性可能会变化的。然后浏览器可以选择在变化发生前提前去做一些优化工作。所以给浏览器一点时间去真正做这些优化工作是非常重要的。使用时需要尝试去找到一些方法提前一定时间获知元素可能发生的变化，然后为它加上 will-change 属性。

更多编程相关知识，请访问：编程视频！！

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!