1. CPU

cpu 每个核只有一个线程，也就是单控制流、单数据流。这样的架构导致 cpu 在一些场景下效率是不高的，比如 3d 渲染的场景。

2. 3d 渲染流程

3d 的渲染首先是建立 3d 的模型，它由一系列三维空间中的顶点构成，3 个顶点构成一个三角形，然后所有的顶点构成的三角形拼接起来就是 3d 模型。

顶点、三角形，这是 3d 的基础。3d 引擎首先要计算顶点数据，确定 3d 图形的形状。之后还要对每个面进行贴图，可以在每个三角形画上不同的纹理。

3d 渲染的流程是：

• 计算顶点数据，构成 3d 的图形
• 给每个三角形贴图，画上纹理
• 投影到二维的屏幕，计算每个像素的颜色（光栅化）
• 把一帧的数据写入显存的帧缓冲区

顶点的数量是非常庞大的，而 cpu 只能顺序的一个个计算，所以处理这种3d渲染会特别费劲，于是就出现了专门用于这种 3d 数据的并行计算的硬件，也就是 GPU。

3. GPU 的构成

和 cpu 的一个一个数据计算不同，gpu 是并行的，有成百上千个核心用于并行计算。

gpu 是单控制流多数据流的，而 cpu 是单控制流单数据流。

所以，对于 3d 渲染这种要计算成万个顶点数据和像素点的场景，GPU 会比 CPU 高效很多。

4. CPU 和 GPU 的区别

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

cpu 中控制器和缓存占据了很大一部分，而 gpu 中这两部分则很少，但是有更多的核心用于计算

5. opengl、webgl、css 硬件加速

显卡中集成了gpu，提供了驱动，使用 gpu 能力需要使用驱动的api。 gpu 的 api 有一套开源标准叫做 opengl，有三百多个函数，用于各种图形的绘制。

我们在网页中绘制 3d 图形是使用 webgl 的 api，而浏览器在实现 webgl 的时候也是基于 opengl 的 api，最终会驱动 gpu 进行渲染。

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

• transform
• opacity
• filter
• will-change（实验性质）

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

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

提示

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

gpu 硬件加速能减轻 cpu 压力，使得渲染更流畅，但是也会增加内存的占用，对于 transform、opacity、filter 默认会开启硬件加速。其余情况，建议只在必要的时候用。