目标
增强页面渲染性能
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 伪类的父元素里
网友评论