浏览器渲染原理

浏览器中渲染指的是将一个html字符串变成屏幕上的像素信息。

1、解析html

称为dom树，css树。js可以操作dom树、css树。（除了浏览器的默认样式，其他样式js都能操作。html解析过程中如果遇到css代码，浏览器会启动一个预解析器率先下载和解析css。解析过程中遇到js时会暂停一切行为，等待下载执行完后才能继续，预解析线程可以分担一点下载js的任务。因为js代码中有可能存在会改变当前dom树。

2、样式计算

计算出dom树里的每个节点的样式，计算完之后就是一颗有样式的dom树。此时的样式就是计算后的样式通俗理解就是最终样式。css属性值的计算过程就发生在这个过程。

3、布局

（包含块：元素的属性值都是相对于包含块的）元素的尺寸、位置都会在布局这个阶段确定。输入的是dom树，输出的是layout树。layout树上是能够找到每个节点的几何信息的，因此隐藏的元素是不会出现在布局树中的，如：display：none。

4、分层

输出布局树。主线程会使用一套复杂的策略对整个布局中进行分层。分层的好处在于，将来某一个层改变后，仅会对该层进行后续处理，从而提升效率。滚动条、堆叠上下文、transform、opacity等样都会或多或少的影响分层结果，也可以通过will-change属性更大程度的影响分层结果。

5、绘制

主线程会为每个层单独生成绘制指令集，用于描述这一层的内容该如何画出来。完成绘制后，主线程将每个图层的绘制信息提交给合成线程，剩余工作将由合成线程完成。合成线程首先对每个图层进行块，将其划分为更多的小区域。他会从线程池中拿取多个线程来完成分块工作。渲染主线程的工作到此为止，剩余步骤交给其他线程完成。

6、分块

分块的工作是交给多个线程同时进行的（合成线程启动多个分块线程）。合成线程首先对每个图层进行分块，将其划分为更多的小区域。它会从线程池中拿取多个线程来完成分块工作。

7、光栅化

合成线程会将块信息交给gpu进程，以极高的速度进行光栅化。gpu进程会开启多个线程来完成光栅化，并且优先处理靠近视口区域的块。光栅化的结果，就是一块一块的图位（图片，每个图片都包含像素点信息）。

8、画

合成线程拿到每个层、每个块的位图后，生成一个个指引（quad）信息。指引会标识出每个位图应该画到屏幕的哪个位置，以及会考虑到旋转、缩放等变形。变形发生在合成线程，与渲染主线程无关，这就是transform效率高的本质原因。合成线程会把quad提交给gpu进程，由gpu进程产生系统调用，提交给gpu硬件，完成最终的屏幕成像。

什么是reflow？

reflow的本质就是重新计算layout树。

当进行了会影响布局树的操作后，需要重新计算布局树，引发layout。

为了避免连续的多次操作导致布局树反复计算，浏览器会合并这些操作，当js代码全部完成后再进行同一计算。所以，改动属性造成的reflow是异步完成的。

也同样因为如此，当js获取布局属性时，就可能造成无法获取到最新的布局信息。

浏览器在反复权衡下，最终决定获取属性立即reflow。

什么是repaint？

repaint的本质就是重新根据分层信息计算了绘制指令。

当改动了可见样式后，就需要重新计算，会引发repaint。

由于元素的布局信息也属于可见样式，所以reflow一定会引起repaint。

为什么transform的效率高？

因为transform既不会影响布局也不会影响绘制指令，它影响的只是渲染流程的最后一个draw阶段。由于draw阶段在合成线程中，所以transform的变化几乎不会影响渲染主线程。反之，渲染主线程无论如何忙碌，也不会影响transform的变化。