输入url到页面展示发生了什么

过程梳理图

web_progress

输入url到页面展示完整流程示意图

从图中可以看出,整个过程需要各个进程之间的配合:

  • 浏览器进程主要负责用户交互,子进程管理和文件存储等功能

  • 网络进程是面向渲染进程和浏览器进程等提供网络下载功能

  • 渲染进程的主要职责是把从网络下载的HTML、JavaScript、CSS、图片等资源解析为可以显示和交互的页面。

因为渲染进程的所有内容都是通过网络获取的,所以存在被而已攻击的可能,所以运行在渲染进程中的代码不被信任。这就是Chrome会让渲染进程运行在安全沙盒里面的原因。

过程描述

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

然后在网络进程中发起真正的url请求。

接着网络进程收了响应头数据,便解析响应头数据,并将数据转发给浏览器进程。

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

渲染进程收到“提交导航”的消息后,便开始准备接收HTML数据,接受数据的方式是直接和网络进程建立数据管道。

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

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

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

详细阶段分析

1.用户输入

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

是搜索内容会合成搜索的url。如果是符合url规则的比如 baidu.com会合成为完整的url 比如 https://www.baidu.com

当用户输入关键字回车的时候,这意味着当前页面要被新的页面替换了,但是在这个继续之前,浏览器给当前页面一次执行 beforeunload事件的机会。这个允许在页面推出之前做一些数据清理操作。

2.URL请求过程

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

首先,网络进程会查找本地缓存是否缓存了该资源。如果有缓存则直接返回资源给浏览器进程。如果没有那么直接进入网络请求。

第一步是进行DNS解析,以获取域名的服务器IP地址如果请求时HTTPS还需要建立TLS连接。

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

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

(1)重定向

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

让响应行是200,那么表示浏览器可以继续处理该请求

(2)响应数据类型处理

url请求的数据类型,有时候是一个下载类型,有时候是正常的html页面,那么浏览器如何区分他们呢?

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

如果Content—Typeapplication/octet-stream 数据是字节流类型,通常浏览器会按照下载类型来处理。

3.准备渲染进程

默认的情况下Chrome会为每个页面分配一个渲染进程,也就是是说,每开一个新页面就会分配创建一个新的渲染进程。也有一些例外,会共用一个。

何时会共用一个渲染进程呢?

同一站点(Same-site)

根域名、协议相同,还包含了该根域名下面的所有子域名和不同端口

比如

https://github.com

https://www.github.com

https://www.github.com:8080

他们都属于同一个站点。

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

4. 提交文档

所谓提交文档就是浏览器把网络接收到HTML数据提交给渲染进程,具体流程是这样:

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

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

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

浏览器再收到“确认提交”的消息后,会更新浏览器界面状态,包括安全状态、地址栏的URL、前进后退的历史状态并更新WEB页面。

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

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

5.渲染阶段

一旦文档被提交,渲染进程便开始解析和子资源加载了,这个过程可以单独介绍。-> 浏览器渲染流程

一旦页面生成完成,渲染进程就会发送一个消息给浏览器,浏览器接到消息后,会停止标签图标上的加载动画。

至此一个页面就生成了。

Mark24

Everything can Mix.