一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第18天，点击查看活动详情。
前述
GPU：图形处理器 CPU: 中央处理器
cpu当中有三个单元：控制单元、计算单元、存储单元。CPU的核指的是计算单元的数量。在cpu中计算单元会比较少，然后就出现了性能上的问题。
GPU俗称显卡，主要是为了复杂的数学和几何运算，在GPU中的计算单元是非常多的。主要的用途是在图像的绘制。
我们平时买电脑的时候都喜欢买一些显卡、显存能力比较好的，显存能力指的是临时存储数据的能力，缓存能力越大总体的运算能力也是越强的。
GPU的优势
GPU 特别适合高精度的浮点数运算，GPU 处理是比CPU更有优势的。GPU 也分为：家用型也叫做游戏显卡和专业型。家用的 显卡和专业显卡的绘图的方式是不一样的。专业的绘图方法是通过点来绘制，家用的绘制图像的方法基本单位是多边形，通过多边形旋转叠加。
我们的浏览器在设置 css 属性 transform 的时候，是通过点阵式来完成转变。而用家用式的 GPU 来处理点阵转换是比较耗费性能的，所以在网页里用 css3 构建游戏启动的效果，趋近于专业显卡，太多的动画也会造成性能严重的消耗。所以说一些成熟的网站动画效果都不太复杂。
浏览器的渲染顺序
- 浏览器会先下载 html 资源，然后是 css 和 js资源。
- css 文件在解析时会生成 cssrules tree，浏览器会调用一些接口 domAPI 来实现 domTree 节点和节点内容都会挂载到 tree 里面。
- JS 会结合 css rules tree, cssomAPI 最后会行成 cssom tree。 dom tree 和 cssom tree 组合行成 renderTree。
- renderTree 会把一些看不到（display：none等）的结构删除，里面都是需要的绘制的树形结构。
- 先 layout 布局再 paint 绘制， 形成一个多层的矢量图，每层结构都是一个逻辑层，然后用实际的像素（栅格化）来展示。 这是整个浏览器渲染引擎工作的流程。
在渲染完成后通过 js 改变了 dom 的结构，就会触发 layout 的改变。layout 改变后上面的过程就全部都改变了，这些改变就涉及到 reflow，如果只是改变了 dom 的颜色等就会触发 repaint。repaint的开销比reflow更大。
第一次渲染的时候一定会触发 reflow 和 repaint。
- reflow：改变窗口大小、改变字体大小、内容的改变、输入框输入文字、激活伪类、操作 class 属性、脚本操作 dom、计算offsetWidth和offsetHeight、设置style属性。
- repanit：改变颜色，不影响它周围或内部布局的属性
GPU加速
transform 处理最好交给 gpu 渲染，在 gpu 提供的渲染层上来处理 transform 操作。
改变 opacity 或使用 transform： translate3d、translateZ 都会开启 gpu 层，一般使用 will-change： transform 来开启（标准方法）。
我们设置 will-change：all； 然而层开启太多反倒弄巧成拙。开启 gpu 层浏览器是会有一个机制时刻等待监听。当层开启过多，那么浏览器就会有很多的监听机制，性能消耗就非常严重。
