【Browser】导航流程 - 从输入URL到页面展示，这中间发生了什么？

[xinbaihui]

Reference

• JK-浏览器原理-04 导航流程

输入 URL 到页面展示流程图

Steps

1. 浏览器进程 解析 用户输入

• 如果是搜索内容，地址栏会用浏览器默认的搜索引擎合成新的包含关键字的URL
• 如果符合URL规则，地址栏会根据规则，给URL加上协议等合成完整的新的URL

此时浏览器进入加载状态，页面还是之前的页面，因为需要等待提交文档阶段页面内容才会被替换。

2. 网络进程 发起 URL 请求

浏览器进程 通过 IPC 把URL发送到网络进程，网络进程收到URL后发起请求。

• 2.1 查找缓存。网络进程查找本地是否缓存了该资源，以及是否可用，如果有且可用那就直接使用缓存资源；如果没有或者缓存资源不可用，那么直接进入网络请求流程。
• 2.2 网络请求
  • DNS解析：URL ---> IP
  • 根据IP建立TCP连接
  • 构建请求信息：请求行，请求头(域名，cookie等)
  • 发送请求
  • 服务器收到请求后生成响应数据(响应行，头，体)发送给网络进程
  • 网络进程收到响应头，响应行之后开始解析响应头
  • 重定向 从响应行解析状态码，如果是301 or 302， 说明服务器需要浏览器重新导航到响应头中Location指定的URL，回到第一个步骤循环； 如果是 304 Not Modified，说明资源未更新可以使用本地资源；
  • 响应数据类型处理：响应头中Content-type指定资源类型，浏览器根据Content-type只决定如何显示响应体内容。
    • text/html：浏览器进程继续导航
    • application/octet-stream: 字节流类型， 交给下载管理器，导航流程结束

3. 准备渲染进程

• 默认情况下，网页内打开别的网页要增加新的渲染进程，每个tab页面一个
• A 网页内打开 同站点的B网页， 二者公用渲染进程 （process-per-site-instance）
• 设置 rel=“noopener noreferrer” 不管是不是同站点都不公用渲染进程 - TODO

渲染进程准备好之后，还不能立即进入文档解析状态，因为此时的文档数据还在网络进程中，并没有提交给渲染进程

4. 提交文档

• 浏览器进程发出“提交文档”消息给渲染进程，渲染进程收到后和网络进程建立数据传输”通道“
• 等文档数据（响应体）由网络进程到渲染进程传输完之后，渲染进程发送 确认提交 消息给浏览器进程
• 浏览器进程收到 确认提交 消息后，更新浏览器界面状态， 包括 安全状态、地址栏URL、前进后退历史状态， 并更新 Web页面。

导航流程结束

5. 渲染阶段

渲染进程将HTML、CSS、JS解析为浏览器能够显示的页面，页面生成完之后，发送消息给浏览器进程，浏览器进程将loading状态结束。 Over！