从输入URL到渲染都经历了什么？

从输入 URL 到页面展示完整流程

介绍完前面所需要的三个基本知识背景后（HTTP 请求流程包括了TCP连接），现在只需要将其串起来就能回答从输入 URL 到页面展示完整流程。

同样，先给出从输入 URL 到页面展示完整流程示意图：

由图中不难发现，最外层是三种Chrome进程，而网络进程所执行的操作就是HTTP 请求流程并且渲染进程所执行的操作就是渲染流程。

下面，先给出此流程图精简版的描述：

1.首先，浏览器进程接收到用户输入的 URL 请求，浏览器进程便将该 URL 转发给网络进程。

2.然后，在网络进程中发起真正的 URL 请求。

3.接着网络进程接收到了响应头数据，便解析响应头数据，并将数据转发给浏览器进程。

4.浏览器进程接收到网络进程的响应头数据之后，发送“提交导(CommitNavigation)”消息到渲染进程。

5.渲染进程接收到“提交导航”的消息之后，便开始准备接收 HTML 数据，接收数据的方式是直接和网络进程建立数据管道。

6.最后渲染进程会向浏览器进程“确认提交”，这是告诉浏览器进程：“已经准备好接受和解析页面数据了”。

7.浏览器进程接收到渲染进程“提交文档”的消息之后，便开始移除之前旧的文档，然后更新浏览器进程中的页面状态。

下面还有一个结合前面基础知识的更详细的流程描述：

用户输入

1.用户在地址栏按下回车，检查输入（关键字 or 符合 URL 规则），组装完整 URL；
2.回车前，当前页面执行 onbeforeunload 事件；
3.浏览器进入加载状态。

URL请求

1. 浏览器进程通过 IPC 把 URL 请求发送至网络进程；
2. 查找资源缓存（有效期内）；
3. DNS 解析（查询 DNS 缓存）；
4. 进入 TCP 队列（单个域名 TCP 连接数量限制）；
5. 创建 TCP 连接（三次握手）；
6. HTTPS 建立 TLS 连接（client hello, server hello, pre-master key 生成『对话密钥』）；
7. 发送 HTTP 请求（请求行[方法、URL、协议]、请求头 Cookie 等、请求体 POST）；

8. 接受请求（响应行[协议、状态码、状态消息]、响应头、响应体等）；

   状态码 301 / 302，根据响应头中的 Location 重定向；
   状态码 200，根据响应头中的 Content-Type 决定如何响应（下载文件、加载资源、渲染 HTML）。
   

准备渲染进程

根据是否同一站点（相同的协议和根域名），决定是否复用渲染进程。

提交文档

1.浏览器进程接受到网路进程的响应头数据，向渲染进程发送『提交文档』消息；
2.渲染进程收到『提交文档』消息后，与网络进程建立传输数据『管道』；
3.传输完成后，渲染进程返回『确认提交』消息给浏览器进程；
4.浏览器接受『确认提交』消息后，移除旧文档、更新界面、地址栏，导航历史状态等；
5.此时标识浏览器加载状态的小圆圈，从此前 URL 网络请求时的逆时针选择，即将变成顺时针旋转（进入渲染阶段）。

渲染

渲染流水线

构建 DOM 树

1.输入：HTML 文档；
2.处理：HTML 解析器解析；
3.输出：DOM 树。

样式计算

1.输入：CSS 文本；
2.处理：属性值标准化，每个节点具体样式（继承、层叠）；
3.输出：styleSheets(CSSOM)。

布局(DOM 树中元素的计划位置)

1.DOM & CSSOM 合并成渲染树；
2.布局树（DOM 树中的可见元素）；
3.布局计算。

分层

1.特定节点生成专用图层，生成一棵图层树（层叠上下文、Clip，类似 PhotoShop 里的图层）；
2.拥有层叠上下文属性（明确定位属性、透明属性、CSS 滤镜、z-index 等）的元素会创建单独图层；
3.没有图层的 DOM 节点属于父节点图层；
4.需要剪裁的地方也会创建图层。

绘制指令

1.输入：图层树；
2.渲染引擎对图层树中每个图层进行绘制；
3.拆分成绘制指令，生成绘制列表，提交到合成线程；
4.输出：绘制列表。

分块

合成线程会将较大、较长的图层（整个屏显示不完，大部分不在视口内）划分为图块（tile, 256256, 512512）。

光栅化（栅格化）

1.在光栅化线程池中，将视口附近的图块优先生成位图（栅格化执行该操作）；
2.快速栅格化：GPU 加速，生成位图（GPU 进程）。

合成绘制

1.绘制图块命令——DrawQuad，提交给浏览器进程；
2.浏览器进程的 viz 组件，根据DrawQuad命令，绘制在屏幕上。