页面的渲染流程（Chrome）

浏览器在导航结束后，是怎么将HTML CSS Javascript 代码转换成可以和用户交互的界面的呢？

本文主要讲解的是谷歌浏览器的渲染流程

普通浏览器的页面渲染流程图如下，具体分析请看《页面的渲染流程》

谷歌浏览器的渲染进程

渲染进程最重要的任务就是将 HTML CSS Javascript 代码转换成可以和用户交互的界面。

在多进程浏览器中，每打开一个新页面就会创建一个进程，当然也会有些优化策略，如果同时打开多个空白页，会将多个空白页合并为一个进程。

谷歌浏览器自输入url到页面展示的完整示意图：

谷歌浏览器官网提供的渲染进程里的线程图：了解更多👉《剖析浏览器中的进程与线程》

• 主线程 Main thread
  主线程中即可以执行 JS ，也可以执行渲染工作，还可以执行其他工作，但是由于是主线程是只是一个线程，所以各个工作不能同时执行，只能按照一定的先后次序执行。
• 工作线程 Worker thread
  由 Worker 或 Service Worker 注册的 javascript 代码会有单独的 Worker 线程处理，独立于主线程。
• 合成线程 Compositor thread
  页面平滑层次展示
• 光栅线程 Raster thread
  页面快速呈现

网页选项卡内部的逻辑，都由渲染进程处理。在渲染进程中，主线程处理了绝大部分的网页代码。由 Worker 或 Service Worker 注册的 javascript 代码会有单独的 Worker 线程处理。Compositor (合成器)和 Raster (光栅)线程确保了页面快速平滑的呈现。

渲染流水线

下面是目前谷歌浏览器最新构架完整的渲染流水线图

除了display阶段是在浏览器进程进行，其他阶段都在渲染进程中进行。

结合上图，一个完整的渲染流程大致可总结为如下：

1. 渲染进程将 HTML 内容转换为浏览器能够理解的 DOM 对象。
2. 渲染引擎将 CSS 样式表转化为浏览器可以理解的 styleSheets，计算出 DOM 节点的样式。
3. 创建布局树，并计算元素的布局信息。
4. 对布局树进行分层，并生成分层树。
5. 为每个图层生成绘制列表，并将其提交到合成线程。
6. 合成线程将图层分成图块。
7. 在光栅化线程池中将图块转换成位图。
8. 合成线程发送绘制图块命令 DrawQuad 给浏览器进程。
9. 浏览器进程根据 DrawQuad 消息生成页面，并显示到显示器上。

---

1.构建DOM

当渲染进程接收到