will-change
will-change CSS 属性向浏览器提示一个元素将要发生怎样的变化。浏览器可能会在元素实际发生变化之前进行优化。这类优化可以通过在实际需要之前完成潜在的昂贵工作来提高页面的响应速度。
警告： will-change 旨在作为最后手段，用于处理现有的性能问题。不应将其用于预测性能问题。
此属性的正确用法可能有点棘手
- 不要将
will-change应用于太多元素。 浏览器已经尽力优化所有内容。一些可能与will-change相关的更强大的优化最终会占用机器大量资源，如果过度使用，可能会导致页面变慢或消耗大量资源。 - 谨慎使用。 浏览器进行的优化通常会在完成后尽快移除，并恢复正常。但是直接在样式表中添加
will-change意味着目标元素总是即将发生变化，浏览器会将优化保留比通常情况更长的时间。因此，最好在变化发生前后使用脚本代码开启和关闭will-change。 - 不要将
will-change应用于元素进行过早优化。 如果您的页面性能良好，请不要仅为了提高一点速度而向元素添加will-change属性。will-change旨在作为最后手段，用于处理现有的性能问题。不应将其用于预测性能问题。过度使用will-change将导致内存使用过多，并导致浏览器在尝试为可能的变化做准备时发生更复杂的渲染。这将导致性能下降。 - 给予其足够的时间来发挥作用。 此属性旨在作为一种方法，供开发者提前告知用户代理哪些属性可能发生变化。然后浏览器可以选择在属性变化实际发生之前应用所需的任何提前优化。因此，重要的是要给浏览器一些时间来实际进行优化。找到一种方法至少提前预测到某些内容将发生变化，然后设置
will-change。 - 请注意，当与创建堆叠上下文的属性值（例如
will-change: opacity）一起使用时，will-change实际上可能会影响元素的视觉外观， 因为堆叠上下文是提前创建的。
语法
css
/* Keyword values */
will-change: auto;
will-change: scroll-position;
will-change: contents;
will-change: transform; /* Example of <custom-ident> */
will-change: opacity; /* Example of <custom-ident> */
will-change: left, top; /* Example of two <animatable-feature> */
/* Global values */
will-change: inherit;
will-change: initial;
will-change: revert;
will-change: revert-layer;
will-change: unset;
值
auto-
此关键字不表示任何特定意图；用户代理应应用其通常使用的任何启发式算法和优化。
<animatable-feature> 可以是以下值之一：
scroll-position-
表示开发者期望在不久的将来对元素的滚动位置进行动画或更改。
contents-
表示开发者期望在不久的将来对元素内容进行动画或更改。
<custom-ident>-
表示开发者期望在不久的将来对元素上具有给定名称的属性进行动画或更改。如果给定的属性是简写属性，则表示对其展开的所有长手属性的预期。它不能是以下值之一：
unset、initial、inherit、will-change、auto、scroll-position或contents。规范未定义特定值的行为，但transform通常是合成层提示。Chrome 目前会根据特定的 CSS 属性标识符执行两种操作：建立新的合成层或新的堆叠上下文。
通过样式表
对于通过按键翻页的应用程序（例如相册或幻灯片演示，其中页面很大且复杂），在样式表中包含 will-change 可能是合适的。这将允许浏览器提前准备过渡，并在按下按键后立即在页面之间进行快速过渡。但请谨慎直接在样式表中使用 will-change 属性。它可能会导致浏览器将优化保留在内存中比需要的时间长得多。
css
.slide {
will-change: transform;
}
正式定义
正式语法
will-change =
auto |
<animateable-feature>#
<animateable-feature> =
scroll-position |
contents |
<custom-ident>
示例
通过脚本
这是一个示例，展示了如何通过脚本应用 will-change 属性，这可能是在大多数情况下您应该做的事情。
js
const 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";
}
规范
| 规范 |
|---|
| CSS Will Change Module Level 1 # will-change |
浏览器兼容性
加载中…