谈谈CSS3 硬件加速(GPU 加速)

前言

CSS3 硬件加速又叫做 GPU 加速，是利用 GPU 进行渲染，减少 CPU 操作的一种优化方案。页面css做图片滑动，滚动，特别是手机端，可能出现卡顿，闪白等情况，解决这些动画卡顿的情况，我们通常可以采用GPU加速的方式。由于 GPU 中的 transform 等 CSS 属性不会触发 repaint，所以能大大提高网页的性能。

如何开启 GPU 加速

CSS 中的以下几个属性能触发硬件加速：

transform

opacity

filter

will-change

如果有一些元素不需要用到上述属性，但是需要触发硬件加速效果，可以使用一些小技巧来诱导浏览器开启硬件加速

.haorooms_element {
    -webkit-transform: translateZ(0);
    -moz-transform: translateZ(0);
    -ms-transform: translateZ(0);
    -o-transform: translateZ(0);
    transform: translateZ(0); 
    /**或者**/
    transform: rotateZ(360deg);
    transform: translate3d(0, 0, 0);
}

通过-webkit-transform:transition3d/translateZ开启GPU硬件加速之后，有些时候可能会导致浏览器频繁闪烁或抖动，可以尝试以下办法解决之：

-webkit-backface-visibility:hidden;
-webkit-perspective:1000;

通过-webkit-transform:transition3d/translateZ开启GPU硬件加速的适用范围：

1、使用很多大尺寸图片(尤其是PNG24图)进行动画的页面。

2、页面有很多大尺寸图片并且进行了css缩放处理，页面可以滚动时。

3、使用background-size:cover设置大尺寸背景图，并且页面可以滚动时。

4、编写大量DOM元素进行CSS3动画时(transition/transform/keyframes/absTop&Left)。

5、使用很多PNG图片拼接成CSS Sprite时。

will-change

这个属性作用很单纯，就是“增强页面渲染性能”。那它是如何增强的呢？

我们可能听听说过，3D transform会启用GPU加速，例如translate3D, scaleZ之类，但是呢，这些属性业界往往称之为hack加速法。我们实际上不需要z轴的变化，但是还是假模假样地声明了，欺骗浏览器，这其实是一种不人道的做法。 而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;

will-change虽然可以加速，但是，一定一定要适度使用。遵循最小化影响原则。

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

.will-change-parent:hover .will-change {
  will-change: transform;
}
.will-change {
  transition: transform 0.3s;
}
.will-change:hover {
  transform: scale(1.5);
}

如果使用JS添加will-change, 事件或动画完毕，一定要及时remove. 比方说点击某个按钮，其他某个元素进行动画。点击按钮(click)，要先按下(mousedown)再抬起才出发。因此，可以mousedown时候提示浏览器准备GPU加速, 动画结束自带回调，移除GPU加速：

dom.onmousedown = function() {
    target.style.willChange = 'transform';
};
dom.onclick = function() {
    // target动画哔哩哔哩...
};
target.onanimationend = function() {
    // 动画结束回调，移除will-change
    this.style.willChange = 'auto';
};

使用硬件加速的注意事项

内存。如果GPU加载了大量的纹理，那么很容易就会发生内容问题，这一点在移动端浏览器上尤为明显，所以，一定要牢记不要让页面的每个元素都使用硬件加速。

使用GPU渲染会影响字体的抗锯齿效果。这是因为GPU和CPU具有不同的渲染机制。即使最终硬件加速停止了，文本还是会在动画期间显示得很模糊。