will-change的使用

前提：为加快页面加载速度，增强页面渲染性能，有以下三种方法：

1. position-fixed代替background-attachment
2. 将带图片的元素放在伪元素里面
3. 巧用will-change

will-change的用法

前提：因CSS3的动画、渐变和变形不会自动触发CPU的加速，而使用浏览器自身进行渲染，不使用will-change 的一个小技巧：
translateZ() (or translate3d()) Hack
为元素添加一个空的3D变形，骗取浏览器触发硬件加速
缺点：
这样会占用更多的内存空间

因此我们可以用will-change提前告诉浏览器先去申请CPU的空间，去处理动画。

用法：在要进行动画的元素下添加will-change属性
参数：

1. auto
2. scroll-position :表示要改变的元素滚动位置
3. contents：表示将要改变的元素的内容
4. custom-ident：将要改变的属性的给定的名称 ，如transform（常用）
5. animateable-feature：可动画的一些特殊值，如：left、top、right等值（更消耗性能，不推荐使用）

兼容写法：
只需要加上：-webkit 和 -moz 即可

注：不能滥用，需要提前声明（需要使用前声明），需要remove掉（放在hover等可取消属性里面，防止浏览器不断申请）