共计 1074 个字符，预计需要花费 3 分钟才能阅读完成。
一、前言
先记录从其余文章失去教训，看看当前有没机会用上
二、缓存是前端还是后端设置？
后端设置，全部都是在响应头，response header 这个外面设置属性
三、类型
1. 强缓存
设置cahe-control，比方像这样
Cache-Control 的几个取值含意：
private： 仅浏览器能够缓存
public： 浏览器和代理服务器都能够缓存（对于 private 和 public，前端能够认为一样，不必深究）
max-age=xxx 过期工夫（重要）
no-cache 不进行强缓存（重要）
no-store 不强缓存，也不协商缓存（下一个介绍的类型），根本不必，缓存越多才越好呢
规定能够设置多个，像
cahe-controlmaxage=31536000,public,immutable
（上面流程独自指强缓存，实际上是先强缓存后协商缓存的流程，要留神）
- 用户申请一张图片
- 浏览器查找缓存表，
- 没有，申请服务器，服务器返回资源（状态码 200），把它存到缓存表
有，再读 max-age 有没有过期
- 没有过期，拿缓存返回（状态码 200）
- 过期了，申请服务器，服务器返回资源（状态码 200），把它存到缓存表
尽管在 network 看起来如同都是申请了接口，然而要留神其实有下面判断的，能够看这里
看到前面那段话没，来自内存缓存。
2. 协商缓存
当强缓存生效，（设置了 no-cache 或者 max-age 过期了）就会走这个
设置两个属性ETag，Last-Modified
ETag：每个文件有一个，改变文件了就变了，能够看似 md5
Last-Modified：文件的批改工夫
（上面流程独自指协商缓存，实际上是先强缓存后协商缓存的流程，要留神）
- 第一次申请 资源，在 response header 都会有下面两个属性返回，浏览器会把这些存到缓存
- 下次申请同一个资源时 ，在request header 会把这两个值带过来，并且 ETag 这个 key 会换了一个名字 If-None-Match
- 服务端承受申请，比照这两个值
- 没有过期，状态码 304，间接拿缓存的
- 过期了，服务器返回新资源（状态码 200），当然也有新的 etag 和 last-modified，浏览器缓存表更新
这里留神，协商缓存无论是不是命中，都申请了接口，这个搞清楚，只是命中了，响应很快，没命中，就是失常的响应速度
四、残缺流程
缓存命中是 先走强缓存 再走协商缓存 的, 看图
五、其余补充
用户操作对缓存影响
对于 cdn
集体了解，cdn 只是代替了你的原始服务器，长处就是它的响应更快，而后强缓存和协商缓存还是仍旧有执行判断的。
非常感谢以下大佬
浏览器缓存
用了 CDN 缓存，就会跳过强缓存和协商缓存吗？
