80、CSS3硬件加速

一、为什么使用GPU

 

3d 图形要显示在二维的屏幕上就要做投影，这个投影的过程叫做光栅化。（光栅是一种光学仪器，在这里就代表 3d 投影到 2d 屏幕的过程）

光栅化要计算 3d 图形投影到屏幕的每一个像素的颜色，计算完所有的像素之后会写到显存的帧缓冲区，完成了一帧的渲染，之后会继续这样计算下一帧。

也就是说，3d 渲染的流程是：

• 计算顶点数据，连成一个个三角形，构成 3d 的图形（顶点的数量是非常庞大的）；
• 给每个三角形贴图，画上纹理；
• 投影到二维的屏幕，计算每个像素的颜色（光栅化）；
• 最后写入显存的帧缓冲区，这样进行一帧帧的渲染。

cpu 的计算是一个个串行执行的，对于 3d 渲染这种涉及大量顶点、像素要计算的场景就不太合适，于是出现了 gpu。

gpu 可以并行执行大量重复的计算，有成百上千个计算单元。相比 cpu 虽然执行不了复杂逻辑，但是却能执行大量重复的运算。

二、cpu与gpu的区别：

1. cpu 是通用的，能够执行各种逻辑和运算；
2.  gpu 则是主要是用于并行计算大批量的重复任务，不能处理复杂逻辑。

三、CSS硬件加速

css 大部分样式还是通过 cpu 来计算的，但 css 中也有一些 3d 的样式和动画的样式，计算这些样式同样有很多重复且大量的计算任务，可以交给 gpu 来跑。

浏览器在处理下面的 css 的时候，会默认使用 gpu 渲染：

• transform
• opacity
• filter
• will-change（不会修改样式，指定哪一个属性即将变化）

浏览器是把内容分到不同的图层分别渲染的，最后合并到一起；而触发 gpu 渲染会新建一个图层，把该元素样式的计算交给 gpu。 

opacity 需要改变每个像素的值，符合重复且大量的特点，会新建图层，交给 gpu 渲染。transform 是动画，每个样式值的计算也符合重复且大量的特点，也默认会使用 gpu 加速。同理 fiter 也是一样。

注意：gpu 硬件加速是需要新建图层的，而把该元素移动到新图层是个耗时操作，界面可能会闪一下，所以最好提前做。will-change 就是提前告诉浏览器在一开始就把元素放到新的图层，方便后面用 gpu 渲染的时候，不需要做图层的新建。

有的时候我们想强制触发硬件渲染，就可以通过上面的属性。浏览器会新建图层来渲染该元素，然后使用 gpu 渲染。比如：

will-change: transform;  //不会修改样式
或
transform:translate3d(0, 0, 0);

1. gpu 硬件加速能减轻 cpu 压力，使得渲染更流畅；
2. 合成层中的元素修改样式时，不会影响合成层外的元素，它是处于一个独立的环境中；
3. 对于 transform、opacity、filter 默认会开启硬件加速，其余情况，建议只在必要的时候用；
4. 但是也会增加内存的占用，当合成层较多时，会出现层爆炸；

参考：这一次，彻底搞懂 GPU 和 css 硬件加速 - 知乎