will-change

基线 广泛可用

此功能已得到良好建立，并在许多设备和浏览器版本中运行。它自以下浏览器版本以来一直可用 2020 年 1 月.

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;
}

正式定义

初始值auto
应用于所有元素
继承否
计算值如指定
动画类型离散

正式语法

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 模块级别 1
# will-change

浏览器兼容性

BCD 表格仅在浏览器中加载

另请参阅