CSS属性will-change

简介

CSS 属性 will-change 为web开发者提供了一种告知浏览器该元素会有哪些变化的方法，这样浏览器可以在元素属性真正发生变化之前提前做好对应的优化准备工作。这种优化可以将一部分复杂的计算工作提前准备好，使页面的反应更为快速灵敏。

重要提示：will-change 旨在用作尝试处理现有的性能问题的最后手段。它不应该用于预测性能问题。

替换 translateZ() Hack

例如，当使用 CSS 3D 变换(transform)在屏幕上移动元素时，元素及其内容可能会被提升到一个“层”(layer)，在那里它们可以独立于页面的其余部分进行渲染，并在以后进行合成。这样隔离了内容的呈现，如果元素的变换(transform)是在帧之间发生变化的唯一内容，则不必重新渲染页面的其余部分，并且通常提供显著的速度优势。

然而，在新层(layer)中设置元素是一项相对昂贵的操作，它可以将变换动画的开始延迟明显的几分之一秒。

为了避免在使用 CSS Transforms 和其他 CSS 操作时出现这种延迟，我们长期以来一直使用 translateZ（或有时是 translate3d）将元素提升到它们自己的层，从而实现硬件加速操作，以运行更流畅、更快，没有毛刺。然而，这种技术——也被称为“translateZ()（或 translate3d()) Hack”——是有代价的。

保罗刘易斯写了一篇关于这个的非常有用的帖子，如果你使用这种技术，你一定要检查一下。 will-change 是为了让我们能够优化我们的动画，而不必求助于这个 hack——或者任何其他 hack。

逗号分隔

您可以通过指定您希望更改的属性名称（以逗号分隔）来向浏览器声明您打算更改元素的滚动位置、其内容或其一个或多个 CSS 属性值。大多数属性在指定时将不起作用，因为用户代理不会对大多数属性的更改执行任何特殊优化。不过，指定它们仍然是安全的，虽然根本没有效果。

如果您期望或计划更改元素的多个值/方面，您可以提供逗号分隔值的列表。逗号分隔值列表可以包括预定义的关键字和/或属性名称。（请参阅下面的示例部分。）

额外创建堆叠上下文和包含块

如果您声明的属性的任何非初始值会在元素上创建堆叠上下文，则在 will-change 中指定该属性一定在元素上创建堆叠上下文。例如，将 opacity 设置为 1 以外的任何值都会在元素上创建堆叠上下文。因此，设置 will-change: opacity 也会创建一个堆叠上下文，即使 opacity 当前仍然等于 1。

类似地，如果属性的任何非初始值会导致元素为固定位置元素生成包含块，则在 will-change 中指定该属性必须导致元素为固定位置元素生成包含块。

will-change 属性对它指定的元素没有直接影响，除了前面提到的创建堆叠上下文和包含块之外——它只是对用户代理的渲染提示，允许它在某些类型的更改实际开始发生之前设置潜在昂贵的优化。

谨慎使用

话虽如此，重要的是您知道应谨慎使用此属性。不同的浏览器可以以不同的方式使用来自 will-change 的信息，甚至单个浏览器也可能在不同的时间以不同的方式使用它。过度使用它可能会导致完全忽略声明。例如，当元素有 will-change 时，将元素提升到它们自己的“GPU 层”的浏览器。但有太多元素声明时，浏览器将忽略声明，以避免耗尽 GPU 内存。

此外，除非已知或预计元素会在不久的将来（例如，在几分之一秒内）发生变化，否则不应使用 will-change。一旦不再需要它，就应该取消设置：

在实际更改的元素上将 will-change 设置为您将实际更改的属性。并在他们停止时将其删除。 - Tab Atkins Jr.（规范编辑者）

浏览器对即将发生的更改进行的优化通常代价高昂，而且正如我们前面提到的，会占用非常多的机器资源。通常浏览器优化行为是删除这些优化并尽快恢复到正常行为。然而，will-change 会覆盖这种行为，保持优化的时间比浏览器其他场景下更长。

因此，您应该始终记住在元素完成更改后删除 will-change，以便浏览器可以恢复优化声明的任何资源。

使用 JavaScript 设置 will-change

通过 JavaScript 设置 will-change 允许更细粒度的控制，和更多浏览器准备更改的时间，并且还允许您在动画事件结束后立即取消设置。使用 JavaScript，您可以向浏览器声明您的更改，然后在更改完成后通过监听这些更改何时完成来删除 will-change。

例如，您可以监听元素（或其祖先）何时悬停，然后在 mouseenter 上设置 will-change。如果你的元素正在被动画化，你可以使用 DOM 事件 animationEnd 监听动画何时结束，然后在 animationEnd 被触发后移除 will-change。

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

更好的在 css 中设置 will-change

如果您确实想在样式表中设置 will-change 以针对可能在悬停时更改的元素进行优化，那么为了告诉浏览器针对您希望在悬停时发生的更改进行优化，您可以执行以下操作：

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

这并不是特别错误，但也不是特别有用。您需要在更改实际发生之前的某个时间向浏览器声明您的意图，而不是在更改发生时，以便给它一些时间来准备更改并进行所需的优化。所以，在这样的场景中，你可以这样做：

.el {
  will-change: transform;
}

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

或者，您可以在元素的容器悬停时设置 will-change，因为悬停事件到达元素本身需要一些时间，然后浏览器可以使用该时间为元素本身的更改做准备：

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

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

总结一下，记得谨慎使用 will-change，不要过度使用，只有在知道元素即将改变时才设置它，并且记得在改变完成后取消设置。

官方语法

声明：

will-change: auto | #

其中

 = scroll-position | contents |

标签 (#) 表示您可以指定多个值，多个值以逗号分隔。

初始值：auto
适用于：所有元素
动画：否

值（Values）

auto

这是默认值。它没有表达特别的意图。浏览器不会收到任何更改的通知，因此不会进行任何优化以适应未来的任何更改。

scroll-position

表示作者希望在不久的将来动画或更改元素的滚动位置。浏览器会提前针对此更改进行适当的优化。

例如，浏览器通常只在可滚动元素上呈现“滚动窗口”中的内容，以及已经经过该窗口的内容，从而平衡好跳过渲染所节省的时间和内存，以使滚动看起来更好看。浏览器可能会将此值作为信号来扩展呈现的滚动窗口周围的内容范围，以便可以平滑地完成更长/更快的滚动。

表示作者希望在不久的将来动画或更改元素内容的某些内容。浏览器会提前针对此更改进行适当的优化。

例如，浏览器经常会随着时间的推移“缓存”元素的渲染，因为大多数东西不会经常改变，或者只是改变它们的位置。但是，如果元素确实定期更改其内容，那么生成和维护此缓存就是浪费时间。浏览器可能会将这个值作为一个信号，在元素上不那么积极地缓存，或者根本避免缓存而只是不断地从头开始重新渲染元素。

()

值（有关详细信息，请参阅条目）。表示作者希望在不久的将来对元素上具有给定名称的属性进行动画处理或更改。

例如，浏览器通常将设置有非初始值 transform 属性的元素和其他元素区分开，可能将它们渲染到自己的“GPU 层”，或者使用其他机制来更容易的快速的进行变换。浏览器可能会将 transform 的值作为一个信号，表明它应该在元素开始转换之前立即将元素提升到它自己的层，以避免重新渲染旧层和新层所涉及的任何延迟。

除了通常从中排除的关键字之外，值不能是以下关键字之一：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 属性。