作为面试题解析我们在这里就着重点到 强制缓存 和协商缓存。
浏览器缓存分为强缓存和协商缓存
- 强缓存命中缓存的情况下会直接从浏览器里面拿数据 不经过服务器。
- 协商缓存会先访问服务器看缓存是否过期，再决定是否从浏览器里面拿数据。
强制缓存
1.如果命中缓存，直接从缓存中拿数据，请求不会经过服务器，返回的http状态码为200(from disk cache)
2.下面给一张流程图来说明强缓存的请求过程
由此我们可以看出，强制缓存的最大特点就是在缓存命中的时候不会经过服务器。而是直接返回。
3.设置强缓存
控制强缓存的字段有：Http头Expires/Cache-Control设置强缓存
-
Cache-Control里面存在多个属性来控制缓存，设置强缓存即设置资源的有效期，属性为max-age.
image.png - Expires和max-age都是用于控制缓存的生命周期。不同的是Expires指定的是过期的具体时间，例如Sun, 21 Mar 2027 08:52:14 GMT，而max-age指定的是生命时长秒数315360000。
区别在于Expires是 HTTP/1.0 的中的标准，而max-age是属于Cache-Control的内容，是 HTTP/1.1 中的定义的。但为了想向前兼容，这两个属性仍然要同时存在。max-age是要优先于Expires的。
协商/对比缓存
1.定义
协商缓存与强制缓存的不同之处在于，协商缓存每次读取数据时都需要跟服务器通信，并且会增加缓存标识。
在第一次请求服务器时，服务器会返回资源，并且返回一个资源的缓存标识，一起存到浏览器的缓存数据库。
当第二次请求资源时，浏览器会首先将缓存标识发送给服务器，服务器拿到标识后判断标识是否匹配，如果不匹配，表示资源有更新，服务器会将新数据和新的缓存标识一起返回到浏览器。
如果缓存标识匹配，表示资源没有更新，并且返回 304 状态码，浏览器就读取本地缓存服务器中的数据。
协商缓存的最大特点是要经过服务器验证的，下面我们来讲解协商缓存的验证流程。
2.流程图
3.如何验证
第一次请求将response header的Last-Modified和Etag存起来，在第二次请求通过request header的If-Modified-Since和If-None-Match传到服务端进行验证，如果命中缓存，返回304，不带返回的数据，浏览器自动从缓存中获取数据资源，若未命中缓存返回200，带上数据资源。
Last-Modified:
服务器在响应请求时，告诉浏览器资源的最后修改时间。
Etag：
服务器响应请求时，告诉浏览器当前资源在服务器的唯一标识（生成规则由服务器决定）。
If-Modified-Since：
- 再次请求服务器时，通过此字段通知服务器上次请求时，服务器返回的资源最后修改时间。
- 服务器收到请求后发现有头If-Modified-Since 则与被请求资源的最后修改时间进行比对。
- 若资源的最后修改时间大于If-Modified-Since，说明资源又被改动过，则响应整片资源内容，返回状态码200；
- 若资源的最后修改时间小于或等于If-Modified-Since，说明资源无新修改，则响应HTTP 304，告知浏览器继续使用所保存的cache。
image.png
If-None-Match： - 再次请求服务器时，通过此字段通知服务器客户段缓存数据的唯一标识。
- 服务器收到请求后发现有头If-None-Match 则与被请求资源的唯一标识进行比对，
- 不同，说明资源又被改动过，则响应整片资源内容，返回状态码200；
- 相同，说明资源无新修改，则响应HTTP 304，告知浏览器继续使用所保存的cache。
再次请求服务器时，通过此字段通知服务器客户段缓存数据的唯一标识。
服务器收到请求后发现有头If-None-Match 则与被请求资源的唯一标识进行比对，
不同，说明资源又被改动过，则响应整片资源内容，返回状态码200；
相同，说明资源无新修改，则响应HTTP 304，告知浏览器继续使用所保存的cache。
4.设置协商缓存
在强缓存那一节说到使用Cache-Control的max-age来设置资源过期时间，那么当max-age=0的时候呢，自然浏览器第一时间发现资源过期，request header就会带着If-Modified-Since和If-None-Match去服务端验证。
所以设置response header为：
Cache-Control: max-age=0 就可以触发协商缓存了must-revalidate的意义为必须进行验证，但是它一般是和max-age一起使用的，不会单独使用，
Cache-Control: must-revalidate, max-age=600如果要不缓存，每次都请求新的资源应该使用
Cache-Control: no-store
更多缓存知识就不多说了（作者我也是现学现卖哈哈哈）
加油奥里给🙆♀️
原文详见：
https://www.linuxidc.com/linux/2019-08/160265.htm
