浏览器渲染页面原理

浏览器渲染页面步骤

• 当浏览器的网络线程收到HTML文档后，会产生一个渲染任务，并将其传递给渲染主线程的消息队列。
• 在事件循环机制的作用下，渲染主线程取出消息队列中的渲染任务，开启渲染流程。
• 整个渲染流程分为多个阶段，分别是：HTML解析、样式计算、布局、分层、绘制、分块、光栅化、画
• 每个阶段都有明确的输入输出，上个阶段的输出会成为下个阶段的输入。这样，整个渲染流程就形成了一套组织严密的生产流水线。

1.解析html

解析html生成 htmlDom树，cssDom树

主线程遇到css解析css，遇到js解析js，为了提高效率，会开启一个预解析线程，优先下载用到的css或者js文件，如果css文件没有下载好，主线程不会等待，但是js文件没有下载好，主线程会等待，因为js可能会修改当前dom。

所以这就是link标签 css不会阻塞主线程，js会阻塞主线程的原因。

2.样式计算

经过这一过程，em会变成px，red会变成rgb(255,0,0)

3.布局

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

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

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

4.分层

提高效率，当某一层变化后，仅对当前层处理

5.绘制

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

6.分块

绘制之后的内容就是其他线程干的了

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

7.光栅化

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

光栅化的结果，就是一块一块的位图。

8.画

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

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

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

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

面试：重排，重绘，transform效率

重排

重绘：paint阶段改变，重排一定重绘

transform:draw阶段，draw阶段在合成线程中，所以transform的变化几乎不会影响渲染主线程。反之，渲染主线程无论如何忙碌，也不会影响transform的变化。