HTTP缓存策略

定义

实例

一、协商缓存

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

请求头.png

二、强缓存

1. Cache-control（http1.1）

no cache
可以在客户端存储资源，每次都必须去服务端做新鲜度校验，来决定从服务端获取新的资源（200）还是使用客户端缓存（304）。也就是所谓的协商缓存，即表明跳过强缓存，进入协商缓存
① 请求头中设置Cache-Control: no-cache

当我们勾选了“停用缓存”刷新页面，再查看png请求，可以看到请求头中多了个Cache-Control：no-cache表示不使用缓存

禁用缓存.png

在请求头中设置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，但是不知道为啥我测试的是这个情况

读取缓存内容.png

超过60s 之后的第三次请求和第二次一样

cache-control 这里的使用存疑，不知道是否lighttpd配置的缘故，自己另外用Express搭建了一个如下

② Express

第一次访问.png

60s之内的第二次访问.png

60s之后的第三次.png

三次访问流程.png

附：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）

image.png

总结

优先级
1. Cache-Control > Expire > Etag > Last-modified
2. 强缓存 > 协商缓存
3. Cache-Control > Expires / Pragma
  
  缓存策略.png
区别和联系
共同点：如果命中，都是从客户端缓存中加载资源，而不是从服务器加载资源数据；

区别：强缓存不发请求到服务器，协商缓存会发请求到服务器。

参考

图解Http缓存控制之max-age=0、no-cache、no-store区别
 no-cache 和 no-store 的区别

HTTP缓存策略

定义

实例

一 、协商缓存

Last-Modified\ Etag 与 If-Modified-Since/If-None-Match 定义

实例

二、强缓存

1. Cache-control（http1.1）

2. Pragma（http1.0）

总结

参考

一、协商缓存