从输入URL到页面展示发生了什么(上)-导航阶段|周末学习

353 阅读9分钟

这是我参与更文挑战的第5天,活动详情查看: 更文挑战

本文已参与 周末学习计划,点击查看详情

从浏览器输入URL到页面展示到底经历了什么?本文通过两个阶段来解释,第一个阶段是导航阶段,也就是在页面真正开始渲染之前浏览器所做的工作,第二个阶段是渲染阶段,也就是把接受到的Http信息通过浏览器内部的处理展现在页面上。

img

浏览器进程、渲染进程和网络进程的主要职责

  • 浏览器进程主要负责用户交互、子进程管理和文件储存等功能。
  • 网络进程是面向渲染进程和浏览器进程等提供网络下载功能。
  • 渲染进程的主要职责是把从网络下载的 HTML、JavaScript、CSS、图片等资源解析为可以显示和交互的页面。因为渲染进程所有的内容都是通过网络获取的,会存在一些恶意代码利用浏览器漏洞对系统进行攻击,所以运行在渲染进程里面的代码是不被信任的。这也是为什么 Chrome 会让渲染进程运行在安全沙箱里,就是为了保证系统的安全。

流程

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

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

拆解解析

1.用户输入

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

  • 如果是搜索内容,地址栏会使用浏览器默认的搜索引擎,来合成新的带搜索关键字的 URL。33
  • 如果判断输入的内容符合URL规则,比如输入的是anblog.top,地址栏会根据规则,把这段内容加上协议,合成完整的URL。anblog.top/

2.URL请求过程

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

  1. 首先,网络进程会查找本地缓存是否缓存了该资源。 如果有缓存资源,那么直接返回资源给浏览器进程;如果在缓存中没有查找到资源,那么直接进入网络请求流程。发起网络请求前的第一步是要进行 DNS 解析(1.先查浏览器的缓存;2.查本机的hosts文件;3.域名服务器解析;4.若域名服务器也没有,递归(让别人找)加迭代解析(别人告诉你或者给你指路)),以获取请求域名的服务器 IP 地址。如果请求协议是 HTTPS,那么还需要建立 TLS 连接。

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

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

    几个相关概念
    • 重定向

      在接收到服务器返回的响应头后,网络进程开始解析响应头,如果发现返回的状态码是 301 或者 302(在服务器中配置的),那么说明服务器需要浏览器重定向到其他 URL。这时网络进程会从响应头的 Location 字段里面读取重定向的地址,然后再发起新的 HTTP 或者 HTTPS 请求,一切又重头开始了。就像下面的nginx.conf的内容含义是如果请求blog.annanblog.top,就重定向到blog.annanblog.top image-20210408184759440

      如何查看服务器返回的响应头信息

      在终端cmd输入不加https的地址

      curl -I blog.annanblog.top
      

      image-20210408185253320

      直接输入https地址

      curl -I https://blog.annanblog.top
      

      image-20210408185412632

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

    • 响应数据类型处理

      在处理了跳转信息之后,我们继续导航流程的分析。URL 请求的数据类型,有时候是一个下载类型,有时候是正常的 HTML 页面,那么浏览器是如何区分它们呢?

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

      curl -I https://blog.annanblog.top
      

      image-20210408185840996

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

      如果是下载的请求,Content-Type的值会变

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

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

    3.准备渲染进程

    默认情况下,Chrome 会为每个页面分配一个渲染进程,也就是说,每打开一个新页面就会配套创建一个新的渲染进程。但是,也有一些例外,在某些情况下,浏览器会让多个页面直接运行在同一个渲染进程中。

    导航栏可以打开chrome的任务管理器

    image-20210408190541271

    同站点的,到新页面还会共用一个线程,但是有一点需要注意,这个打开单击直接跳转的,如果是右键浏览器在新标签页打开则还是新建一个渲染线程。

    “同一站点”定义为根域名(例如,annanblog.top)加上协议(例如,https:// 或者 http://),还包含了该根域名下的所有子域名和不同的端口,比如下面这三个:

    https://blog.annanblog.top
    https://www.annanblog.top
    https://www.annanblog.top:8080
    

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

    案例: 比如我现在在annanblog.top页面,然后从这个页面打开wordpress登录界面

    https://www.annanblog.top/wp-login.php
    

    可以看到是同一站点的,打开chrome的任务管理器(在chrome头部右键打开)查看 image-20210408215638568

    可以看到是共用一个进程的,同时用旧站打开新站,新站是子域名blog.annanblog.top

    https://blog.annanblog.top/
    

    可以看到依然使用同一个进程,由于annanblog.top和blog.annanblog.top的标签页拥有相同的协议和根域名,所以它们属于同一站点

    image-20210408215939546

    但是当打开站尾的备案的时候(beian.miit.gov.cn/#/Integrate…) image-20210409081231887

    可以看到新开了一个进程,因为不是同一站点。

总结:

打开一个页面chrome默认所采取的渲染进程策略:

  • 通常情况下,打开新的页面都会使用单独的渲染进程;
  • 如果从A页面打开B页面,且A和B同属于一个站点的话,B页面复用A页面的渲染进程;若不是,浏览器进程会为B页面创建一个新的渲染进程。

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

4.提交文档

提交文档,就是把网络进程中的HTML数据,提交给渲染进程,流程:

  1. 首先当浏览器接收到网络进程的响应头数据之后,就向渲染进程发起“提交文档”的消息;浏览器进程:好了,看来网络进程OK了,你两可以交接了!
  2. 当渲染进程接受到“提交文档”的消息后,会和网络进程建立传输数据的“管道”(IPC); 渲染进程:网络进程!来!交给我!
  3. 当文档数据传输完成之后,渲染进程会返回“确认提交”的消息给浏览器进程;渲染进程:好!我收到数据了!和你说一声,浏览器进程!
  4. 浏览器进程在收到“确认提交”的消息后,会更新浏览器界面状态,包括安全状态、地址栏的URL、前进后退的历史状态、并更新Web界面。浏览器进程:我把我管的这部分浏览器上的用户交互的安排好了!

当浏览器进程确认提交之后:更新内容如下图:

  • 更新前进后退状态
  • 更新安全状态 小锁子
  • 更新URL地址栏
  • 更新web页面

image-20210605224831862

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

明天更渲染阶段=-=