GPU 和 CSS 硬件加速

CPU：cpu 每个核只有一个线程，也就是单控制流、单数据流。是通用的，能够执行各种逻辑和运算，cpu 中控制器和缓存占据了很大一部分，主要用于处理一些复杂的逻辑
GPU：单控制流多数据流，gpu 则是主要是用于并行计算大批量的重复任务，不能处理复杂逻，主要用于处理大量重复却简单的计算
浏览器渲染流程：

1. 渲染引擎会对HTML文档进行解析生成DOM树、对CSS文件进行解析生成CSSOM树；同时执行页面中的JavaScript代码；
2. 最终根据DOM树和CSSOM树，计算样式（Caluclate Style）生成渲染树，渲染树中，只会包含即将显示在页面中的元素及其样式信息（如head元素、display为hidden的元素就不会包含在渲染树中）；
3. 根据渲染树需要进行布局（layout）来计算每个元素在页面上的位置，按照css规则将渲染元素分为不同层；
4. 接下来渲染引擎开始进行绘制（paint），这一步分为若干阶段：根据渲染树将每层（layer）的各个元素绘制，然后将绘制出的若干连续图像进行栅格化（Rasterization），最后将栅格化后的图像合成（composite）为要显示在屏幕上的图像。对每一层的绘制是由浏览器来完成的；
5. 最后的合成是由GPU来完成；而栅格化过程取决于浏览器的设置，chrome默认开启GPU栅格化，否则由CPU进行。

在渲染中主要消耗时间的是Layout/Reflow和Paint/Repaint的过程，因此要尽量避免和减少这两个阶段的时间。
如何开启硬件加速：

1. transform
2. opacity
3. filter
4. will-change: left; 浏览器就会知道left这个属性会发生变化，因此会开启硬件加速优化性能

将需要进行动画的元素提升到一个独立的层（layer），这样就可以避免浏览器进行重新布局（Reflow）和绘制（Repaint），将原先的浏览器使用CPU绘制位图来实现的动画效果转为让GPU使用图层合成（composite）来实现，如果两张图层内部没有发生改变，浏览器就不再进行布局和绘制，直接使用GPU的缓存来绘制每个图层，GPU只负责将各个图层合成来实现动画，这就可以充分利用GPU的资源和优势，减轻CPU的负载，可以使动画更流畅。通过改变两张图片之间的相对位置代替绘制一张图片的每一帧来实现动画，虽然视觉效果相同，但省去了许多绘制的时间
分析：
过度使用反而会降低页面的性能，虽然硬件加速可以提高GPU的使用，但从layers中的信息可以看出，每个层都需要消耗一定的内存，过多的内存占用也会造成性能的下降；过多的层传输到GPU的过程也会消耗一定的时间，此外也造成合成阶段的时间占用较长，因此并不是独立的层越多越好。最好的做法是对那些可能动画的元素设置属性，并在动画结束后就移除这个属性。