目标

增强页面渲染性能

CPU 和 GPU

CPU 即中央处理器，解释计算机指令以及处理计算机软件中的数据

GPU 即图片处理器，专门处理和绘制图形相关的硬件。GPU 是专门执行复杂的数学和几何计算而设计的，有了它，CPU 就从图形处理的任务中解放出来，可以执行其他更多的系统任务

现状

CSS 的动画、变形、渐变并不会自动的触发 GPU 加速，而是使用浏览器稍慢的软件渲染引擎。

在 transition，transform 和 animation 的世界里，应该卸载进程到 GPU 以加快速度。

只有 3D 变形会有自己的 layer，2D变形不会

translateZ()（or translate3d()）Hack

为元素添加没有变化的 3D 变形，骗取浏览器触发硬件加速

代价

这种情况通过向它自己的层叠加元素，占用 RAM 和 GPU 存储空间

will-change

提前通知浏览器元素将要做什么动画，让浏览器提前准备合适的优化设置

语法

will-change：auto | scroll-position | contents | <custom-ident> | <animateable-feature>

参数说明

关键字	说明
auto	此关键字表示没有特定的意图，适用于它通常所做的任何启发式和优化
scroll-position	表示将要改变元素的滚动位置
contents	表示将要改变元素的内容
<custom-ident>	明确指定将要改变的属性与给定的名称（最重要）
<animateable-feature>	可动画的一些特征值，比如left、top、margin等

使用注意

• 不能滥用

• 提前声明

• remove

尽量将 will-change 放在 hover 伪类的父元素里