Cache-Control之no-cache和max-age=0

前言

缓存是一个复合的概念，本文是http缓存系列文章之一，仅讨论Cache-Control这个字段的两个值：no-cache和max-age=0的区别。关于Cache-Control更全面的介绍，请点击这里。

本文实验代码的运行方式，参考这里。特别要注意：刷新触发不了Cache-Control（原因），要查看Cache-Control的效果必须（我是这么做的）：

• 再打开一个tab
• 在新的tab上，先打开chrome-dev，调到Network
• 重新输入刚才的前端页面，可以看到资源已变成from disk cache

说明：在rfc7234规范中，此字段的说明就分为request header和response header。我们同样以此为分类。相关的源码在这里

response添加Cache-Control

首先我们通过给response headers添加Cache-Control，以此来实现缓存。

// 服务端
app.get('/api', (req, res) => {
  res.setHeader('Cache-Control', 'max-age=3600')
  res.json(666)
})

// 前端
var myRequest = new Request('/api', {})

image.png

可以看出缓存确实生效了。

request之no-cache

如果request headers中，Cache-Control为no-cache。表示不管服务端有没有设置Cache-Control，都必须从重新去获取请求。

var myRequest = new Request('/api', {
  headers: {
    'Cache-Control': 'no-cache'
  }
})

重复上面步骤，这次发现from disk cache没了

image.png

request之max-age=0

max-age=0表示不管response怎么设置，在重新获取资源之前，先检验ETag/Last-Modified

// 服务端
// 由于使用的是express，为了使etag生效
// app.set('etag', false);

// 客户端
var myRequest = new Request('/api', {
  headers: {
    'Cache-Control': 'max-age=0'
  }
})

可以看到变成304了，因为去验证了Etag了。

image.png

response之max-age和no-cache

经过试验，不管是max-age还是no-cache，都会返回304

// 客户端
var myRequest = new Request('/api', {
  // headers: {
  //   'Cache-Control': 'max-age=0'
  // }
})

app.get('/api', (req, res) => {
  res.setHeader('Cache-Control', 'max-age=0')
  // res.setHeader('Cache-Control', 'no-cache')
  res.json(666)
})

总结

1. no-cahce并不是表示无缓存，而是指使用缓存一定要先经过验证
2. response header的no-cache和max-age=0和request header的max-age=0的作用是一样的：都要求在使用缓存之前进行验证
3. request header的no-cache，则表示要重新获取请求，其作用类似于no-store（可能你对这个结论很有怀疑，这不符合no-cache的设定。究其原因，在文档中有对其说明，称为Disambiguating Multiple Responses）

参考资料

https://stackoverflow.com/questions/1046966/whats-the-difference-between-cache-control-max-age-0-and-no-cache
rfc7234-cache