Skip to main content

CSS3 硬件加速

一、什么是硬件加速​

硬件加速就是将浏览器的渲染过程交给 GPU 处理，这样就可以使得 animation 与 transition 更加顺畅。

可以在浏览器中用 CSS 开启硬件加速，使 GPU (Graphics Processing Unit) 发挥功能，从而提升性能。

现在大多数电脑的显卡都支持硬件加速。因此可以发挥 GPU 的力量使网站或应用表现的更为流畅。

二、硬件加速的原理​

硬件加速会使页面流畅，因为浏览器接收到页面文档后，会将文档中的标记语言解析为 DOM 树。DOM 树和 CSS 结合后形成浏览器构建页面的渲染树。渲染树中包含了大量的渲染元素，每一个渲染元素会被分到一个图层中，每个图层又会被加载到 GPU 形成渲染纹理，而图层在 GPU 中 transform 是不会触发重绘的，最终这些使用 transform 的图层都会由独立的合成器进程进行处理。

过程如下：

render tree -> 渲染元素 -> 图层 -> GPU 渲染 -> 浏览器复合图层 -> 生成最终的屏幕图像

CSS transform 会创建了一个新的复合图层，可以被 GPU 直接用来执行 transform 操作。

打开浏览器 DevTools 更多工具的渲染（Rendering），对图层边框（Layer borders）打钩，可以看到使用 transform 样式的元素会被一个橙色的边框所包围，因此它在一个独立的层中：


三、为什么 transform 没有触发重绘​

transform 动画由 GPU 控制，支持硬件加速，并不需要软件方面的渲染。

四、如何开启硬件加速​

浏览器什么时候会创建一个独立的复合图层呢？事实上一般是在以下几种情况下：

  • 3D 或 transform 属性
  • opacity 属性
  • filter 属性
  • z-index 属性
  • <video> 和 <canvas> 标签

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

/* 方法一 */
.element {
  transform: translateZ(0);
}

/* 方法二 */
.element {
  transform: rotateZ(360deg);
}

/* 方法三 */
.element {
  transform: translate3d(0, 0, 0);
}

在 Chrome and Safari 中使用 translateZ 触发硬件加速可能会有页面闪烁的效果，下面的代码可以修复此情况：

.cube {
  backface-visibility: hidden;
  perspective: 1000;
}

原生的移动端应用总是可以很好的运用 GPU，这是为什么它比网页应用表现更好的原因。硬件加速在移动端尤其有用，因为它可以有效的减少资源的利用。

可以在 CSS-Triggers 查询哪些属性会在执行动画时触发 CSS 布局变动。

五、使用硬件加速的问题​

  • 耗内存：如果 GPU 加载了大量的纹理，会非常消耗内存，这一点在移动端浏览器上尤为明显，所以要避免页面的每个元素都使用硬件加速。

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

使用3D硬件加速提升动画性能时，最好给元素增加一个 z-index 属性，人为干扰复合层的排序，可以有效减少 chrome 创建不必要的复合层，提升渲染性能，移动端优化效果尤为明显。

.element {
  position: relative;
  z-index: 1;
}