CSS 开启 GPU 硬件加速的原理

#前端/CSS #2024/07/30

1. 原理

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

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

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

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

当一个元素被提升为单独的图层时，它的渲染会被委托给 GPU 处理。GPU 擅长处理纹理和图形，能够高效地处理图层的变换、缩放、旋转等操作。这样就能够 **GPU 硬件加速**

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

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

注意：其实二维也行

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

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

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

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

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