导航流程:从输入URL到页面展示

导航流程:从输入URL到页面展示

Posted by limantang on August 20, 2019

导航流程:从输入URL到页面展示

从输入URL到页面展示的完整过程需要各个进程之间的配合

  • 首先, 用户从浏览器进程里输入请求信息
  • 然后, 网络进程发起URL请求
  • 服务器响应URL请求之后, 浏览器进程开始准备渲染进程
  • 渲染进程准备好之后, 需要先向渲染进程提交页面数据, 称之为提交文档阶段
  • 渲染进程接受完文档信息之后, 便开始解析页面和加载子资源, 完成页面渲染

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

从输入URL到页面展示

  1. 用户输入

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

    • 如果是搜索内容, 地址栏会使用默认的搜索引擎进行关键字搜索
    • 如果输入内容符合URL规则, 那么地址栏会根据规则, 把这段内容加上协议合并成完成URL

    当浏览器开始加载一个地址之后, 标签页的图标就进入了加载状态, 但是此时的页面内容依然是之前打开的页面内容, 并没有立即替换为新地址的内容, 这是因为需要等待提交文档阶段, 页面内容才会被替换

  2. URL请求过程

    现在就到了页面资源请求过程, 浏览器进程会通过进程间通信(IPC)把URL请求发送至网络进程, 网络进程收到URL请求后, 发起真正的URL请求流程

    • 网络进程查找本地缓存, 如果有缓存. 返回资源给浏览器进程, 如果没有缓存, 就进入了网络请求流程,
      • 首先进程DNS解析, 以获取请求域名的IP地址
      • 如果协议是HTTPS, 那么还需要建立TLS连接
    • 利用IP地址和服务器建立TCP连接, 建立连接之后, 浏览器构建请求行, 请求头信息, 并且把域名相关的Cookie等数据附加到请求头中, 然后向服务器发送构建的请求信息

    • 服务器收到信息后, 会更具请求信息生成响应数据, 并发送给网络进程, 网络进程收到响应头, 响应行之后, 就开始解析响应内容
    1. 重定向

      如果服务器返回的状态码是200, 这是告诉浏览器一切正常, 继续往下处理该请求

      如果服务器响应行状态码包含了301, 302等跳转信息, 那么浏览器会跳转到新的地址重新开始导航

    2. 响应数据类型处理

      在处理了跳转信息之后, 继续导航流程的分析, URL请求的数据类型浏览器是如何区分它们呢

      根据Content-Type, Content-Type是HTTP头中一个很重要的字段, 它告诉了浏览器返回的响应体数据是什么类型, 浏览器根据Content-Type的值来决定如何处理响应体内容

      不同的Content-Type后续处理流程截然不同, 如果Content-Type的值被浏览器判断为下载类型, 那么该请求会被提交给浏览器的下载管理器, 同时该URL请求的导航流程到此结束, 但是如果是HTML, 那么浏览器则会继续导航流程, 由于Chrome页面渲染是运行在渲染进程中的, 所以接下来准备渲染进程

    3. 准备渲染进程

      默认情况下Chrome会为每个页面分配一个渲染进程, 但是也有一些例外, 某些情况下多个页面直接运行在同一渲染进程中

      什么情况下多个页面会运行在同一个渲染进程中呢?

      首先要知道什么是同一站点

      根域名, 协议都相同的就是同一站点

      如果从一个页面打开了另一个新页面, 而新页面和当前页面属于同一站点, 那么新页面就会复用父页面的渲染进程, 官方把这个默认策略叫做process-per-site-instance

      总的来说, 打开一个新的页面采用的渲染进程策略是:

      • 通常情况下打开新的页面都会使用单独的渲染进程
      • 如果从A页面打开B页面, 且A和B页面属于同一站点, 那么B页面就会复用A页面的渲染进程

      渲染进程准备好之后, 还不能立即进入文档解析阶段, 因为此时文档数据还在网络进程中, 并没有提交给渲染进程,所以下一步就是进入文档提交阶段

    4. 提交文档

      这里的”文档”是指URL请求响应体的数据

      • 提交文档消息是由浏览器进程发出的, 渲染进程接收到提交文档消息后, 会和网络进程建立传输数据管道
      • 等文档数据传输完成之后, 渲染进程会返回确认提交的消息给浏览器进程
      • 浏览器进程接收到确认提交消息之后, 就会立即更新浏览器界面状态, 包括了安全状态, 地址栏URL, 前进后退历史状态, 并更新web页面

      这也就解释了为什么浏览器的地址栏输入一个地址后, 之前的页面没有立马消失, 而是要加载一会才会更新页面

      到这里一个完成导航流程走完了, 后面就是进入渲染阶段了

    5. 渲染阶段

      后面会继续详细说明渲染阶段