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

ObjectKaz Lv4

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

回顾

各个进程的职责

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

从用户输入 URL 到页面出现

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

开始导航

用户输入 URL

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

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

beforeunload

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

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

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

网络请求

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

检查缓存

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

DNS 解析

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

建立连接

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

构建请求行

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

响应

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

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

内容类型

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

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

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

准备渲染进程

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

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

提交文档

  1. 当浏览器进程接收到网络进程的响应头数据之后,便向渲染进程发起“提交文档”的消息。

  2. 渲染进程接收到“提交文档”的消息后,会和网络进程建立传输数据的“管道”。

  3. 等文档数据传输完成之后,渲染进程会返回“确认提交”的消息给浏览器进程。

  4. 浏览器进程在收到“确认提交”的消息后,会更新浏览器界面状态,包括安全状态、地址栏的 URL、前进后退的历史状态,同时更新 Web 页面。

渲染页面

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

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

活动图

  • 标题: 【浏览器原理-3】浏览器的导航流程
  • 作者: ObjectKaz
  • 创建于: 2021-12-10 15:49:09
  • 更新于: 2021-12-27 13:43:40
  • 链接: https://www.objectkaz.cn/57b261ab4360.html
  • 版权声明: 本文章采用 CC BY-NC-SA 4.0 进行许可。