增强页面渲染性能

3D transform 启用 GPU 加速

例如 transform3D, scaleZ 等可以开启浏览器硬件加速

实际上并不需要 Z 轴的动画

will-change

当我们的某些行为触发页面进行大面积绘制的时候, 浏览器往往是没有准备的, 只能被动使用 CPU 去计算与重绘. 而will-change会在真正行为触发之前通知浏览器, 以开启 GPU 准备重绘.

该属性语法:

will-change: auto;
will-change: scroll-position;
will-change: contents;
will-change: trasnform; // or some
will-change: opacity; // or some
will-change: left,top; // or some

will-change:inherit;
will-change:initial;
will-change: unset;
`</pre>

其中 auto 是用来重置的

scroll-position 是通知滚动

contents 是通知内容动画

### 注意事项

`will-change` 虽然可以加速, 但一定要适度使用. 频繁使用 GPU 显然会导致性能(电量)消耗

不要直接写在默认状态中, 因为`will-change`会一直挂着:

<pre>`.will-change{
  will-change: transform;
  transition: transform .3s;
}
.will-change:hover{
  transform: scale(1.5);
}
`</pre>

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

<pre>`.will-change-parent:hover .will-change{
  will-change:transform;
}
.will-change{
  transition:transform .3s
}
.will-change:hover{
  transform:scale(1.5)
}

如果使用 JS 添加will-change一定要及时 remove