【浏览器原理-3】浏览器的导航流程

课程链接：https://time.geekbang.org/column/intro/100033601?tab=catalog

回顾

各个进程的职责

浏览器进程：用户交互、子进程管理、文件储存等
网络进程：网络下载
渲染进程：把下载的 HTML、JavaScript、CSS、图片等资源解析为可以显示和交互的页面

从用户输入 URL 到页面出现

从用户输入 URL 到页面出现主要分为两个流程：导航流程和渲染流程
导航流程：从输入 URL 到页面开始解析
渲染流程：页面解析的流程

开始导航

用户输入 URL

分为两种情况，输入搜索内容或者 URL。

如果是搜索内容，地址栏会使用浏览器设置的搜索引擎，合成带搜索关键字的 URL。
如果输入内容符合 URL 规则，那么地址栏会加上协议，合成完整的 URL。

beforeunload

当用户按下回车时，浏览器的 tab 开始转圈，当前页面将要会被替换成新页面。

此时当前的页面可以通过 beforeunload 事件来做数据清理、确认退出等事情。
如果没有 beforeunload 事件或者用户确认继续，那么继续导航流程，否则取消。

这时候页面不会发生变化，直到"提交文档"。

网络请求

此时浏览器进程把 URL 发送给网络进程。

检查缓存

网络进程查找缓存中是否有该资源，如果有，且未过期，则直接返回该资源并进入下一阶段，否则继续请求流程。

DNS 解析

如果请求的主机是一个域名，则先请求 DNS 服务器获取域名对应的 IP 地址。

建立连接

客户端和服务器建立 TCP 连接，如果是 HTTPS 协议还需要建立 SSL/TLS 连接。

构建请求行

浏览器会构建请求行，同时会把 Cookie 等信息加入请求头，然后发送给服务器。

响应

服务器收到信息后会响应数据给浏览器。

301/302 状态码：网络进程会从响应头的 Location 字段里面读取重定向的地址，跳转到新的地址继续导航。
304 状态码：告诉浏览器继续使用本地缓存的数据。
200 状态码：继续解析

内容类型

浏览器根据响应头的 Content-Type 来确定请求的数据类型。例如：

text/html：告诉浏览器这是一个 html，会丢给渲染进程进行解析。
application/octet-stream：告诉浏览器这是一个字节流，浏览器会按照下载类型进行处理。

如果是下载类型，则会将请求提交给下载管理器，导航流程结束，否则继续导航。

准备渲染进程

默认情况下，Chrome 会为每个页面分配一个渲染进程。

如果从页面 A 打开页面 B，且页面 A 和页面 B 是同一个站点(相同的协议和根域名)，那么 B 会直接复用 A 的渲染进程。这种策略称为 process-per-site-instance。

提交文档

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

渲染页面

一旦文档被提交，渲染进程便开始页面解析和子资源加载了。页面生成完成后，渲染进程给浏览器进程发送一个消息，页面的加载动画停止。

渲染流程的具体细节将在后文提到。