用户从输入URL到页面展示这中间究竟发生了什么?

前言

这是一个经典面试题了,无论是前端还是后端,这块是必须非常详细了解的一个点,大多数人以为只要掌握了这里面的一个大概流程应付面试就行了,其实掌握了这里面的东西对你以后的职业发展和逻辑思维也有很大提升,大厂在这块会问的非常详细

之前我也已经说过了底层网络连接的一些操作,现在来说说浏览器这块:用户在浏览器那端输入完url地址之后,浏览器发起请求是需要浏览器各个进程的配合的,我们先回顾以下我刚开始讲的浏览器进程的一些主要职责

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

回顾好了这些之后,我们再将大致流程写出来

• 首先用户从浏览器主进程的地址栏里输入url信息.主进程将url移交网络进程
• 网络进程接收到url后,查找缓存,未命中缓存就发起url请求
• 服务器响应url请求之后,网络进程收到响应行,响应头,响应体信息然后解析响应行丶头并且发给主进程
• 浏览器主进程通知渲染进程开始准备
• 渲染进程准备好之后,主进程要向渲染进程提交一些页面数据(响应头的一些数据,不包含响应体),告知渲染进程的一些基本情况(比如content-type文件类型之类的,总得让渲染进程知道自己的客户是谁吧),
• 渲染进程接收完文档的基本信息之后,告知主进程:我已经了解基本信息了,可以开始工作了.
• 主进程接收到渲染进程的消息后,发起提交文档消息,要求网络进程提交文档给渲染进程, 然后网络进程通过ipc就将响应体中的文件移交给渲染进程,移交完成报告主进程,文档提交完毕
• 渲染进程就开始解析页面和加载子资源,完成页面的渲染同时主进程更新他管理的web界面

这其中,用户发出url到页面开始解析这部分,我们称之为导航.接下来开始详细分析这些步骤,同时解答这个经典面试题

从输入URL到页面展示

首先从浏览器的地址栏开始讲起吧

1.用户输入

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

• 如果是搜索内容,那么浏览器会使用默认的搜索引擎,来合成新的带搜索关键字的url.
• 如果判断输入内容是url,比如输入的是baidi.com,那么地址栏会根据规则,把这段内容加上协议,合成为完整的url,比如你输入www.baidu.com,浏览器会自动补全为https://www.baidu.com

然后用户输入回车,浏览器就开始工作
这时候,大家可以联系日常生活使用浏览器想想,用户回车之后,页面立即被替换吗?
当然没有,很简单,比如我们访问一个比较慢的站点,输入之后,tab页面icon图标会变成一个旋转的圆圈,但是我们当前页面还没有立即被替换?那什么时候页面开始被替换呢?
答案是提交文档阶段结束后,因为这时候渲染进程已经知道了自己要开始渲染一个新的页面了,当然要把自己之前的工作给推干净啦

2.url请求过程

接下来就是页面资源请求过程.这时,浏览器进程通过ipc吧url请求发送到网络进程,网络进程接收到url之后,在这里发起真正的网络请求
具体流程

• 首先查找本地缓存,如果有缓存资源且未过期那就直接将这个资源返回给浏览器,不走网络请求,否则,直接进入网络请求流程.当然,请求的第一部分就是请求DNS解析域名以获取目标的ip地址.如果是https请求还会建立TLS连接(http和https以后讲)
• 接下来就是利用ip地址和服务器建立TCP连接了,连接建立之后,浏览器端会构建请求行,请求头等信息,并把改域名相关的Cookie等数据加入请求头中,向服务器发起构建的请求信息
• 服务器接收到请求信息后,会根据请求信息生成响应数据(包括响应行,响应头,响应体等信息)并发给网络进程.网络进程接收了响应行和响应头之后开始解析响应行&头内容(这部分并不需要接收到响应体,只要响应行和响应头收到就开始解析)
• 接收到服务器的响应信息之后,网络进程开始解析,如果发现返回的状态码是301或者302.那么说明服务器需要浏览器重定向到其他url.这时网络进程读取Location中的新地址后,重新发起新的http请求或者https请求 一切重新开始(其实就是个递归的过程)

也就是说在遇到重定向内容301,302一类的跳转信息,浏览器会跳转到新的地址继续导航,如果是200,表示服务器处理了该请求,流程继续往下走

• 处理了跳转信息后,网络进程继续分析响应头,url请求的数据有时候会是一个下载类型,有时候又是正常的html页面,那么浏览器如何区分他们呢?

答案我之前一直反复暗示过了 字段content-type
content-type是http头中的一个非常重要的字段,是他告诉浏览器服务器返回的是一个什么类型的响应体数据,然后浏览器才会根据content-type去决定如何显示响应体的内容
比如:如果content-type:text/html这就是告诉浏览器服务器返回的是一个html文本信息
如果content-type:application/octet-stream 表示数据是一个字节流类型的,通常情况下,浏览器会按照下载类型来处理该请求
注意: 如果服务器那么配置错了比如text/html配置成了application/octed-stream,那么该请求会被提交给浏览器的下载管理器,同时该url导航流程结束,但是如果是html,那么浏览器继续进行导航流程,由于chrome页面渲染是渲染进程干的,接下来就是准备渲染进程了

3.准备渲染进程

默认情况下,chrome为每个页面分配一个渲染进程,也就是说,每打开一个页面就多一个配套的渲染进程,我知道肯定有人会问:’啥时候多个页面分配一个渲染进程啊?'
这个问题啊,首先要了解什么同一站点(same-site).就是我们将同一站点定义为根域名(例如baidu.com)加上协议(http://或者htpps://),还包含了该跟域名下所有子域名和不同得端口
打个比方假设这几个网站存在

https://time.baidu.com
https://www.baidu.com
https://www.baidu.com:8080

他们都属于同一沾点,因为他们协议相同,根域名也都是baidu.com.

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

那若新页面和当前页面不属于同一站点那么就会分配一个新的渲染进程
总的来说

• 通常情况下,浏览器为每个tab页面分配一个单独的渲染进程
• 如果从A页面打开B页面,且A和B都属于同一站点的话,那么B页面复用A页面的渲染进程;如果是其他情况,那么就为B创建一个新的渲染进程

渲染进程准备好之后,还不能立即进入文档解析阶段,前面已经大致说过,此时主体的文档信息还在网络进程中,并没有提交给渲染进程,所以这中间还有一个提交文档阶段

4.提交文档

首先明确一点,这里的’文档’是指url请求的响应体数据

• 提交文档的消息由浏览器主进程发出,渲染进程和网络进程接收到提交文档的指示后,才通过ipc和网络进程建立信息传输的管道
• 等文档数据传输完成,渲染进程会返回确认提交的消息给浏览器进程.
• 浏览器进程收到确认提交的消息后,会更新浏览器界面状态,包括安全状态,地址栏的url,前后进退的历史状态,并更新web界面(这时候才开始更新界面)

这也就解释了为什么在浏览器地址栏输入url后,之前页面并没有立即消失,而是要等待加载一会才过更新页面

到这里 一个导航流程就走完了
之后就是我们前端开发者重点关注的渲染阶段了

5.渲染阶段

我到时候专门写一篇这里具体的流程,因为这里还涉及到了v8引擎的事件循环的一些操作
这里只做简单描述
一旦文档被提交过来了渲染进程就开始页面解析,子资源加载了,全部加载完毕后,浏览器的那个icon图标也就由加载的旋转小圆圈变成正式的icon了

好了 到这里如果你是认真看完并且不是在无效阅读而是自己认真去想了的,那么和面试官battle的时候也有更多的墨水可以从肚子里挤了

总结

流程

• 用户输入url回车
• 浏览器检查url,封装协议,构成完整的url
• 浏览器进程通过ipc把url请求发送给网络进程
• 网络进程收到url请求后检查本地缓存是否缓存了该请求资源,如果有就直接返回给浏览器,没有就发起网络请求
• 发起http或者https请求
• 进行DNS解析,获取ip地址和端口号(端口号是DNS解析的吗?这里我有个疑问,一直没搞清楚,上网查了一下说有的dns可以解析,有的不能…得去问问大佬)
• 利用ip地址和服务器建立tcp连接
• 构建请求头(包括了请求行)信息
• 发送请求头信息
• 服务器响应后,网络进程接收响应头和响应信息,解析一些内容
• 检查状态码,301/302会读取location字段中的新url地址重新发起网络请求,(301永久重定向会读取缓存,302临时重定向不会读取缓存)如果是200,那么流程继续
• 200响应处理:检查content-type,如果是字节流类型,则将该请求提交给下载管理器,结束导航流程,否则通知渲染进程准备进行渲染
• 浏览器检查新打开的页面和原来的页面是否是同一站点,是就复用原来的渲染进程,否则创建一个新的渲染进程,
• 渲染进程准备好,发起提交文档请求,然后网络进程将其里面的响应头信息传输给渲染进程,传输完毕后,向主进程报告传输完毕,同时自身开始解析HTML等文件
• 主进程收到渲染进程的提交结束后,更新自己的一些界面,地址栏信息,location信息等

要点

• 服务器通过响应头控制浏览器行为,如301/302控制跳转,content-type控制控制下载还是渲染等
• chrome默认是每个tab一个渲染进程,同一站点策略下才复用渲染进程
• 浏览器导航涵盖了用户发起请求到提交文档给渲染进程的中间所有阶段
• 导航流程很重要,他是网络加载和渲染流程的桥梁,这对于你理解浏览器的工作原理起到了很大作用

啊~~~~打字好累