HTTP缓存策略

定义

HTTP缓存策略

实例

一 、协商缓存

Last-Modified\ If-Modified-Since 与 Etag/If-None-match

• 第一次请求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 的区别