浅谈will change

**will chang **

CSS3 will-change属于web标准属性，虽然目前还是草案阶段，但出现已经有些时日了，兼容性这块Chrome/FireFox/Opera都是支持的
will change的作用：

1.会通知UA，元素会发生怎么样的变化，提前做一些比较耗费资源的动画的准备工作，在动画真正开始前完成准备。

2.这个属性会变更元素的层叠顺序，让我们任何时候使用时候都要检查will change 在浏览器的作用效果是否如你所愿

那我们应该如何去使用呢？—遵循最小化影响原则，

1.静态图层和动画图层在同一层级的时候，会产生抖动，这时候可以使用will change 改变其效果

2.移动端尽量少用，因为会引起cpu内存问题，pc端适量去用，最好在优化后可以在动画完成取消优化，如果动画连续且使用的不多，可以使用will-change

不要这样直接写在默认状态中，因为will-change会一直挂着：

可以让父元素hover的时候，声明will-change，这样，移出的时候就会自动remove，触发的范围基本上是有效元素范围

.will-change-parent:hover .will-change {
  will-change: transform;
}
.will-change {
  transition: transform 0.3s;
}
.will-change:hover {
  transform: scale(1.5);
}

如果使用JS添加will-change, 事件或动画完毕，一定要及时remove. 比方说点击某个按钮，其他某个元素进行动画。点击按钮(click)，要先按下(mousedown)再抬起才出发。因此，可以mousedown时候打声招呼, 动画结束自带回调，于是（示意，不要在意细节）：

dom.onmousedown = function() {
    target.style.willChange = 'transform';
};
dom.onclick = function() {
    // target动画哔哩哔哩...
};
target.onanimationend = function() {
    // 动画结束回调，移除will-change
    this.style.willChange = 'auto';
};

如何理解willchange可以增强页面渲染性能呢？

我们通过某些行为（点击、移动或滚动）触发页面进行大面积绘制的时候，浏览器往往是没有准备的，只能被动使用CPU去计算与重绘，由于没有事先准备，应付渲染够呛，于是掉帧，于是卡顿。而will-change则是真正的行为触发之前告诉浏览器：“浏览器同学，我待会儿就要变形了，你心理和生理上都准备准备”。于是乎，浏览器同学把GPU给拉上了，从容应对即将到来的变形。

will change的属性值

auto
就跟width:auto一样，实际上没什么卵用，昨天嘛，估计就是用来重置其他比较屌的值。

scroll-position
告诉浏览器，我要开始翻滚了。

contents
告诉浏览器，内容要动画或变化了。

顾名思意，自定义的识别。非规范称呼，应该是MDN自己的称呼，以后可能会明确写入规范。比方说animation的名称，计数器counter-reset, counter-increment定义的名称等等。

上面展示了2个例子，一个是transform一个是opacity，都是CSS3动画常用属性。如果给定的属性是缩写，则所有缩写相关属性变化都会触发。同时不能是以下这些关键字值：unset, initial, inherit, will-change, auto, scroll-position, 或 contents.

可动画的一些特征值。比方说left, top, margin之类。移动端，非transform, opacity属性的动画性能都是低下的，所以都是建议避免使用left/top/margin之流进行唯一等。但是，如果你觉得自己是margin属性奶大的，非要使用之，试试加个will-change:margin说不定也会很流畅（移动端目前支持还不是很好）。

就目前而言，使用的基本上都是

.example {
  will-change: transform;
}