0
点赞
收藏
分享

微信扫一扫

Http缓存详解

Mezereon 2021-09-30 阅读 100
web 前端

1.为什么缓存?

http缓存策略分为强制缓存协商缓存

2.强制缓存 Catch-Control

- Cache-control的值
  • max-age 设置缓存的最大过期时间 **
  • no-catch 有本地缓存,不用强制缓存,向服务端请求 **
  • no-store 不让服务端做缓存,完全不缓存
  • private 发起请求的浏览器才能使用返回数据的缓存
  • public 这个HTTP请求它返回的内容所经过的任何路径中,包括中间的一些HTTP 代理服务器以及发出请求的客户端浏览器,都可以进行对返回内容的缓存操作
- http强制缓存过程

浏览器初次请求时,服务端返回资源和Catch-Control,
再次请求时,若Cache-control中响应头信息中设置了max-age=***[秒],则访问本地缓存。

3.协商缓存(对比缓存)

在Response Headers中,资源标识分为两种:
Last-Modified 资源最后被修改的时间
Etag 资源的唯一标识,Etag值根据资源内容改变而改变

- Last-Modified为资源标识协商缓存的过程

  • 第一次请求,服务器端的返回状态200、资源,
  • 同时有 Last-Modified 的属性标记此文件在服务器端最后被修改的时间。
  • 第二次请求,根据HTTP协议的规定,浏览器会向服务器传送If-*Modified-Since报头,询问该时间之后文件是否有被修改过:
  • 如果服务器端的资源没有变化,则自动返回 HTTP 304(Not Changed.)状态码,内容为空,这样就节省了传输数据量。
  • 当服务器端代码发生改变或者重启服务器时,则重新发出资源,返回和第一次请求时类似。
- 以Etag为资源标识协商缓存的过程

  • 第一次请求,服务器返回状态码200、资源和一堆Header,
    包括Etag(例如"2e681a-6-5d044840")属性标识唯一资源
  • 第二次请求,客户端发送一个If-None-Match头,这个头的内容就是第一次请求时服务器返回的Etag:2e681a-6-5d044840
  • 服务器判断发送过来的Etag和计算出来的Etag匹配
  • If-None-Match为False资源没有变化,返回304,客户端继续使用本地缓存
优先使用Etage
  • Last-Modified只能精确到秒级
  • 如果资源被重复生成,而内容不变,则Etag更精确

4. http缓存流程图

5. 刷新操作方式,对缓存的影响

操作方式 场景 强制缓存 协商缓存
正常操作 地址输入url,跳转链接,前进后退 有效 有效
手动刷新 f5,点击刷新按钮,点击菜单刷新 失效 有效
强制刷新 shift+commond+R 失效 失效
举报

相关推荐

0 条评论