JS之http0.9~3.0对比分析 (4)

16

图片描述

序列文章

JS面试之函数(1)
JS面试之对象(2)
JS面试之数组的几个不low操作(3)

前言

一篇搞定面试的http协议和缓存相关;
文字概念很多,大家可以从http协议版本为主线,分析了版本的区别和缓存属性分类及怎么设置

1.http请求过程

验证---请求头---请求主体---响应头---响应主体---断开连接

2.http0.9

1.只允许客户端发送GET这一种请求;
2.且不支持请求头,协议只支持纯文本;
3.无状态性,每个访问独立处理,完成断开;
4.无状态码

3.http1.0

1.有身份认证,三次握手;
2.请求与响应支持头域:
请求头内容:

属性名 含义
Accept 可接受的MIME类型
Accept-Encoding 数据可解码的格式
Accept-Language 可接受语言
Connection 值keep-alive是长连接
Host 主机和端口
Pragma 是否缓存,指定no-cache返回刷新
Referer 页面路由
If-Modified-Since 值为时间

响应头内容:

属性名 含义
Connection 值keep-alive是长连接
Content-Type 返回文档类型,常见的值有text/plain,text/html,text/json
Date 消息发送的时间
Server 服务器名字
Last-Modified 值为时间,s返回的最后修改时间
Expires 缓存过期时间,b和s时间做对比

注意:
①.expires是响应头内容,返回一个固定的时间,缺陷是时间到了服务器要重新设置
②.请求头中如果有If-Modified-Since,服务器会将时间与last-modified对比,相同返回304

2.响应对象以一个响应状态行开始
3.响应对象不只限于超文本
4.支持GET、HEAD、POST方法
5.有状态码
6.支持长连接(但默认还是使用短连接),缓存机制,以及

3.http1.1

1.请求头增加Cache-Control

属性名 含义
Cache-Control 1.1引入的方法,指定请求和响应遵循的缓存机制,值有:public(b和s都缓存),private(b缓存),no-cache(不缓存),no-store(不缓存),max-age(缓存时间,s为单位),min-fresh(最小更新时间),max-age=3600
If-None-Match 上次请求响应头返回的etag值

2.响应头增加Cache-Control
所有的缓存机制是否可以缓存及哪种类型
etag返回的哈希值,第二次请求头携带去和服务器值对比
3.注意:
①.Cache-Control的max-age返回是缓存的相对时间;
②.Cache-Control优先级比expires高;
③.缺点:不能第一时间拿到最新修改文件

4.http2.0

1.采用二进制格式传输;
2.多路复用,其实就是将请求数据分成帧,乱序发送到TCP中,TCP只能有一个steam,所以还是会阻塞
3.报头压缩;
4.服务器推送,主动向B端发送静态资源,避免往返延迟

5.http3.0

1.是基于QUIC协议,基于UDP
2.特点:
①.自定义连接机制:TCP以IP/端口标识,变化重新连接握手,UDP是一64位ID标识,是无连接
②.自定义重传机制:TCP使用序号和应答传输,QUIC是使用递增序号传输
③.无阻塞的多路复用:同一条QUIC可以创建多个steam

6.https

①.https是在http协议的基础上加了个SSL
②.主要包括:握手(凭证交换和验证)和记录协议(数据进行加密);
详情请戳:常见https,SSH协议和MD5加密方式分析

7.缓存

1.按协议分:协议层缓存和非http协议缓存
①.协议层缓存:利用http协议头属性值设置
②.非协议层缓存:利用meta标签的http-equiv属性值Expires,set-cookie

2.按缓存分:强缓存和协商缓存
①.强缓存:利用cache-control和expires设置,直接返回一个过期时间,所以在缓存期间不请求,If-modify-since
②.协商缓存:响应头返回etag或last-modified的哈希值,第二次请求头If-none-match或IF-modify-since携带上次哈希值,一致则返回304

3.协商缓存对比
①.etag优先级高于last-modified,,
②.etag精度高,last-modified精度是s,1s内etag修改多少次都会被记录
③.last-modified性能好,etag要得到hash值

4.浏览器读取缓存流程

图片描述

①.会先判断强缓存
②.再判断协商缓存etag(last-modified)是否存在
③.存在利用属性If-None-match(If-Modified-since)携带值
④请求服务器,服务器对比etag(last-modified),生效返回304

5.F5刷新会忽略强缓存不会忽略协商缓存,ctrl+f5都失效

8.状态码

序列 详情
1XX(通知)
2XX(成功) 200(成功)、201(服务器创建)、202(服务器接收未处理)、203(非授权信息)、204(未返回内容)、205(重置内容)、206(部分内容)
3XX(重定向) 301(永久移动)、302(临时移动)、303(查看其他位置)、304(未修改)、305(使用代理)、307(临时重定向)
4XX(客户端错误) 400(错误请求)、401(未授权)、403(禁止)、404(未找到)、405(方法禁用)、406(不接受)、407(需要代理授权)
5XX(服务器错误) 500(服务器异常)、501(尚未实施)、502(错误网关)、503(服务不可用)、504(网关超时)、505(HTTP 版本不受支持)

9.总结

协议

版本 内容
http0.9 只允许客户端发送GET这一种请求;且不支持请求头,协议只支持纯文本;无状态性,每个访问独立处理,完成断开;无状态码
http1.0 解决0.9的缺点,增加If-modify-since(last-modify)和expires缓存属性
http1. 增加cache-control和If-none-match(etag)缓存属性
http2.0 采用二进制格式传输;多路复用;报头压缩;服务器推送
http3.0 采用QUIC协议,自定义连接机制;自定义重传机制;无阻塞的多路复用

缓存

类型 特性
强缓存 通过If-modify-since(last-modify)、expires和cache-control设置,属性值是时间,所以在时间内不用请求
协商缓存 通过If-none-match(etag)设置,etag属性是哈希值,所以要请求和服务器值对比

如果觉得我的文章对你有用,请随意赞赏

你可能感兴趣的

载入中...