从输入URL到渲染页面 -- 全流程

在上一篇文章中我们介绍了本专栏的前置知识——浏览器的多进程架构。那么从这篇文章开始我们就正式带领大家一步步了解从输入URL到渲染页面的全过程。

废话不多说，大家先看下面我总结的这张图，表示了输入URL到渲染页面的全过程，同时也展示了多进程浏览器的进程之间是如何相互配合工作的

下面我们一步步详细说明

• 首先，浏览器进程接收到用户输入的 URL 请求（从上文中可知浏览器进程任务之一就是负责接收用户的交互行为），浏览器进程便将该 URL 转发给网络进程。
• 然后，在网络进程中发起真正的 URL 请求。
• 接着网络进程接收到了响应头数据，便解析响应头数据，并将数据转发给浏览器进程。
• 浏览器进程接收到网络进程的响应头数据之后，发送“提交导航 (CommitNavigation)”消息到渲染进程；
• 渲染进程接收到“提交导航”的消息之后，通过和网络进程建立数据管道的方式开始准备接收 HTML 数据。
• 最后渲染进程会向浏览器进程“确认提交”，这是告诉浏览器进程：“已经准备好接受和解析页面数据了”。
• 浏览器进程接收到渲染进程“提交文档”的消息之后，便开始移除之前旧的文档，然后更新浏览器进程中的页面状态。

1 处理用户输入

当用户在地址栏中输入一个查询关键字时，地址栏会判断输入的关键字的类型：

• 搜索内容。地址栏会使用浏览器默认的搜索引擎进行页面跳转并搜索
• 请求的 URL 。比如输入的是 baidu.com，那么地址栏会根据规则，把这段内容加上协议，合成为完整的 URL，如 https://baidu.com。

当判断为请求URL的适合，当前页面就要被替换成新的页面，不过替换之前，浏览器还会给当前页面执行 beforeunload 事件（如果有的话）。当前页面没有监听 beforeunload 事件或者同意了继续后续流程，那么浏览器便进入下图这样的loading状态：

从图中可以看出，当浏览器开始加载一个地址之后，标签页上的图标便进入了加载状态。但此时图中页面显示的依然是之前打开的页面内容，并没立即替换为淘宝的页面。因为需要等待提交文档阶段，页面内容才会被替换。

2 URL请求过程

接下来，便进入了页面资源请求过程。这时，浏览器进程会通过进程间通信（IPC）把 URL 请求发送至网络进程，网络进程接收到 URL 请求后，会在这里发起真正的 URL 请求流程。

1. 首先，网络进程会查找本地缓存是否缓存了该资源。如果有缓存资源，那么直接返回资源给浏览器进程；如果在缓存中没有查找到资源，那么直接进入网络请求流程（DNS查询和缓存）。如果请求协议是 HTTPS，那么还需要建立 TLS 连接（HTTPS如何建立连接）。
2. 接下来就是利用 IP 地址和服务器建立 TCP 连接。（如何建立连接，关于网络协议那些事）
3. 连接建立之后，浏览器端会构建请求行、请求头等信息，并把和该域名相关的 Cookie 等数据附加到请求头中，然后向服务器发送构建的请求信息。
4. 服务器接收到请求信息后，会根据请求信息生成响应数据（包括响应行、响应头和响应体等信息），并发给网络进程。
5. 网络进程接收了响应行和响应头之后，就开始解析响应头的内容了。

解析完响应头后，如果发现返回的状态码是 301、302、307、308等，就说明服务器需要浏览器重定向到其他 URL。这时网络进程会从响应头的 Location 字段里面读取重定向的地址，然后再发起新的 HTTP 或者 HTTPS 请求，再从第一步重新开始流程。当然如果响应200，浏览器就可以继续处理该请求。

除去状态码，浏览器还会根据服务器返回的Content-Type来针对不同类型的文件做出不同的处理。
例如常见的content-type有下面几个：

• text/html —— 服务器返回的数据是 HTML 格式。
• application/json —— 用于接口的json数据格式。
• application/octet-stream —— 字节流类型，通常用于下载场景

3 准备渲染进程

渲染进程准备好之后，还不能立即进入文档解析状态，因为此时的文档数据还在网络进程中，并没有提交给渲染进程，所以下一步就进入了提交文档阶段。

4 提交文档

提交文档就是浏览器进程将网络进程接收到的 HTML 数据提交给渲染进程，具体流程是这样的：

1. 首先当浏览器进程接收到网络进程的响应头数据之后，便向渲染进程发起“提交文档”的消息；
2. 渲染进程接收到“提交文档”的消息后，会和网络进程建立传输数据的“管道”；
3. 等文档数据传输完成之后，渲染进程会返回“确认提交”的消息给浏览器进程；
4. 浏览器进程在收到“确认提交”的消息后，会更新浏览器界面状态，包括了安全状态、地址栏的 URL、前进后退的历史状态，并更新 Web 页面。

这也就解释了为什么在浏览器的地址栏里面输入了一个地址后，在性能不好的电脑上，之前的页面没有立马消失，而是要加载一会儿才会更新页面。
到这里，一个完整的导航流程就走完了，这之后就要进入渲染阶段了。

5 渲染阶段

一旦文档被提交，渲染进程便开始页面解析和子资源加载了，关于这个阶段的完整过程，我们会分成几篇不同的文章来详细讲解。这里我们只需要先了解一旦页面生成完成，渲染进程会发送一个消息给浏览器进程，浏览器接收到消息后，会停止标签图标上的加载动画。

未完待续。。。