浏览器渲染原理

浏览器是如何渲染页面的

当浏览器的网络线程收到HTML文档后，会产生一个渲染任务，并将其传递给渲染主线程的消息队列。

在时间循环的机制的作用下，渲染主线程取出消息队列中的渲染任务，开启渲染流程。

第一步解析HTML

解析html 解析过程中遇到CSS解析 CSS，遇到JS执行JS。为了提高解析效率，浏览器在开始解析前，会启动一个预解析的线程，率先下载HTML中的外部CSS文件和JS的文件。

如果主线程解析道link 未知，此时外部的CSS文件还没有下载好，主线程不会等待，继续解析后续的HTML，这是因为下载和解析CSS的工作是在预解析线程中进行的。这就是CSS不会阻塞HTML解析的根本元音。

如果主线程解析道Javascript未知，会停止解析HTML，转而等待JS文件下载好，并且将全局代码解析执行完成，才能继续解析HTML。这是因为JS代码的执行过程可能会修改当前DOM树，所以DOM树的生成必须暂停。这就是JS会阻塞HTML的根本元音。

第一步完成后，会得到DOM树和CSSOM树，浏览器的默认样式、内部样式、外部样式、行内样式都会包含在CSSOM树中。

跑在不同的线程

html文档通过parseHtml转换为DOM树

样式表也是同样的会生成Style树

浏览器底层将 display 设置为了block 样式 CSS O M

预解析线程，率先下载和解析 CSS

渲染主线程在渲染过程中遇到外部样式时，浏览器会启动一个解析起率先下载外部资源

第二步样式计算

样式计算

ComputedStyle

CSS的计算过程

主线程会遍历得到的DOM树，依次为树中的每个节点计算样式，计算出她的最终样式，称之为 Computed Style。

在这过程中，很多预设值会变成绝对值，比如red会变成rgb，相对单位会变成绝对单位， em-> px

这一步完成后，会得到一颗带有样式的DOM树

第三步布局

布局

浏览器对 head link meta style script 做了 display: block

DOM树和 Layout 不是一一对应的

html 只是寓意话

布局阶段会依次遍历DOM树的每一个节点，计算每个节点的几何信息，例如节点的狂傲、相对包含块的位置。

大部分时候，DOM树和布局树并非一一对应

比如display: none 的节点没有几何信息，因此不会生成到布局树；又比如使用了伪元素选择器，虽然DOM树中不存在这些微元素节点，但他们拥有几何信息，所以会生成到布局树中。还有匿名行盒、匿名块盒等等都会导致DOM树和布局树无法一一对应；

第四步分层

分层 Layer

堆叠上下文有关的属性

使 will-change 来高速浏览器要求该元素进行分层

主线程会使用一套复杂的策略对整个布局树中进行分层。

分层的好处在于，将来某一个层改编后，仅对该层进行后续处理，从而提高效率。

滚动条、堆叠上下文、transform、opacity等样式都会影响分层结果，可以通过will-chang属性更大程度的影响分层结果。

第五步绘制

绘制

渲染主线程的工作到此为止，剩余步骤交给其他线程完成

主线程会为每个层单独产生绘制指令集，用于描述这一层的内容该如何画出来。

第六步分块

分块会将每一层分为多个小的区域

优先绘制窗口区域

这一步是合成线程来执行

完成绘制后，主线程将每个图层的绘制信息提交给《合成线程》,剩余工作是合成线程完成。

合成线程首先对每个图层进行分块，将其划分为更多的小区域。

它会从线程池中拿取多个线程来完成分块工作。

第七步光栅化

合成线程会将块信息交给GPU进程，以极高的速度完成光栅化。

GPU 进程会开启多个线程来完成光栅化，并且有线程处理靠近视口区域的块。

光栅化的记过，就是一块一块的位图

最后阶段《画》

合成线程拿到每个层、每个块的位图后，生成一个个指引（quad）信息。

指引会标识出每个位图应该画到屏幕的哪个位置，以及会考虑到旋转缩放等变形。

变形发生在合成线程，与渲染主线程无关，这就是transform效率高的本质原因。

合成线程会把 quad 提交给 GPU 进程，由 GPU 进程产生系统调用，提交给GPU硬件，完成最终的屏幕成像。

总结

生成DOM树和CSSOM树
计算样式Computed Style，让每一个元素都得到最终的样式
布局Layout，计算出每一个DOM节点的几何信息， 布局树和DOM树不一样，不能一一对应上（比如含有display: none、::before 等等）
分层layer、为了提高渲染效率，把页面分为几个图层，每个层可以单独进行绘制
产生绘制指令Paint，先画什么再画什么，在什么位置画，将志林交给合成线程区分块，对每一个块进行光栅化，也就是每个块的像素点、位图是什么， 优先光栅化当前视口的块，下一步将光栅化后的小块发送给GPU画出来