CSS里”will-change”属性的黑暗面

长话短说：不要使用 will-change 属性，除非你真的知道你在做什么。

will-change属性有什么作用？

[will-change]属性的作用是开发人员可以提前告诉UA，一个元素可能会发生什么样的变化。这样可以让UA有机会提前优化如何处理这个元素，提前做一些可能比较耗资源的动画的准备工作，在动画真正开始前完成准备。
https://dev.w3.org/csswg/css-will-change/

不幸的是，will-change不仅仅只是“通知UA”，还做了很多其它事情，其中包括变更了元素的层叠顺序(类似z-index).

我们需要担心什么？

使用 will-change 会让我们又回到了旧时的使用IE编程的时代。在那时，我开发网页是需要先写出代码，然后看看它们在IE里是什么样子，然后开始打补丁。使用will-change属性会产生同样的结果。任何时候使用这个属性，你都需要检查will-change在浏览器里的作用效果是否如你所愿。

一个使用will-change的例子

这个例子展示了两个方块在同一位置(x/y)时反生的状况

HTML代码

<div class="box box1"></div>
<div class="box box2"></div>

CSS代码：

.box {
    height:100px;
    width:100px;
} 
.box1 {
    background:orange;
    will-change:transform;
} 
.box2 {
    background:teal;
    margin-top:-100px;
}

输出效果：

支持 will-change 属性的浏览器显示黄色方块在上面，而不支持这个属性的浏览器显示绿色方块在上面。

这种现象跟元素层叠顺序(类似z-index)混乱有关，但是因为要使用 will-change 属性，就必须要接受这种混乱的现实。

为什么要重视这个问题

我发现IE浏览器适时的停止了脚步；因为这个属性像是一个历史倒退——它让我想起了DX filters，一个臭名昭著的专门为IE准备的fix。而很多开发人员又不知道这个过滤器的副作用，不知道很多的过滤器都改变了浏览器的一些正常渲染过程。

总之，用与不用will-change，你自己选择。