缓存作用:

1. 减少了冗余的数据传输，节省带宽，节省了网费
2. 减少了服务器的负担，大大提高了网站的性能
3. 加快了客户端加载网页的速度

浏览器第一次请求

image

协商策略:

1. 是否缓存 Expires，Cache-Control
2. 缓存时间
3. Etag
4. Last-Modified
   …

请求文件最近有修改吗，返回最后修改时间 statusCode:200 第一次请求资源，服务端返回 Etag，因为 none match 如果文件未变化，请求后状态码变为304

浏览器第二次请求

1. 通过 Last-Modified 来判断缓存是否可用

• Last-Modified: 响应时告诉客户端资源的最后修改时间
• If-Modified-Since: 当资源过期时( Cache-Control: max-age 过期)，发现资源具有 Last-Modified 声明，则再次向服务器请求时带上 Last-Modified

---

• 服务器收到请求后发现请求头里有 If-Modified-Since，则与被请求资源的最后修改时间做对比，如果最后修改时间较新，说明资源又被修改过，响应最新的资源并返回 200状态码
• 如果最后修改时间和 If-Modified-Since 一样，说明资源没有修改，返回 304状态码 并告知浏览器继续使用所保存的缓存文件。

---

最后修改时间存在的问题

1. 某些服务器不能精确得到文件的最后修改时间，这样就无法通过最后修改时间来判断文件是否更新
2. 某些文件的修改非常频繁，在秒一下时间里进行修改，比如股票，Last-Modified 只能精确到秒
3. 一些文件最后修改时间变了，但是内容并未改变
4. 如果同一个文件位于多个CDN服务器上的时候，内容虽然一样，修改时间不一样

2. 通过 ETag 来判断缓存是否可用

1. ETag 是 web服务端 产生的，然后发给浏览器客户端。类似 md5
   无论是长度多少的数据，得到一个固定的字符串长度的值，对原始数据的任何修改都会导致值的不同。实体标签的缩写，根据实体内容生成一段字符串，可以标识资源的状态，当资源发生改变时，ETag 随之发生改变。
2. 客户端想判断缓存是否可用，可以先获取缓存中的 ETag，然后通过 If-None-Match 发送请求给 Web服务器，询问此缓存是否可用。
3. 服务器收到请求，将服务器文件中的 ETag 跟请求头中的 If-None-Match 比较，如果值是一样的，说明缓存还是最新的，web服务器 将发送 304状态码
   给客户端表示缓存未修改过，可以使用。如果值不一样，web服务器 将发送该文档的最新版本给浏览器客户端。

3. 如何不发请求

浏览器将文件缓存到 cache目录，第二次请求时浏览器会先检查 cache目录 下是否有该文件，如果有，并且还没有到 expires 设置的时间，以及文件还没有过期，那么，此时浏览器将直接从 cache 目录 中读取文件，不再发送请求.
cache-control(相对时间) 优先级高于 expires(绝对时间)

---

参考资料：
浏览器的缓存管理
九种浏览器端缓存方法知多少