4. 完整的导航流程

上一篇文章中,我梳理了完整的HTTP请求流程,在这一篇文章中,我将结合浏览器进程进一步总结下“从输入URL到页面展示完整的流程“。

image-20200824125311734.png

从图中可以看出,整个过程需要各个进程之间的配合,整个过程可以大致描述如下:

  1. 首先,浏览器进程接收到用户输入的URL请求,浏览器进程便将该URL转发给网络进程。

  2. 然后,在网络进程中发起真正的URL请求。

  3. 接着,网络进程接受到了服务器返回的响应头数据,开始解析响应头数据,并将响应体数据转发给浏览器进程。

  4. 浏览器进程接收到网络进程的响应头数据后,发送提交导航(commitNavifation)消息到渲染进程。

  5. 渲染进程收到提交导航的消息后,便开始和网络进程建立数据管道,开始接收HTML数据

  6. 最后渲染进程会向浏览器进程提交确认提交,这是告诉浏览器进程:“已经准备好接收和解析页面数据了”

  7. 浏览器进程接收到渲染进程提交文档的消息之后,便开始移除之前旧的文档,然后更新浏览器进程中的页面状态

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

下面,我们来详细分析这些阶段。

1. 用户输入

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

  1. 如果是搜索内容,地址栏会使用浏览器默认的搜索引擎,来合成新的带有关键字的URL

  2. 如果判断输入内容符合URL规则,比如输入的是baidu.com,那么地址栏会根据规则,把这段内容加上协议,合成完整的URL,如https://www.baidu.com

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

当前页面没有监听beforeUnload事件或者同意了几下后续流程,那么浏览器便进入下图的状态

chrome_HGHkt7r70q.png

从图中可以看出,当浏览器刚开始加载一个地址之后,标签页上的图标便进入了记载状态。当此时图中显示的页面依然是之前打开的页面内容,并没有立即替换成github的页面,因为需要等待渲染进程提交文档阶段,页面内容才会被替换

2. URL请求过程

接下来,便今日了页面请求资源过程。这是,浏览器进程会通过进程间通信(IPC)把URL请求发送至网络进程,网络进程接收到URL请求后,会在这里发起真正的URL请求流程。具体过程如下:

      1. 首先,网络进程会查找本地缓存是否缓存了该资源,如果有缓存资源,那么直接返回给浏览器进程;如果在缓存中没有查找到资源,那么直接进入网络请求流程,请求的第一步是要进行DNS解析,以获取域名的服务器IP地址,如果请求协议是HTTPS,那么还需要建立TLS连接。

 2. 接下来就是利用IP地址与服务器建立TCP连接,连接建立之后,浏览器会构建请求行、请求头等信息,并把和该域相关的Cookie等数据附加到请求头中,然后向服务器发送该请求信息。

 3. 服务器接收到请求信息后,会根据请求信息生成响应数据(包括响应行,响应头和响应体等信息),并发给网络进程,等网络进程接收了响应行和响应头之后,就开始解析响应头的内容了,(为了方便讲述,下面我将服务器返回的响应头和响应行统称为响应头。)


1. 重定向

在接收到服务器返回的响应头后,网络进程开始解析响应头,如果发现返回的状态码是301或302,说明服务需要浏览器重定向到其他URL。这是网络进程会从响应头的Location字段里面读取重定向的地址,然后再发起新的HTTP或者HTTPS请求,一切又从头开始了

image-20200824134521670.png

从图中可以看出,服务器会通过重定向的方式把所有的HTTP请求转换成HTTPS请求,也就是说你使用HTTP向服务器发送请求时,服务器会返回一个包含有302或者302状态码响应头,并把响应头的Location字段中填上HTTPS的地址,这就是告诉了浏览器要重新导航到新的地址上。

网络进程重新请求了该地址之后,服务器返回的信息如下

image-20200824135019109.png

从图中可以看出,服务器返回的响应头的状态码是 200,这是告诉浏览器一切正常,可以继续往下处理该请求了。

2. 响应数据类型处理

在处理了重定向问题之后,我们继续导航流程的分析,URL请求的数据类型,有时候是一个下载类型,有时候就正常的HTML页面,那么浏览器是如何区分他们的呢?

答案是Content-Type。Content-type是HTTP头中一个非常重要的字段,它告诉浏览器服务器返回的响应体数据是什么类型,然后浏览器会根据Content-type的值来决定如何显示响应体的内容。

这里我们以请求一个页面为例,返回的信息如下图:
image-20200824135520385.png

从图中可以看到,响应头中的 Content-type 字段的值是 text/html,这就是告诉浏览器,服务器返回的数据是 HTML 格式。

然后我们再以请求一个安装包为例,返回的信息如下:
image-20200824135637987.png

从返回的响应头信息来看,其 Content-Type 的值是 application/octet-stream,显示数据是字节流类型的,通常情况下,浏览器会按照下载类型来处理该请求。

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

3. 准备渲染进程

默认情况下,chrome会为每个页面分配一个渲染进程,也就是说,每打开一个新页面就会创建一个新的渲染进程,但是,也有些例外,如果从一个页面打开了另一个新页面,而新页面和当前页面属于同一站点的话,那么新页面会复用父页面的渲染进程。官方把这个策略叫做同一站点策略(process-per-site-instance)

同一站点是指根域名协议一致的站点,都属于同一站点

比如下面这三个

https://baike.baidu.com

https://www.baidu.com

https://www.baidu.com:8080

他们都属于同一站点,因为他们的协议都是HTTPS,而且根域名也都是baidu.com

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

  1. 通常情况下,打开新的页面都会使用单独的渲染进程

  2. 如果从A页面打开B页面,且A和B都属于同一站点的话,那么B页面就会复用A页面的渲染进程,如果是其他情况,浏览器进程则会为B创建一个新的渲染进程

    比如从baidu.com中打开tieba.baidu.com,他们 会复用同一个渲染进程

    chrome_QOQA7SPCYE.png

    而如果直接输入tieba.baidu.com而不是从baidu.com页面点击进入的话,浏览器会为tieba的百度重新创建一个新的渲染进程

    chrome_VUftS0HA1p.png

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

4. 提交文档

所谓提交文档,就是指浏览器进程将网络进程接收到的HTML数据提交给渲染进程,具体流程如下:

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

  2. 渲染进程收到提交文档的消息后,会和我聊进程建立传输数据的管道

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

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

其中,当浏览器进程确认提交之后,更新内容如下图“

image-20200824142451807.png

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

到这里,一个完整的导航流程就“走”完了,这之后就要进入渲染阶段了。

5. 渲染阶段

一旦浏览器进程向渲染进程发送提交文档消息后,渲染进程便开始页面解析和子资源加载了,一旦页面生成完成,渲染进程会发送一个确认提交消息给浏览器进行,浏览器接收到消息后,就会停止标签上的加载动画,并更新web页面。

至此,一个完整的页面就生成了。

总结

  1. 服务器可以根据响应头来控制浏览器的行为,如跳转、网络数据类型判断。

  2. Chrome 默认采用每个标签对应一个渲染进程,但是如果两个页面属于同一站点,那这两个标签会使用同一个渲染进程。

  3. 浏览器的导航过程涵盖了从用户发起请求到提交文档给渲染进程的中间所有阶段。

导航流程很重要,它是网络加载流程和渲染流程之间的一座桥梁,如果你理解了导航流程,那么你就能完整串起来整个页面显示流程,这对于你理解浏览器的工作原理起到了点睛的作用。


评论 抢沙发

表情
首页上一页12下一页尾页