在地址栏中输入一段内容,接下来都发生了些什么

用户发出 URL 请求到页面开始解析的这个过程,就叫做导航。用以定位到新资源,并且将老的资源从页面卸载。
一、用户输入
地址栏首先判断输入的内容是搜索内容还是符合url规则的url,如果是搜索内容的话,浏览器会拼接上该搜索内容形成一个新的url,如果是符合url规则的url的话,浏览器会检查该url,比如输入的是www.baidu.com,浏览器会自动拼接上协议https://www.baidu.com.
在地址栏输入内容之后,并按回车,代表着当前页面将被新的页面给替换,但是浏览器会给当前页面一次执行beforeunload事件的机会,可以在该事件中执行数据的清理工作,还可以询问用户:是否确认离开该页面。因此用户可以通过 beforeunload 事件来取消导航,让浏览器不再执行任何后续工作。
当浏览器刚开始加载一个地址之后,标签页上的图标便进入了加载状态。但此时图中页面显示的依然是之前打开的页面内容,并没立即替换为极客时间的页面。因为需要等待提交文档阶段,页面内容才会被替换。

二、URL请求过程
用户输入url回车之后,浏览器进程会将url请求通过进程间通信转发给网络进程,让网络进程发起真正的url请求,接下来就是网络进程发挥作用了。
1、构建请求,浏览器端会构建请求行、请求头等信息,并把和该域名相关的 Cookie 等数据附加到请求头中。
2、网络进程首先会去查看缓存,看是否有该资源的缓存,如果有缓存的并且在有效期内的话就直接200返回缓存中的内容,如果没有缓存,则需要重新发起请求。(使用缓存,一方面可以减轻服务器的压力,另一方面为客户端能够快速响应提供了方便
3、准备IP和端口号,进行域名解析,但也会查看一次缓存,查看是否有域名对应的ip和端口号,如果有就直接取缓存,没有则会想域名解析服务器发起一次请求来获取IP和端口号,如果没有对应的端口号则会使用默认端口号,http使用80端口,https使用443端口。
4、如果是HTTPS请求需要建立TLS的连接
5、等待TCP队列,chrome浏览器规定一个域名下的TCP连接只能同时存在六个,如果超过六个,则其他请求就会进入到等待队列中进行等待
6、建立TCP连接,可以使用客户端和服务端在头部加入Connection:Keep-Alive 来建立TCP的长连接(通常情况下,请求返回完毕之后,TCP会断开连接,使用这个之后在请求发送完毕之后,TCP连接会一直处于打开状态,保持 TCP 连接可以省去下次请求时需要建立连接的时间,提升资源加载速度。
7、发送请求,
8、服务器处理请求
9、服务器响应请求
10、如果没有设置Connection:Keep-Alive的话,则会断开连接。
在这里插入图片描述

网络进程解析响应流程:
1、检查状态码,如果是301/302,则需要重定向,从Location自动中读取地址,重新发起请求,如果是200,则继续处理请求。
2、200响应处理:
(1)检查响应类型Content-Type,如果是字节流类型,则将该请求提交给下载管理器,该导航流程结束,不再进行
后续的渲染,如果是html则通知浏览器进程准备渲染进程准备进行渲染。
(2)检查响应头中是否包含有cache-control: max-age=2592000,来判断是否需要进行缓存,max-age则是设置该缓存的有效时间,在有效时间内发起请求,都会取缓存中的内容,然后200状态码返回,如果超过有效期内去请求该资源,网络进程会在请求头中带上 if-non-match的,服务器根据该字段的内容去查询该资源的内容是否进行了更改,
如果没有发生更改,则会返回304的状态码告诉浏览器的网络进程缓存内的该资源可以继续使用,并刷新有效时间,这就是协商缓存。
如果资源有更新,服务器就直接返回最新资源给浏览器。

为什么很多站点第二次打开速度会很快?
DNS 缓存页面资源缓存这两块数据是会被浏览器缓存的。

三、准备渲染进程
打开一个新页面采用的渲染进程策略就是:
1、通常情况下,打开新的页面都会使用单独的渲染进程;
2、如果从 A 页面打开 B 页面,且 A 和 B 都属于同一站点的话,那么 B 页面复用 A 页面的渲染进程;如果是其他情况,浏览器进程则会为 B 创建一个新的渲染进程。
渲染进程准备好之后,还不能立即进入文档解析状态,因为此时的文档数据还在网络进程中,并没有提交给渲染进程,所以下一步就进入了提交文档阶段。

四、提交文档
1、首先当浏览器进程接收到网络进程的响应头数据之后,便向渲染进程发起“提交文档”的消息;
2、渲染进程接收到“提交文档”的消息后,会和网络进程建立传输数据的“管道”;
3、等文档数据传输完成之后,渲染进程会返回“确认提交”的消息给浏览器进程;
4、浏览器进程在收到“确认提交”的消息后,会更新浏览器界面状态,包括了安全状态地址栏的 URL前进后退的历史状态并更新 Web 页面
这也就解释了为什么在浏览器的地址栏里面输入了一个地址后,之前的页面没有立马消失,而是要加载一会儿才会更新页面。

五、渲染阶段
一旦文档被提交,渲染进程便开始页面解析和子资源加载了,

  • 1
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值