HTTP 的强缓存与协商缓存（浏览器缓存）

缓存命中规则

浏览器先检查强缓存是否通过，否则检查协商缓存

强缓存

1. Cache-Control

   浏览器检查资源响应头字段Cache-Control,例如 Cache-Control: max-age=60, 这表示在响应返回的60秒内可以直接使用缓存。 常用指令 |指令|含义| |-|-| |public|所有内容都将被缓存（客户端和代理服务器都可缓存），包括POST请求 |private|所有内容只有客户端可以缓存，Cache-Control的默认取值 |no-cache|客户端缓存内容，但是是否使用缓存则需要经过协商缓存来验证决定（会发起http请求） |no-store|不使用任何强缓存和协商缓存| |must-revalidate|一旦资源过期（比如已经超过max-age），在成功向原始服务器验证之前，缓存不能用该资源响应后续请求。| |max-age=<seconds>|缓存内容将在seconds秒后失效（相对于请求时间）|

2. Expires

   HTTP1.0的产物，如今已被Cache-Control替代，如果没有字段Cache-Control，则检查字段Expires，Expires: Aug, 15 2021 12:41:00 GMT, 这表示在2021年8月15日12时41分00秒之前，可以直接使用缓存。

Cache-Control的优先级比Expires高

协商缓存

1. Etag/If-None-Match

   1. 服务器返回的响应报文中带有Etag字段，该字段是资源生成的唯一签名，如果文件修改，则Etag值发生变化。

   2. 当强缓存达到过期时间，浏览器发起 HTTP 请求，请求头中携带If-None-Match字段，例如If-None-Match： "abc123"(abc123是该文件上次返回的的Etag)，当服务器接收到Etag值，和该文件最新的Etag值进行比对，如果一样，则返回304, 通知浏览器使用缓存，否则返回新的资源。

2. Last-Modified/If-Modified-Since
   1. Last-Modified表示文件最后的修改时间, 由服务器返回于响应头。如果没有Etag字段, 浏览器则会将 Last-Modified字段的值写入If-Modified-Since。发送HTTP请求，和服务器该资源的最后修改时间做对比，如果一样，则返回304, 通知浏览器使用缓存，否则返回新的资源。

Etag/If-None-Match的优先级比Last-Modified/If-Modified-Since高

备注：

1. 浏览器会默认缓存静态资源，比如：脚本文件、图片、样式表等；
2. 浏览器端使用快捷键ctrl+shift+R/command+shift+R可以强制清除缓存。