Http缓存详解

1.为什么缓存?

相对于cpu的计算和页面加载速度(mm级)来说,
网络请求更耗时,
所以通过http缓存的方式时间来减少网络请求,
从而能达到访问前端页面的性能优化。

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

2.强制缓存 Catch-Control

Cache-Control 在Response Headers中,控制强制缓存的逻辑.
(例如 Cache-Control:max-age=31536000(秒)=1年).
Expires 在Response Headers中,设置缓存过期,已被Catch-Control代替

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

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

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

服务端缓存策略-服务端判断资源是否用缓存.
服务端判断客户端资源标识是否跟服务端资源一样,一致则返回 304,负责返回 200和最新资源

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

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

http缓存流程

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

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

你可能感兴趣的:(Http缓存详解)