导航流程(浏览器工作原理学习-课4)

783 阅读5分钟

导航流程:从输入URL到页面展示,这中间发生了什么?

  1. 首先,浏览器进程接收到用户输入的 URL 请求,浏览器进程便将该 URL 转发给网络进程
  2. 然后,在网络进程中发起真正的 URL 请求
  3. 接着网络进程接收到了响应头数据,便解析响应头数据,并将数据转发给浏览器进程
  4. 浏览器进程接收到网络进程的响应头数据之后,发送“提交导航 (CommitNavigation)”消息到渲染进程
  5. 渲染进程接收到“提交导航”的消息之后,便开始准备接收 HTML 数据,接收数据的方式是直接和网络进程建立数据管道
  6. 最后渲染进程会向浏览器进程“确认提交”,这是告诉浏览器进程:“已经准备好接受和解析页面数据了”
  7. 浏览器进程接收到渲染进程“提交文档”的消息之后,便开始移除之前旧的文档,然后更新浏览器进程中的页面状态

导航

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

流程

  1. 用户输入

    1. 如果是搜索内容,地址栏会使用浏览器默认的搜索引擎,来合成新的带搜索关键字的 URL
    2. 如果判断输入内容符合 URL 规则,比如输入的是 time.geekbang.org,那么地址栏会根据规则,把这段内容加上协议,合成为完整的 URL
  2. URL 请求过程 DNS 解析 TLS 连接

    1. 网络进程会查找本地缓存是否缓存了该资源

    2. 接进入网络请求流程

    3. 是否有重定向

      在导航过程中,如果服务器响应行的状态码包含了 301、302 一类的跳转信息,浏览器会跳转到新的地址继续导航;如果响应行是 200,那么表示浏览器可以继续处理该请求

    4. 响应数据类型处理

      Content-Type 是 HTTP 头中一个非常重要的字段, 它告诉浏览器服务器返回的响应体数据是什么类型 根据不同类型进行处理

  3. 准备渲染进程

    1. 默认情况下,Chrome 会为每个页面分配一个渲染进程,也就是说,每打开一个新页面就会配套创建一个新的渲染进程

    2. 同一站点(same-site): 根域名 + 协议

      Chrome 的默认策略是,每个标签对应一个渲染进程。但如果从一个页面打开了另一个新页面,而新页面和当前页面属于同一站点的话,那么新页面会复用父页面的渲染进程。官方把这个默认策略叫 process-per-site-instance

  4. 提交文档

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

    1. 一旦文档被提交,渲染进程便开始页面解析和子资源加载

简要总结

  1. 用户输入url并回车
  2. 浏览器进程检查url,组装协议,构成完整的url
  3. 浏览器进程通过进程间通信(IPC)把url请求发送给网络进程
  4. 网络进程接收到url请求后检查本地缓存是否缓存了该请求资源,如果则将该资源返回给浏览器进程
  5. 如果没有,网络进程向web服务器发起http请求(网络请求),请求流程如下:
    1. 进行DNS解析,获取服务器ip地址,端口
    2. 利用ip地址和服务器建立tcp连接
    3. 构建请求头信息
    4. 发送请求头信息
    5. 服务器响应后,网络进程接收响应头和响应信息,并解析响应内容
  6. 网络进程解析响应流程;
    1. 检查状态码:
      1. 如果是301/302,则需要重定向,从Location自动中读取地址,重新进行第4步
      2. 如果是200,则继续处理请求。
    2. 200响应处理:
      1. 检查响应类型Content-Type,如果是字节流类型,则将该请求提交给下载管理器,该导航流程结束,不再进行 后续的渲染,
      2. 如果是html则通知浏览器进程准备渲染进程准备进行渲染。
  7. 准备渲染进程
    1. 浏览器进程
    2. 检查当前url是否和之前打开的渲染进程根域名是否相同,如果相同,则复用原来的进程,如果不同,则开启新的渲染进程
  8. 传输数据、更新状态
    1. 渲染进程准备好后,浏览器向渲染进程发起“提交文档”的消息,渲染进程接收到消息和网络进程建立传输数据的“管道”
    2. 渲染进程接收完数据后,向浏览器发送“确认提交”
    3. 浏览器进程接收到确认消息后更新浏览器界面状态:安全、地址栏url、前进后退的历史状态、更新web页面。