浏览器多进程模型

Chromium 的渲染流程

1. 请求 HTML

2. HTML Parser

   HTML Parser 有如下作用

   1. 解析 HTML 生成 DOM
   2. 预加载扫描器（Preload Scanner）扫描 HTML 中引入的外部资源（link、img、source、video、audio），提前请求外部资源

   不同的标签有不同的处理方式

   1. link：加载外部资源，不阻塞 HTML Parser
   2. script：又需要区分
      1. 无 async 和 defer：阻塞 HTML Parser，等待 script 下载完毕后立即执行 script，执行完毕后继续 HTML Parser
      2. async：不阻塞 HTML Parser，等待 script 下载完毕后才执行 script，中断 HTML Parser，script 执行完毕后继续 HTML Parser
      3. defer：不阻塞 HTML Parser，等待 script 下载完毕后，在 HTML Parser 后、在 DOMContentLoaded 前执行 script

3. StyleSheet Parser：解析 CSS，生成 CSSOM（CSS Object Model），如果存在多个 CSS，则遵循 CSS 层叠规则，合并到同一个 CSSOM

4. Render Tree：合并 DOM 和 CSSOM，构造 Render Tree

   例如

   1. display
      ：不会进入 Render Tree；visibility: hidden：会进入 Render Tree

5. Layout：布局，遍历 Render Tree，计算各个节点的盒模型、位置、层级等

6. Paint：绘制，生成绘制指令

7. Layerize：分层，将 Render Tree 拆分为多个合成层

   例如如下情况会创建新的合成层

   1. opacity
   2. transform 3D
   3. position: fixed

8. Tiling：分块，将每个合成层切割为小块，易于并行绘制，且可以只绘制可视区域内

9. Raster：光栅化，将绘制指令转换为像素

10. Composite：合成，GPU 合成显示