will-change

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

/* 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 <animateable-feature> */

/* Global values */
will-change: inherit;
will-change: initial;
will-change: unset;

正确使用此属性可能有些棘手：

不要将will-change应用于太多元素。浏览器已经尝试尽可能地优化一切。一些更强大的优化可能会will-change结束使用大量的机器资源，并且像这样滥用会导致页面变慢或消耗大量资源。

少用。浏览器进行优化的正常行为是尽快删除优化并恢复正常。但增加will-change在样式表中则表示目标元素可能会经常变化，浏览器会将优化工作保存得比之前更久。所以最佳实践是当元素变化之前和之后通过脚本来切换will-change的值。

不要将will-change应用于元素以执行不成熟的优化。如果您的页面运行良好，请不要将该will-change属性添加到元素中，以便稍微提高速度。will-change是为了尝试处理现有的性能问题而被用作最后的手段。不应该用它来预测性能问题。过度使用will-change会导致过多的内存使用，并会导致更复杂的渲染发生，因为浏览器试图为可能的变化做准备。这将导致更糟糕的表现。

给它足够的时间去工作。此属性旨在作为一种方法让作者让用户代理知道可能会提前更改的属性。然后，浏览器可以选择在属性更改实际发生之前应用任何属性更改所需的预先优化。因此，给浏览器一些时间来实现优化是非常重要的。找到某种方式来预测至少稍有提前的事情会改变，然后设置will-change。

请注意，当将属性值用于创建堆叠上下文（例如will-change：opacity）时，意愿改变可能实际上影响元素的视觉外观，因为堆叠上下文是在前面创建的。

Initial value	auto
应用对象	all elements
是否可继承	no
媒体	all
计算值	as specified
动画类型	discrete
规范顺序	the unique non-ambiguous order defined by the formal grammar

语法

值

auto这个关键字不表示特别的意图; 用户代理应该应用通常所做的任何启发式和优化。

的<animateable-feature>可以是以下值之一：

scroll-position表示开发者希望在不久后改变滚动条的位置或者使之产生动画。

contents表示开发者希望在不久后改变元素内容中的某些东西，或者使它们产生动画。

<custom-ident>表示开发者希望在不久后改变指定的属性名或者使之产生动画。如果属性名是简写，则代表所有与之对应的简写或者全写的属性。

形式语法

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

实例

.sidebar {
  will-change: transform;
}

上面的例子will-change直接将属性添加到样式表，这将导致浏览器在内存中保持优化的时间比需要的时间长，我们已经看到了为什么应该避免。下面是显示如何will-change通过脚本应用该属性的另一个示例，这可能是您在大多数情况下应该做的事情。

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

然而，will-change在你的样式表中包含一个应用程序可能是适当的，这个应用程序可以在按键上进行页面翻转，例如页面大而复杂的专辑或幻灯片演示文稿。这样可以让浏览器提前准备好转换，只要按下键，就可以在页面之间快速切换。

.slide {
  will-change: transform;
}

规范

Specification	Status	Comment
CSS Will Change Module Level 1The definition of 'will-change' in that specification.	Working Draft	Initial definition

浏览器兼容性

Feature	Chrome	Firefox (Gecko)	Internet Explorer	Opera	Safari (WebKit)
Basic support	36	36 (36) 1	No support	24	9.1

Feature	Android	Firefox Mobile (Gecko)	IE Phone	Opera Mobile	Safari Mobile
Basic support	37	36.0 (36) 1	No support	No support	9.3

本文档系腾讯云开发者社区成员共同维护，如有问题请联系 cloudcommunity@tencent.com

最后更新于：2017-12-18