开启 GPU 硬件加速的原理

#前端/CSS

目录

1. 原理

1.1. 核心原理

  • GPU 硬件加速的核心原理在于将特定的渲染任务从 CPU 移交给 GPU 进行处理。
  • GPU 擅长处理大规模的并行任务，这对于动画、变换和其他复杂的视觉效果来说尤其有效。
  • 通过 GPU 硬件加速，可以大幅提升这些任务的执行效率和渲染速度。

1.2. 从浏览器的渲染过程分析原理

CSS 开启 GPU 硬件加速的原理主要涉及浏览器的渲染过程和图层（Layer）的概念。让我们深入了解这个过程：

浏览器渲染页面通常遵循以下步骤：

  • 解析 HTML 构建 DOM 树
  • 解析 CSS 构建 CSSOM 树
  • 将 DOM 和 CSSOM 合并成渲染树
  • 布局（Layout）：
    • 计算元素的位置和大小
  • 绘制（Paint）：
    • 将元素绘制到屏幕上
  • 合成（Composite）：
    • 将不同的图层合并到一起

1.2.1. 图层（Layer）

  • 浏览器会将页面分成多个图层。默认情况下，普通元素都在同一个图层中。
  • 但某些特定的 CSS 属性可以让元素提升为单独的图层。

当一个元素被提升为单独的图层时，它的渲染会被委托给 GPU 处理。

GPU 擅长处理纹理和图形，能够高效地处理图层的变换、缩放、旋转等操作。这样就能够 GPU 硬件加速

1.2.2. 以 transform: translate3d(0,0,0) 为例

  • 这个看似无用的 3D 变换会强制浏览器为该元素创建一个新的图层。
  • 新图层会被送到 GPU 处理。
  • GPU 可以高效地处理这个图层的后续变换，无需重新布局或重绘整个页面。

1.2.3. 内部工作机制

  • 当元素被提升为独立图层后，它会被存储为纹理在 GPU 中。
  • GPU 可以直接操作这个纹理，进行位置移动、缩放、旋转等操作，无需 CPU 参与
  • 这大大减少了 CPU 的工作负担，提高了动画的流畅度。

2. CSS 触发 GPU 加速的属性

以下是一些可以触发 GPU 硬件加速的 CSS 属性，告诉浏览器在最开始就把该元素放到新图层渲染。

2.1. transform

应用二维或三维变换，如 transform: translate3d(0, 0, 0);

注意：其实二维也行

2.2. opacity：改变元素的透明度

opacity 这个也行，平时没太注意

2.3. filter：应用图像处理效果

filter 属性用于应用各种图形处理效果（例如模糊、亮度、对比度等），这些效果通常也会使用 GPU 加速来提高性能。

.element {
  filter: blur(5px);
}

2.4. will-change

显式声明某些属性将发生变化，从而让浏览器提前优化这些元素

2.5. CSS 动画和过渡（transition 或 animation）

will-change 属性让开发者可以显式地告诉浏览器哪些属性将会变化，从而让浏览器提前优化这些元素。

.element {
  will-change: transform, opacity;
}

3. 优势

  • 减少重绘：
    • 图层的变化不会影响其他图层，减少了不必要的重绘
  • 提高性能：
    • GPU 并行处理能力强，适合处理图形任务
  • 流畅动画：
    • 减少了 CPU 的参与，使动画更加流畅

4. 注意事项

  • 过度使用可能导致内存占用增加。
  • 不是所有设备都有强大的 GPU，过度依赖可能在低端设备上适得其反。
  • 不同浏览器的实现可能有差异。

image.png