1. CPU和GPU

2. translateZ() (or translate3d()) Hack

我们都通过translateZ()或者translate3d() hack来骗取浏览器触发硬件加速，具体做法就是为元素添加没有变化的3D变形，比如元素在2维空间可以通过添加以下CSS来硬件加速

transform: translate3d(0, 0, 0);

然而强制使用hack方式创建layer并不是长久之计，创建layer的技术可以使页面加速，但是也有代价，它们占用RAM和GPU存储空间（考虑到移动设备的存储容量有限），所以必须小心使用，确保这么做真的对页面渲染有所帮助。为了避免创建layer的hacks，一个允许我们提前通知浏览器我们将对元素做何种变化的CSS属性被引入，这样浏览器可以优化处理元素渲染的方式，为元素提前准备昂贵的动画处理操作，这就是wiil-change属性。

3.wiil-change

will-change: transform;

可以写多个属性变化，逗号隔开

will-change: transform, opacity;

注意事项：

*,
*::before,
*::after {
    will-change: all;
}

虽然看起来很屌，但其实对页面渲染伤害很大，这样的规则设了和没设没什么区别，浏览器本来就尝试最优的渲染所有元素，就等于你让老师重点照顾班里每个同学一样，就是废话！

其实这甚至是有害的，因为一些操作会占用太多的资源，甚至会导致页面奔溃，就等于强制要求老师为每个学生补课，累死了。。。

在变化前立即为元素添加will-change几乎没有作用，可能还不如不设置，因为会导致新的layer创建,如下：

.element:hover {
    will-change: transform;
    transition: transform 2s;
    transform: rotate(30deg) scale(1.5);
}

需要给浏览器足够的时间，如下：

.element {
    /* style rules */
    transition: transform 1s ease-out;
}
.element:hover {
    will-change: transform;
}
.element:active {
    transform: rotateY(180deg);
}

will-change顾名思义，通知浏览器即将发生的变化，而不是正在发生的变化。使用will-change，我们要求浏览器重点照顾我们声明的元素，为了这个浏览器需要一定的时间来组织优化操作，这样当变化发生的时候，优化才能没有延迟的作用到元素

语法：

/* 关键字值 */
will-change: auto;
will-change: scroll-position;
will-change: contents;
will-change: transform;        /* <custom-ident>示例 */
will-change: opacity;          /* <custom-ident>示例 */
will-change: left, top;        /* 两个<animateable-feature>示例 */
 
/* 全局值 */
will-change: inherit;
will-change: initial;
will-change: unset;
 
## auto ## 
表示没有特别指定哪些属性会变化，浏览器需要自己去猜，然后使用浏览器经常使用的一些常规方法优化。
## <animateable-feature> ##
 1) scroll-position 告诉浏览器,要不久后动画啦（改变滚动条的位置或者使之产生动画）
 2) contents:告诉浏览器 不久后改变元素内容中的某些东西，或者使它们产生动画。
## <custom-ident> ## 
不久后改变指定的属性名或者使之产生动画。如果属性名是简写，则代表所有与之对应的简写或者全写的属性。

浏览器兼容性：

Desktop

Mobile

链接: https://fly63.com/article/detial/10201