触发硬件加速的 CSS 属性

  • transform
  • opacity
  • filter

硬件加速的工作原理

浏览器解析得到 DOM 树后, 与 CSS 形成渲染树, 渲染树上有大量的渲染元素, 每一个渲染元素都被分到一个图层中, 每个图层被加载到 GPU 形成渲染文理.

然而, transform 等 CSS 属性不会触发 GPU 的 repaint, 这些使用 transform 属性的图层都会有独立合成器进行处理.

比如某个元素具有 transform 属性, 那么会为他创建一个新的复合图层, 可以被 GPU 直接用来执行 transform 操作.

一般浏览器会在以下几种情况下创建一个独立的复合图层:

  • 3D 或 transform
  • <video 和<canvas>标签
  • CSS Filters
  • 元素覆盖时(比如 z-index)

3D 和 2D 的 transform 区别在于, 浏览器在页面渲染前为 3D 动画创建独立的复合图层, 而在运行期间为 2D 动画创建独立复合图层. 2D transform 在动画开始和结束的时候依旧出现了初始化和删除的 repaint.

强制使用 GPU 渲染

为了避免 2D transform 动画的两次 repaint, 我们可以硬编码一些样式来解决这个问题

.solution1{
  transform: translateZ(0);
}

.solution2{
  transform: rotateZ(360deg)
}

这段代码让浏览器执行 3Dtransform, 进而创建一个独立的复合涂层

硬件加速缺点

  1. 内存, 如果 GPU 加载了大量文理, 容易发生内存问题
  2. 使用 GUP 渲染会影响字体的抗锯齿效果, 因为 GPU 和 CPU 渲染机制不同. 即使最终硬件加速停止了, 文本还是会在动画期间显得模糊.