1.什么是浏览器缓存
浏览器缓存就是浏览器把一个已经请求过的Web资源拷贝一份副本储存在本地磁盘中。当再次访问相同的URL时，浏览器会根据缓存机制决定是直接使用副本响应访问请求，还是向服务器再次发送请求。
2.为什么要使用缓存
使用缓存是前端性能优化的重要方式，既可以提高响应的速度又可以减少不必要的重复请求，从而提高服务器的吞吐量.
3.缓存规则
3.常见的缓存策略
强缓存
强缓存，在缓存数据未失效的情况下，客户端可以直接使用缓存数据，不用和数据库进行交互。
那么，判断请求是否失效主要靠两个 HTTP Header：
-
Cache-Control：可以指定一个max-age字段，表示缓存的内容将在一定时间后失效。 -
Expires：数据的缓存到期时间，下一次请求时，请求时间小于服务端返回的到期时间，直接使用缓存数据。
当两个字段同时存在得到时候， Cache-Control 中的 max-age 字段字段优先级会稍微高一点， 当 Cache-Control 中的 max-age 字段校验成功，会直接返回浏览器内置数据库的缓存， 失效时才会将决策权传递给 Expires 字段判断。
协商缓存
协商缓存，顾名思义需要和服务器进行一次协商。浏览器第一次请求时，服务器会将缓存标识与数据一起返回给客户端，客户端将二者备份至缓存数据库中。
再次请求数据时，客户端将备份的缓存标识发送给服务器，服务器根据缓存标识进行判断，判断成功后，返回 304 状态码，通知客户端比较成功，可以使用缓存数据。
判断请求主要靠下面两组 HTTP Header：
Last-Modified：一个Response Header，服务器在响应请求时，告诉浏览器资源的最后修改时间。if-Modified-Since：一个Request Header，再次请求服务器时，通过此字段通知服务器上次请求时，服务器返回的资源最后修改时间。
服务器会通过收到的 If-Modified-Since 和资源的最后修改时间进行比对，判断是否使用缓存。
Etag：一个Response Header，服务器返回的资源的唯一标示If-None-Match：一个Request Header，再次请求服务器时，通过此字段通知服务器客户段缓存数据的唯一标识。
服务器会通过收到的 If-None-Match 和资源的唯一标识进行对比，判断是否使用缓存。
通常会让ETag 的优先级高于 Last-Modified 字段
4.强缓存和协商缓存并存的情况
默认情况下， 浏览器会优先考量强制缓存的情况， 当强制缓存生效的情况下， 请求并不会到达服务器， 因此也就不会触发协商缓存。 当强制缓存失效的时候， 浏览器便会将请求传递到服务器， 于是服务器又会开始校验 If-Modified-Since 和 If-None-Match 两个字段， 重复上述协商缓存的一个执行流程。
如果在请求头中设置Cache-Control: no-cache，浏览器将不再使用强制缓存， 而是直接去请求服务器，走协商缓存。
5.强缓存和协商缓存直接的区别
- 强缓存在缓存有效期内是不会请求服务器的，其数据来源则是浏览缓存的本地磁盘。
- 协商缓存每次都会请求服务器，缓存有效期内会返回304，缓存失效会返回200.
- 强制缓存在浏览器强制刷新的情况下不会生效， 而协商缓存则不受影响。（调试代码测试时候，要注意），即：
-
普通刷新 F5：浏览器优先从缓存中查找资源，如：缓存文字，缓存图片，缓存视频。（点击刷新，地址栏回车） （会走缓存，可能不会请求服务器资源）
-
强制刷新 cond+f5 :不获取缓存，重新从网站服务器请求网页上的所有资源，适用内容更新比较快的网站（不会走强缓存，可能会走协商缓存，会到服务器）
6.使用缓存也可能会有安全问题，建议配置
禁用 Public Cache
Cache-Control: private
设置适当的二级缓存 key
Vary: Cookie
参考：mp.weixin.qq.com/s/qsbESQs0G… zhuanlan.zhihu.com/p/58685072
