HTTP 是一种允许浏览器向服务器获取资源的协议,它是整个WEB的核心和基础,处于应用层的协议,浏览器可以通过它获取到服务器的HTML CSS JS 各种各样的资源。
浏览器端发起HTTP请求流程 HTTP请求构成要素【请求行】【请求头】【请求体】
1、构造请求 【请求行】 【GET 请求方式】 【/a.html 请求路径】 【Http1.1 http的版本】
2、查找缓存 当一个请求出去的时候,在网络进程中会对请求进行拦截,先查找当前浏览器本地是否缓存了资源,如果没有缓存再发请求,如果缓存了直接返回缓存内容,减少服务器的压力。
3、准备IP和端口 在发送之前需要准备好IP端口和MAC地址等等,在HTTP工作之前需要TCP和服务器建立连接,然后通过HTTP协议进行传输,HTTP的数据传输是通过TCP来实现的。
在建立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
返回
继续更新客户端的新鲜度
COOKIE的传输
总结 一个请求的完备流程 请求行->缓存查找->获取链接的信息dns解析->tcp等待->tcp链接->发送http和服务器交互缓存等->重定向或者拿数据->断开链接
再就cookie的传输
强缓存和协商缓存等等。
排查FP之前的卡 1、需要不断重传 2、pingcurl 3、traceroute 看中间机器是否有问题 4、wireshake
浏览器三种缓存 memorycache diskcache serviceworker pwa