谈谈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;        /* 示例 */
will-change: opacity;          /* 示例 */
will-change: left, top;        /* 两个  示例 */

/* 全局值 */
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 具有不同的渲染机制。即使最终硬件加速停止了，文本还是会在动画期间显示得很模糊。