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	失效	失效