导航流程 ​

什么是导航流程？

用户发出 URL 请求到页面开始解析的这个过程，就叫做导航

从输入URL到页面展示，这中间发生了什么？整个流程如下图：

处理用户输入 ​

当用户在地址栏中输入一个查询关键字时，地址栏会判断输入的关键字是搜索内容，还是请求的URL。

• 如果是搜索内容，地址栏会使用浏览器默认的搜索引擎，来合成新的带搜索关键字的 URL。
• 如果判断输入内容符合 URL 规则，比如输入的是 www.baidu.com，那么地址栏会根据规则，把这段内容加上协议，合成为完整的 URL，如 https://www.baidu.com。

当用户输入关键字并键入回车之后，这意味着当前页面即将要被替换成新的页面，不过在这个流程继续之前， 浏览器还给了当前页面一次执行 beforeunload 事件的机会，beforeunload 事件允许页面在退出之前执行一些数据清理操作， 还可以询问用户是否要离开当前页面，比如当前页面可能有未提交完成的表单等情况， 因此用户可以通过 beforeunload 事件来取消导航，让浏览器不再执行任何后续工作。

当页面处理完beforeunload事件后，会执行后续流程，此时标签页图标变成了加载状态，但是页面 还没有立即替换为新的页面。因为需要等待提交文档阶段，页面内容才会被替换。

URL请求的过程 ​

接下来，页面进入资源请求的过程。浏览器进程会通过进程间通信（ipc）把url请求发送到网络进程，由网络进程真正发起请求。

具体流程如下:

1. 网络进程会查找本地是否由缓存资源，如果有，直接返回给浏览器进程
2. 如果没有缓存资源，再发起真正的请求，首先会进行域名的DNS解析，获取服务器ip地址；
3. 如果请求是https协议，需要建立TLS链接
4. 利用ip地址和服务器建立TCP链接，
5. 连接建立之后，浏览器端会构建请求行、请求头等信息，并把和该域名相关的 Cookie 等数据附加到请求头中，然后向服务器发送构建的请求信息。
6. 服务器接收到请求信息后，会根据请求信息生成响应数据（包括响应行、响应头和响应体等信息）
7. 网络进程接收了响应行和响应头之后，就开始解析响应头的内容了；

重定向 ​

1. 网络进程解析响应头，如果发现返回的状态码是301或者302，说明服务器需要浏览器重定向到其他 URL。 这时网络进程会从响应头的 Location 字段里面读取重定向的地址，然后再发起新的请求
2. 如果响应头的状态码是 200，说明一切正常，可以仅需往下处理请求了

响应数据的处理 ​

浏览器需要区分当前返回的数据是什么类型，然后分别处理，如html页面会走渲染，如果是下载类型，执行下载文件； 根据响应头的Content-Type字段来决定如何显示响应体的内容；

• 如果Content-Type是text/html，说明当前是一个页面
• 如果Content-Type是application/octet-stream，说明数据是字节流信息，会下载该文件

准备渲染进程 ​

打开一个新页面采用的渲染进程策略就是：

• 打开新的页面都会使用单独的渲染进程；
• 如果从 A 页面打开 B 页面，且 A 和 B 都属于同一站点的话，那么 B 页面复用 A 页面的渲染进程；如果是其他情况，浏览器进程则会为 B 创建一个新的渲染进程。

提交文档 ​

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

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

当渲染进程确认提交之后，更新内容如下图所示：

1. 更新前进后退状态
2. 更新安全状态
3. 更新地址栏url
4. 更新web页面

渲染阶段 ​

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

渲染流程