学习记录-浏览器渲染流程

渲染时间点

• 在网络线程接收到HTML文档后，会产生一个渲染任务，并将其传递到渲染主线程的消息队列中。在事件循环的作用下，渲染主线程取出消息队列中的渲染任务，开启渲染流程。

渲染流程

1. 解析HTML
   • 解析过程中遇到CSS/JS就先解析CSS/JS。浏览器在开始解析前，会启动一个预解析的线程，提前加载解析CSS。
   • 主线程在遇到标签的时候，主线程不会等待CSS文件下载解析好，直接继续解析后面的HTML。
   • CSS的下载和解析都在预解析线程中进行，这就是CSS解析不会阻塞HTML解析的根本原因
   • JS的下载和解析会阻塞HTML的解析，因为在JS代码执行过程中可能会对DOM树有所修改，这是JS解析阻塞HTML解析的根本原因
   • 在这步完成后，会得到DOM树和CSSOM树
2. 样式计算
   • 主线程会遍历得到的DOM树，依次为树中的每个节点计算出它的最终样式(Computed Style)
   • 在这一过程中，很多预设值会变成绝对值，相对单位会变成绝对单位。
   • 这一步完成后，会得到一颗带有最终样式的DOM树
3. 布局
   • 布局完成后会得到布局树
   • 布局阶段会遍历上一阶段的DOM树的每一个节点，计算每个节点的几何信息
4. 分层
   • 主线程会使用一套策略对整个布局树进行分层
   • 分层的好处在于，某一层发生改变时，只用对该层进行处理，提升效率
   • 有点类似组件化？？
   • 滚动条、堆叠上下文、transform、opacity 等样式都会或多或少的影响分层结果，也可以通过will-change属性更大程度的影响分层结果。
5. 绘制
   • 对每个曾单独产生绘制指令集，用于描述这一层的内容该如何画出来
6. 分块
   • 完成绘制后，会将每个图层的绘制信息提交给合成线程，剩余工作由合成线程完成
   • 合成线程对每个图层进行分块，使用多个线程完成分块工作
7. 光栅化
8. 画
   • 合成线程拿到光栅化产生的位图后，生成「指引（quad）」信息
   • 指引会标示出每个位图应该画到屏幕的哪个位置，以及旋转缩放等变形
   • transform效率高的原因是发生在合成线程，使用GPU完成

什么是reflow？

reflow翻译过来就是重排，本质就是重新计算布局树。当进行了会影响布局树的操作后，需要重新计算布局树，就会引发reflow(重排)。

为了避免连续多次操作导致布局树反复计算，浏览器会合并操作，当JS代码完成后再进行统一计算。

什么是repaint？

repaint翻译过来就是重绘，本质就是可见样式发生了改变，对布局树没有影响，需要重新计算分层，所以会引发repaint