定义
实例
一 、协商缓存
Last-Modified\ Etag 与 If-Modified-Since/If-None-Match 定义
| 响应头 | 请求头 |
|---|---|
| Etag | If-None-Match |
| Last-Modified | If-Modified-Since |
- ETag（实体标签）: 用于标识Web服务器上资源的版本。每个资源被请求时，服务器会生成一个对应的ETag，客户端可以保存这个ETag值。当客户端再次请求该资源时，可以将上次获取的ETag值通过If-None-Match头部信息发送给服务器，服务器会比较客户端发送的ETag和当前资源的ETag是否一致，如果一致则返回304 Not Modified，而不返回资源内容，从而实现了缓存控制和减少数据传输量。 ETag通常是根据资源内容生成的哈希值或者版本号等唯一标识符。
- Last-Modified:用于指示服务器上资源的最后修改时间。当客户端请求一个资源时，服务器会返回该资源的Last-Modified时间。客户端可以保存这个时间戳，下次请求时可以通过If-Modified-Since头部信息将这个时间戳发送给服务器，服务器会判断资源是否在此时间之后被修改过，如果没有修改过，返回304 Not Modified，允许客户端使用本地缓存的资源。 Last-Modified和If-Modified-Since这种方式可以减少对服务器资源的不必要请求，提高性能。
- If-modified-since: 用于指示服务器只返回在指定日期之后修改过的资源。当客户端发送一个请求时，可以包含If-modified-since头，服务器会检查资源是否在指定日期之后被修改过，如果没有被修改，则返回一个304 Not Modified响应，告诉客户端可以使用本地缓存的副本。这样可以减少带宽占用，提高效率。
- If-none-match: 用于指示服务器只返回与指定的ETag（实体标签）值不匹配的资源。ETag是服务器为每个资源分配的唯一标识符。当客户端发送一个请求时，可以包含If-none-match头，服务器会比较请求中的ETag和当前资源的ETag是否相同，如果不相同，则返回完整的资源；如果相同，则返回一个304 Not Modified响应，告诉客户端可以使用本地缓存的副本。这样可以减少带宽占用，提高效率。
实例
-
第一次请求png文件时，可以在响应标头中看到服务端设置的Etag和Last-Modified。
image.png -
第二次请求png文件时，如下面两幅图
首先可以从状态码上看到区别；第一次请求响应的状态码是200，第二次是304。其次查看第二次请求的请求头，可以看到If-Modified-Since（值为第一次响应头中Last-modified的值）和If-None-Match（值为第一次请求的响应头中Etag的值）两个字段
状态码.png
二、强缓存
1. Cache-control（http1.1）
- no cache
可以在客户端存储资源，每次都必须去服务端做新鲜度校验，来决定从服务端获取新的资源（200）还是使用客户端缓存（304）。也就是所谓的协商缓存，即表明跳过强缓存，进入协商缓存
① 请求头中设置Cache-Control: no-cache
当我们勾选了“停用缓存”刷新页面，再查看png请求，可以看到请求头中多了个Cache-Control：no-cache表示不使用缓存
在请求头中设置Cache-Control: no-cache的效果和在请求的响应头中设置Cache-Control: no-store 效果一样，客户端都不会缓存资源，每次都要去服务端获取资源
② 响应头中设置Cache-Control: no-cache
-
no store
禁止在客户端存储资源，每次请求都需要去服务器获取资源
no store.png
第二次请求.png
状态码.png
当设置了 cache-control：no-store 时，禁止本地缓存，且当cache-control： no-store 与Etag同时存在时，强缓存的优先级高与后者
- max-age
① lighttpd服务
设置了max-age=60 即，在60s内如果再次访问，使用缓存，如果超过60 则会像服务器发起请求。-
第一次请求
max-age.png
-
- 60s内第二次请求????
??? 这里按照规则应该直接读取内存缓存，状态码200，但是不知道为啥我测试的是这个情况
- 超过60s 之后的第三次请求和第二次一样
cache-control 这里的使用存疑，不知道是否lighttpd配置的缘故，自己另外用Express搭建了一个如下
② Express
附：express配置代码
app.use(expressStaticGzip(path.join(__dirname, 'public'), {
cacheControl: true,
setHeaders: function(res, path) {
res.header("Cache-Control", "max-age=60")
}
}))
2. Pragma（http1.0）
总结
-
优先级
- Cache-Control > Expire > Etag > Last-modified
- 强缓存 > 协商缓存
-
Cache-Control > Expires / Pragma
缓存策略.png
-
区别和联系
共同点：如果命中，都是从客户端缓存中加载资源，而不是从服务器加载资源数据；区别：强缓存不发请求到服务器，协商缓存会发请求到服务器。
参考
图解Http缓存控制之max-age=0、no-cache、no-store区别
no-cache 和 no-store 的区别
