cpu的工作流程：
从内存中把数据和指令加载到 cpu 的缓存中，然后通过控制器控制指令的译码、执行，通过运算器进行运算，之后把结果写回内存。
3d 渲染的流程是：
- 计算顶点数据，构成 3d 的图形
- 给每个三角形贴图，画上纹理
- 投影到二维的屏幕，计算每个像素的颜色（光栅化）
- 把一帧的数据写入显存的帧缓冲区
顶点的数量是非常庞大的，而 cpu 只能顺序的一个个计算，所以处理这种 3d 渲染会特别费劲，于是就出现了专门用于这种 3d 数据的并行计算的硬件，也就是 GPU。
cpu 和 gpu 的区别：
如果逻辑复杂，那么只能用 cpu，如果只是计算量大，并且每个计算都比较重复，那就比较适合 gpu。
3d 的渲染中有大量这种重复却简单的计算，比如顶点数据和光栅化的像素数据，通过 gpu 就可以并发的一次计算成百上千个。
css 大部分样式还是通过 cpu 来计算的，但 css 中也有一些 3d 的样式和动画的样式，计算这些样式同样有很多重复且大量的计算任务，可以交给 gpu 来跑。
浏览器在处理下面的 css 的时候，会使用 gpu 渲染：
- transform
- opacity
- filter
- will-change
浏览器是把内容分到不同的图层分别渲染的，最后合并到一起，而触发 gpu 渲染会新建一个图层，把该元素样式的计算交给 gpu。
这里要注意的是 gpu 硬件加速是需要新建图层的，而把该元素移动到新图层是个耗时操作，界面可能会闪一下，所以最好提前做。will-change 就是提前告诉浏览器在一开始就把元素放到新的图层，方便后面用 gpu 渲染的时候，不需要做图层的新建。
当然，有的时候我们想强制触发硬件渲染，就可以通过上面的属性，比如
will-change: transform;
或者
transform:translate3d(0, 0, 0);
chrome devtools 可以看到是 cpu 渲染还是 gpu 渲染，打开 rendering 面板，勾选 layer borders，会发现蓝色和黄色的框。蓝色的是 cpu 渲染的，而黄色的是 gpu 渲染的。
gpu 硬件加速能减轻 cpu 压力，使得渲染更流畅，但是也会增加内存的占用，对于 transform、opacity、filter 默认会开启硬件加速。其余情况，建议只在必要的时候用。
