说一说will-change

一、will-change是做什么的呢

CSS 是用来描述结构化文档（如HTML、XML）怎样渲染的语言。

CSS渲染器在渲染属性前，会有个准备的过程。有些属性需要css渲染器事先做很多准备才能实现渲染。这就容易导致页面出现卡顿，交互体验不好等问题。

如果设置了 will-change 属性，那么浏览器就可以提前知道哪些元素的属性将会改变，提前做好准备。待需要改变元素的时机到来时，就可以立刻实现它们。从而避免卡顿等问题。

例如，使用 3D Transforms 让元素在屏幕上移动时，此元素和它的上下文会被提到另一个“层”，独立于其它元素被渲染。这样那些不变的元素就能避免被重复渲染。这可以显著提高性能。

然而，将元素提取到一个新层，相对来说是代价较高的操作。这可能使 transform 动画延迟几百毫秒。

二、怎么用呢

下面是一个使用脚本应用 will-change 属性的例子：

var el = document.getElementById('element');
// 当鼠标移动到该元素上时给该元素设置 will-change 属性
el.addEventListener('mouseenter', hintBrowser);
// 当 CSS 动画结束后清除 will-change 属性
el.addEventListener('animationEnd', removeHint);
function hintBrowser() {
// 填写上那些你知道的，会在 CSS 动画中发生改变的 CSS 属性名们
this.style.willChange = 'transform, opacity';
}
function removeHint() {
this.style.willChange = 'auto';
}

语法说明

Formal syntax: auto | <animateable-feature>#
<animateable-feature> = scroll-position | contents | <custom-ident>

will-change: auto
will-change: scroll-position
will-change: contents
will-change: transform // <custom-ident> 的例子
will-change: opacity // <custom-ident> 的例子
will-change: left, top // <animateable-feature> 的例子
will-change: unset
will-change: initial
will-change: inherit

auto

浏览器会根据情况，自行进行优化。

scroll-position

表示开发者将要改变元素的滚动位置。

例如，浏览器通常仅呈现可滚动元素“滚动窗口”中的内容。而某些内容超过该窗口。如设置了此值，浏览器将扩展呈现“滚动窗口”周围的内容，从而顺利地进行更长、更快的滚动。

content

表示开发者将要改变元素的内容。

例如，浏览器常将大部分不经常改变的元素缓存下来。但如果一个元素的内容不断发生改变，那么产生和维护这个缓存就是在浪费时间。此属性值可以减少浏览器对元素的缓存，或者完全避免缓存。变为从始至终都重新渲染元素。

注意：这个值会被应用到它所声明元素的子节点。在文档树较高的节点上使用，可能会对页面性能造成很大的影响。尽量在文档树最末端使用。

<custom-ident>

表示开发者将要改变的元素属性。如果给定的值是缩写，则默认被扩展全。

例如，设置 will-change: background 将会被补全 background 的所有属性 will-change: background-image, background-position, ...

三、使用时须注意的几点

1、不要在过多的属性和元素上使用 will-change

* { will-change: transform, opacity /*, ...*/; }

你可能会觉得这么做不错，就可以优化一切属性了。

其实并非如此。

will-change 可能会引发一些十分耗费资源的优化措施。如果像上边这样给所有元素都添加，可能会使页面变慢，甚至崩溃。

2、在元素属性变化完成后最好移除 will-change 属性

有些情况，可以不移除。

比如，给页面中少量的元素使用 will-change 属性能使交互体验更好。

body > .sidebar {
will-change: transform;
/*当鼠标移动到侧边栏时，会有滑动效果*/
}

因为只在很少的元素上使用，所以它所能产生的副作用可以忽略不计。

当变化很频繁时也可以不移除。例如，鼠标移动产生的变化，或者持续存在的动画效果。此时设置 will-change 属性，其实就是在提示浏览器，这些元素会持续或有规律的发生变化，要保持对它们的优化。

.cats-flying-around-the-screen {
will-change: left, top;
}

3、给 will-change 属性足够的时间做准备

如果在动画开始的那一刻才添加 will-change 属性，是没有优化效果的。一些优化是需要充分的准备时间的.如果没有足够的时间，那 will-change 所能提高的性能也就无从谈起。所以要找到添加 will-change 属性的时机。

比如，当一个元素被点击时发生变化。那么就可以在 hover 事件上设置 will-change 属性。这能给浏览器提供大概200毫秒准备时间。因为相较之下，人类的响应速度较慢。这可以通过脚本或者简单的CSS来实现。

.element { transition: opacity .2s; opacity: 1; }
.element:hover { will-change: opacity; }
.element:active { opacity: .3; }

如果变化是发生在触发 hover 事件时，上边的做法就无法起到优化作用了。但还是可以找到恰当的时机的。比如在祖先元素上设置 will-change 属性，就可以给浏览器预留足够的准备时间。

.element { transition: opacity .2s; opacity: 1; }
.container:hover > .element { will-change: opacity; }
.element:hover { opacity: .3; }

兼容性一览

参考资料

[1] CSS Will Change Module Level 1: https://www.w3.org/TR/css-will-change-1/#propdef-will-change

[2] MDN will-change 中文版: https://developer.mozilla.org/zh-CN/docs/Web/CSS/will-change

关于奇舞周刊

《奇舞周刊》是360公司专业前端团队「奇舞团」运营的前端技术社区。关注公众号后，直接发送链接到后台即可给我们投稿。