强缓存、协商缓存及相关头部信息

878 阅读3分钟

1.默认头:

字段作用
Accept浏览器可处理的内容类型
Accept-Charset浏览器可显示的字符集
Accept-Encoding浏览器可处理的编码类型
Accept-Language浏览器使用的语言
Connection浏览器与服务端的连接类型
CookieCookie
Host发送请求所在的域
Referer发送请求的URI
User-Agent浏览器用户代理字符串

2.常见其他通用

字段作用
Cache-Control缓存控制
Date报文创建时间
Upgrade协议升级

3.常用请求头部

字段作用
If-None-Match(缓存相关)与响应头Etag匹配,比较相同则说明未更新,返回状态码304
If-Modified-Since(缓存相关)与响应实体Last-Modified匹配,比较相同则说明未更新,返回状态码304
Range实体字节范围请求,可用于断点续传,更新于http 1.1

4.常见响应头部

字段作用
Etag(缓存相关)与请求头If-None-Match匹配,比较相同则说明未更新,返回状态码304

5.常见实体头部

字段作用
Last-Modified(缓存相关)与请求头If-Modified-Since匹配,比较相同则说明未更新,返回状态码304
Expire资源最后修改日期

5.强缓存与协商缓存

强缓存与协商缓存的机制:

  • 强缓存:给缓存设置一个过期时间,在未到过期时间之前,直接使用本地缓存,过期后重新请求资源
  • 协商缓存:每一次获取资源前,比较本地缓存与网络资源,若网络资源有更新,则重新请求资源,否则使用本地缓存

可通过设置响应头中的以下字段开启强缓存:

  • Cache-Control(常用,优先级最高):相对时间,不受本地时间影响
  • Expire:绝对时间,通过本地时间判断,会受到本地时间影响

设置强缓存时间:Cache-Control:max-age=300(缓存有效时间300秒)

Cache-Control常用字段:

字段作用
max-age设置缓存有效时间
public可被任何缓存区缓存(客户端服务端
private仅可被客户端缓存
no-cache强制进行协商缓存,判断缓存有效性
no-store不进行缓存

强缓存原理:

  1. 首次请求,浏览器获取到服务端响应,若响应头中Cache-Control设置了缓存时间,则将数据缓存到本地并配置有效时间
  2. 之后的请求,如果缓存没到期,则直接使用缓存,到期了则重新请求,重新设置有效时间

协商缓存原理:

先说明配对的头信息以及头信息所在的位置:

头信息(位置)配对头(位置)
If-None-Match(请求头)Etag(响应头)
If-Modified-Since(请求头)Last-Modified(响应体)

原理:

  1. 首次请求,浏览器获取到服务端响应并缓存
  2. If-None-Match/Etag法:后续请求,请求头配置If-None-Match响应头EtagIf-None-Match进行对比 → 相同则返回304,不同则更新缓存
  3. If-Modified-Since/Last-Modified:后续请求,请求头配置If-Modified-Since响应体Last-ModifiedIf-Modified-Since进行对比 → 相同则返回304,不同则更新缓存
  4. 共步骤2、3两种方法

贴一张图:

image.png

刷新对缓存的影响

  • url访问:强制缓存、协商缓存均有效
  • 手动刷新(F5、点击刷新按钮、右击菜单刷新):强制缓存失效、协商缓存有效
  • 强制刷新(ctrl + F5):强制缓存、协商缓存均失效