浏览器知识点整理（六）导航流程

前言

了解了浏览器的 导航流程，就可以来回答 “从输入 url 按下回车到页面展示的过程中发生了什么？”这道经典问题的前半部分了，即 从用户发出 URL 请求到页面开始解析的这个过程，也就是 网络请求部分。

我们知道，现在的 Chrome 浏览器是多进程架构，上面的这道经典问题涉及到的进程有浏览器进程、网络进程和渲染进程，先来简单回顾一下这三个进程的主要职责：

浏览器进程：主要负责页面显示、用户交互、子进程管理、文件存储等功能。
网络进程：主要为浏览器进程和渲染进程提供网络请求资源功能。
渲染进程：核心任务是将 HTML、CSS 和 JavaScript 转换为用户可以与之交互的网页。

接下来就 来看看浏览器是怎么通过进程之间的协作来完成网络请求的功能吧！

用户输入

流程从用户在地址栏输入查询关键字开始：

用户在地址栏输入关键字，浏览器进程 会判断是请求 url 还是搜索内容
- 如果是搜索内容，则浏览器会使用默认的搜索引擎，合成带有搜索内容的 url
- 如果是请求的 url，则根据规则判断是否完整，不完整则根据规则合成完整的 url
按下回车，浏览器进入加载状态
- 在流程继续之前，浏览器还有一个 beforeunload 事件可以执行，该事件可以做一些数据清理操作，还可以中断流程，取消导航；
- 如果没有 beforeunload 事件或同意继续后续的操作，则流程继续，浏览器进入加载状态；
- 但页面还是之前的内容，要到 提交文档 阶段才会被替换新的内容。

例如，下图原来的页面是 https://www.npmjs.com/package/egg 的内容，我在搜索框输入 https://www.npmjs.com/package/koa 后按下回车，浏览器便进入了加载状态（左上角的图标开始转圈圈、左下角说正在等待响应），但是页面还是之前 egg 的内容。

接下来是进入 网络资源请求过程，浏览器进程 通过进程间通信（IPC）把 url 请求交给 网络进程。

网络资源请求

查找缓存

上面 浏览器进程 已经把 url请求的活交给了 网络进程，那么接下来具体的请求流程是怎么样的呢？

网络进程并不会直接发起网络请求，因为 没有请求的请求，才是最快的请求。

按照 浏览器缓存策略，网络进程会去检查该资源 是否允许缓存（Cache-Control），是否在本地缓存了该资源（缓存位置依次查找）
如果有缓存资源则网络进程直接返回资源给浏览器进程，网络请求结束
如果没有找到资源或者需要验证资源是否有效，则会 真正进入网络请求流程

缓存是一个大课题，会在后面性能优化的章节再详细整理。

DNS 解析

网络请求的 第一步是要拿到请求的服务器 IP 地址，因为 网络请求过程归根结底是一个计算机向另一个计算机请求资源，需要通过 IP 地址建立连接的。

一般情况下，用户看到的用到的是域名，是一串用 . 分隔的多个单词，像掘金是 juejin.cn、淘宝是 www.taobao.com、百度是 www.baidu.com，这个域名是极其重要的，它是一个网站的入口，可以说是拥有了一个好域名就拥有了一个好梦想。听说 FACEBOOK 一开始的域名是 thefacebook.com，后来融资了才花 20 万美金买回 facebook.com 的域名，要是穿越回到过去，屯一波域名都可以成为亿万富翁，哈哈。

回到正题，一个域名可以对应多个 IP 地址，它可以是源服务器的 IP 地址，也可以是 CDN 分发的 IP 地址，还可以是迁移服务器时的一些临时 IP 地址，我们可以用域名系统做很多有趣的事情。

为了拿到正确的 IP 地址，它有一套自己的解析系统，这个系统就是 DNS 系统，如果想更多的了解 DNS 系统，可以去看我之前写过的 DNS域名系统有哪些门道？。

那么接下来继续 网络请求流程：

如果用户输入的就是 IP 地址，则直接进入 TCP 连接阶段
如果用户输入的是域名，则需要进行 DNS 解析，得到服务器的 IP 地址再建立 TCP 连接
- DNS 也是有缓存的，它的缓存查找过程是浏览器缓存->操作系统缓存->Hosts文件->非权威域名服务器 -> 根域名服务器 -> 顶级域名服务器 -> 权威域名服务器

TCP 连接

网络进程拿到 IP 地址之后则进入 TCP 连接阶段。

请求进入 TCP 队列，单个域名是有 TCP 连接限制（最多6个）的，超出限制需要排队。
浏览器和服务端通过三次握手建立 TCP 连接
- 客户端向服务端发送连接请求报文
- 服务端收到连接请求报文段后，如果同意连接，则会发送一个应答
- 当客户端收到连接同意的应答后，要向服务端发送一个确认报文
如果请求协议是 HTTPS，TCP 连接后还要建立 TLS 连接（安全地交换对称密钥）

发出 HTTP 请求

建立连接后，网络进程正式发出 HTTP 请求。

浏览器端会构建请求行、请求头等信息，并把和该域名相关的 Cookie 等数据附加到请求头中，然后向服务器发送请求信息
- 请求行简要地描述了客户端想要如何操作服务器端的资源，由请求方法、请求目标、版本号三部分构成
- 头部字段是 key-value 的形式， key 和 value 之间用 : 分隔，用 CRLF 换行，表示字段结束。

服务器响应返回数据

服务器接收到请求信息后，会根据请求信息 生成响应数据返回（包括响应行、响应头和响应体等信息）
- 状态行代表服务器响应的状态，同样由三部分构成：版本号、状态码、原因
服务器返回信息给网络进程，网络进程接收后开始解析：
- 解析响应头：
  - 如果发现返回状态码是 301 或 302，则说明服务器需要浏览器 重定向 到其他 url，网络进程会从响应头的 Location 字段里面读取重定向的地址，然后再发起新的网络请求；
  - 如果状态码是 200，那么表示浏览器可以继续处理该请求。
- 解析响应数据类型：通过 Content-Type 头字段区分数据类型。
  - 如果 Content-Type 字段的值被浏览器判断为下载类型，那么该请求会被提交给浏览器的下载管理器，同时该 url 请求的导航流程就此结束
  - 如果是 HTML 类型，那么浏览器则会继续进行导航流程；

网络请求拿到 HTML 类型的数据后继续导航流程，由于 Chrome 的页面渲染是运行在渲染进程中的，所以接下来就需要准备 渲染进程 了。

准备渲染进程

默认情况下，Chrome 会为每个页面分配一个渲染进程
- 通常情况下，打开新的页面都会使用单独的渲染进程；
- 但是如果从 A 页面打开 B 页面，且 A 和 B 都属于同一站点（拥有相同的协议和根域名）的话，那么 B 页面会复用 A 页面的渲染进程；如果是其他情况，浏览器进程则会为 B 创建一个新的渲染进程。
渲染进程准备好之后，还不能立即进入文档解析状态，因为此时的文档数据还在 网络进程 中，并没有提交给渲染进程，所以下一步就进入了 提交文档 阶段。

提交文档

提交文档，就是指浏览器进程将网络进程接收到的 HTML 数据提交给渲染进程。

具体流程是：

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

这也解释了为什么在浏览器的地址栏里面输入了一个地址后，之前的页面没有立马消失，而是要加载一会儿才会更新页面。

进入渲染阶段

提交文档后，渲染进程 便开始页面解析和子资源加载了。

一旦页面生成完成，渲染进程 会发送一个消息给 浏览器进程，浏览器接收到消息后，会停止标签图标上的加载动画。

导航流程总结

以上就是 从用户发出 URL 请求到页面开始解析的过程 即 导航流程 了。

简而言之，就是下面这样的流程：

浏览器进程把用户输入的 url 组装成完整的 url 后交给网络进程；
网络进程通过 DNS 解析拿到 IP 地址与服务端建立 TCP 连接，然后发出 HTTP 请求，在收到服务端响应返回的数据后开始解析处理；
网络进程收到 HTML 类型的数据后，通过提交文档把数据提交给渲染进程，准备进入页面渲染阶段。