浏览器的渲染
浏览器的渲染过程分为两大阶段，八大步骤，由两个线程完成，
下面是总的过程
第一个 渲染主线程
它包括5个步骤，
1、html解析 parse
解析我们的HTML，生成DOM树结构
2、样式计算 computed style
比如我们的color：red会变成 color：rgb(255,0,0),相对单位会变成绝对单位，比如em会变成px
3、布局 layout
布局树上的每一个节点都挂载了它在页面上的位置也就是X，Y的坐标以及盒子模型的大小等几何信息
4、分层 layer
分层的好处在于，改变某一层级的元素时，只会对该层级产生影响，从而提高效率
滚动条，堆叠上下文，transform，opacity等样式都会影响分层的结果，也可以通过z-index，will-change属性对其进行分层、
5、绘制 paint
生成了绘制的指令，但是还没有执行，只是生成了指令，
而且这个时候渲染主线程基本上已经完结了，接下来的工作将交给合成线程去完成
第二个 合成线程
它包括3个步骤
1、分块 tiling
先会对每个图层进行一些分块，划分为更小的区域
2、光棚化
确认每一个像素点的rbg颜色信息
光栅化的操作不是由合成线程来做的，而是合成线程交给GPU进程，GPU进程会以极高的速度完成光栅化 GPU是专门干图形化处理的工作，他会开启多个线程进行绘制
3、绘制 draw
这是最后一步 所有的图形块被光栅化之后，合成线程就拿到了每个图层以及每个块的位置信息，从而生成了一个个的【指引】信息 指引会标识出每个图块应该渲染到屏幕的哪个位置，并且会考虑到旋转，缩放等变形效果 旋转，缩放等效果都发生在合成线程当中，和渲染主线程没有关系。所以为什么transform效率高就是这个原因
为什么回流的性能不好？
因为它要重新走渲染的流程，所以后面的流程都会影响
重绘会让合成线程重新合成，渲染主线程不会触发
为什么推荐动画使用transform呢？
因为它只会在8大步骤里面的draw里面进行，所以性能是极好的
