03为什么很多页面打开第二次会非常的快?

143 阅读4分钟

HTTP 是一种允许浏览器向服务器获取资源的协议,它是整个WEB的核心和基础,处于应用层的协议,浏览器可以通过它获取到服务器的HTML CSS JS 各种各样的资源。

浏览器端发起HTTP请求流程 HTTP请求构成要素【请求行】【请求头】【请求体】

1、构造请求 【请求行】 【GET 请求方式】 【/a.html 请求路径】 【Http1.1 http的版本】

2、查找缓存 当一个请求出去的时候,在网络进程中会对请求进行拦截,先查找当前浏览器本地是否缓存了资源,如果没有缓存再发请求,如果缓存了直接返回缓存内容,减少服务器的压力。

3、准备IP和端口 在发送之前需要准备好IP端口和MAC地址等等,在HTTP工作之前需要TCP和服务器建立连接,然后通过HTTP协议进行传输,HTTP的数据传输是通过TCP来实现的。

截屏2023-05-08 下午4.42.55.png

在建立TCP连接的时候如何获取到 IP和端口、MAC? 首先分析我们有什么内容? 一个域名 比如你访问的www.baidu.com 域名有一个域名解析DNS IP和域名是一一对应,如果这个域名被解析过会在浏览器中有缓存,当然系统也会有缓存的,缓存的查找顺序 【浏览器】->【本地DNS缓存】->【域名代理商....】-> 【顶级域名】 域名解析缓存时间 xccbk.cn/domain/3074…

至于端口好这个 http默认是80 https 443

最后一个是MAC地址这个是如何获取的?

是通过ARP协议获取的感兴趣的可以看看具体的ARP 地址解析协议。 比较常用的 ARP 、 RARP

这样 端口【传输层】IP【网络】MAC【数据链路层】 的内容就齐全了

4、TCP的排队等待 下面就可以进行TCP 的交互了? 答案是否定的 因为 Chrome有个机制,同一个域名同时最多只能建立6个TCP连接,如果多余6个连接其余的需要 TCP的排队等待

5、等待后可以进行连接了。 TCP的链接请看上一篇文章吧。

6、开始发送HTTP的请求,可以理解为在一个建立好的管道里面通过协议进行数据的传输 数据有【请求行】【请求头】【请求体】 【请求行】 请求的基础信息 【请求头】和服务器写上的内容 比如支持什么压缩 支持什么语言 协商缓存和强缓存、cookie的一些信息 【请求体】 比如POST 发送的数据 等等

服务器的响应 响应行(响应协议、响应状态码 )、响应头(客户端支持的内容最后服务端选定的告诉客户端用什么、在比如响应的文件类型是啥等等吧)、响应体(响应请求对应的内容) curl -i www.baidu.com

7、在明确了短链接后会断开链接。4次挥手

8、如果在响应头返回的时候是 301 或者 302 重定向了,网络进程就会通知浏览器主进程,就会重新重定向页面。要重定向的地址是Location的字段的

现在在来回答 为什么很多页面打开第二次会非常的快? 首先 1、DNS的缓存 2、ARP的缓存 3、强缓存和协商缓存

强缓存? 就是缓存在本地的 请求A->(浏览器缓存是否存在?)->不存在继续网络请求->服务器响应数据 header设置 Cache-Control:Max-age=2000 ->告诉浏览器这个资源的缓存是2000秒

1000秒后继续请求 请求A->(浏览器是否有这个缓存?)->找到了hit命中了->不再继续请求服务端了直接返回缓存的资源。

3000秒后继续请求

请求A -> 如果有协商缓存走到了协商缓存

协商缓存? 在服务端的缓存 如果本地缓存失效了,就会和服务器进行协商缓存(如果有) 客户端带着 etag/If-Modified-Since

服务端返回 If-None-Match/Last-Modified 如果服务端没有任何修改直接读取服务端的缓存进行返回。

如果缓存了返回的是304 返回 继续更新客户端的新鲜度 image.png

COOKIE的传输

截屏2023-05-08 下午5.32.36.png

总结 一个请求的完备流程 请求行->缓存查找->获取链接的信息dns解析->tcp等待->tcp链接->发送http和服务器交互缓存等->重定向或者拿数据->断开链接

再就cookie的传输

强缓存和协商缓存等等。

排查FP之前的卡 1、需要不断重传 2、pingcurl 3、traceroute 看中间机器是否有问题 4、wireshake

浏览器三种缓存 memorycache diskcache serviceworker pwa