响应头信息有：

1. Cache-Control // 控制缓存
2. Expire // 控制缓存
3. ETag // 校验缓存用
4. Last-Modified // 校验缓存用

Cache-Control

Cache-Control 是用来控制缓存的，比如缓存要不要开启，缓存时长是多少，要不要每次请求缓存前都需要校验等等。ETag 和 Last-Modified 是用于缓存失效后的校验，它们都需要对应的请求头一起使用。

通常 Cache-Control 会搭配 ETag 或 Last-Modified 一起使用用于更好的控制缓存，当然也可以只使用其中一个。

Expires

Expires 头信息返回的值是一个时间日期，在这个日期之后响应被视为已过期。

If there is a Cache-Control header with the max-age or s-maxage directive in the response, the Expires header is ignored.

从这里的定义可以看到它的优先级比 Cache-Control 低，如果响应有 Cache-Control 头信息则 Expires 头信息会被忽略。

这是因为 Cache-Control 和 ETag HTTP 1.1 新增加的响应头，Expires 和 Last-Modified HTTP 1.1 之前的响应头。至于新加的响应头的好处其中之一是控制更精确（Last-Modified 只到秒级别）。

ETag

ETag 是响应内容某个指定版本的一个标识符，通常可以用文件的 hash 或者某个固定规则的算法，比如文章最后修改时间的 MD5 等。

它的规范如下，W 开头规范是弱校验用的，这里就不展开了

ETag: W/"<etag_value>"
ETag: "<etag_value>"

ETag 另一个典型的用法是缓存未更改的资源

1. 客户端再次请求一个指定的资源地址，这个资源缓存已过期
2. 客户端会通过一个 If-None-Match 请求头发送上次响应的 ETag 的值
3. 服务端会比较客户端发送的这个 ETag 值 和资源当前版本的 ETag 值
4. 如果这两个值相等则会响应一个 304 Not Modified 状态码且没有响应内容
5. 客户端在接收到 304 响应后就知道上次缓存的内容还是新鲜的，可以继续使用的

Last-Modified

The Last-Modified response HTTP header contains the date and time at which the origin server believes the resource was last modified. It is used as a validator to determine if a resource received or stored is the same. Less accurate than an ETag header, it is a fallback mechanism. Conditional requests containing If-Modified-Since or If-Unmodified-Since headers make use of this field.

ETag and Last-Modified

ETag 和 Last-Modified 是用来校验缓存用的，可以理解成缓存的一个ID，它们都有对应请求头，If-None-Match 和 If-Modified-Since，服务端在发出响应之前会根据请求的头信息去匹配计算，比如请求头有 If-None-Match: 'ak1017'，服务端在响应之前会计算档次响应的 ETag 和这个值相等就会响应一个 304 没有内容的响应，客户端在接收到 304 之后就会继续使用上次缓存的内容。达到节省流量，提升响应时间。

Last-modified and If-Modified-Since

this is resopone header and request header, they match each other,

ETag and If-None-Match

一个请求命中缓存会响应的状态

1. 304 no data
2. 200 disk cache
3. 200 memory cache

示例一

下面是一个响应头同时包含 Cache-Control 和 Last-Modified 的例子

// 使用 node + http 实现的部分代码
if (req.url === '/css.css') {
    res.setHeader('Cache-Control', 'max-age=160')
    res.setHeader('Last-Modified', 'Wed, 23 Dec 2020 12:35:35 GMT')
    res.setHeader('Content-Type', 'text/css; charset=UTF-8')

    if (req.headers['if-modified-since']) {
      res.statusCode = 304
      res.end()
      return
    }

    let css = fs.readFileSync('./css.css')
    res.write(css)
    res.end()
    return
  }

下面的访问测试都是基于 chrome 浏览器 87.0.4280.88

示例二

下面是一个响应头同时包含 Cache-Control 和 ETag 的例子

if (req.url === '/etag.css') {
    let etag = 'ak307'

    res.setHeader('Cache-Control', 'max-age=45')
    res.setHeader('Content-Type', 'text/css; charset=UTF-8')
    res.setHeader('ETag', etag)
    if (req.headers['if-none-match'] === etag) {
      res.statusCode = 304
      res.write('here is bad')
      res.end()
      return
    }

    let css = fs.readFileSync('./css.css')
    res.write(css)
    res.end()
    return
  }

这里的再次请求有时会遇到响应 200 但响应内容没有的情况
some | etag.css | 200 OK | stylesheet | 174 B 77.4 kB

设置 Cache-Control 后浏览器再次请求资源时候如果缓存没有过期则就直接使用缓存，在缓存过期后会向服务端发起请求，这时接收到一个 304 客户端继续使用上次的缓存内容并更新了缓存有效期。

示例三

下面是一个响应头只有 ETag 的例子

if (req.url === '/etag2.css') {
    let etag = 'ak308'

    res.setHeader('Content-Type', 'text/css; charset=UTF-8')
    res.setHeader('ETag', etag)
    if (req.headers['if-none-match'] === etag) {
      res.statusCode = 304
      res.write('here is bad')
      res.end()
      return
    }

    let css = fs.readFileSync('./css.css')
    res.write(css)
    res.end()
    return
  }

这里不设置 Cache-Control 浏览器默认也会把资源存入缓存，只是每次请求都会向远端服务器发起校验，然后接收到响应 304 继续使用上次的响应内容。

示例四

下面是一个响应头只有 Last-Modified 的例子

if (req.url === '/style-no-cache.css') {
    const last = 'Wed, 23 Dec 2020 12:35:35 GMT'
    // res.setHeader('Cache-Control', 'max-age=45')
    res.setHeader('Last-Modified', last)
    res.setHeader('Content-Type', 'text/css; charset=UTF-8')
    res.removeHeader('date')

    if (req.headers['if-modified-since'] === last) {
      console.log('last modified enter 304')
      res.statusCode = 304
      res.end()
      return
    }

    let css = fs.readFileSync('./css.css')
    res.write(css)
    res.end()
    return
  }

相比较只有 ETag 响应头的，这里只有 Last-Modified 响应头，再次请求都是直接使用缓存的内容，在测试中没发现资源有向远端发起校验，这里也没有设置对应的缓存时长，why？（这里只在设置的 Last-Modified 时间是已过期的情况，如果 Last-Modified 没有过期在过期之前访问还是会响应 304，只是在后续多次访问后会变成 memory cache）

示例五

下面是一个响应头包含 Expires 和 Last-Modified 的例子

if (req.url === '/style-expires.css') {
    const last = 'Wed, 23 Dec 2020 12:35:35 GMT'
    res.setHeader('Expires', 'Sun, 10 Jan 2020 09:03:00 GMT')
    res.setHeader('Last-Modified', last)
    res.setHeader('Content-Type', 'text/css; charset=UTF-8')

    if (req.headers['if-modified-since'] === last) {
      res.statusCode = 304
      res.end()
      return
    }

    let css = fs.readFileSync('./css.css')
    res.write(css)
    res.end()
    return
  }

这里可以看到设置 Expires 和 Cache-Control 有同样的效果

示例六

下面是一个响应头设置 Cache-Control: no-store 和 ETag 的例子

if (req.url === '/style-no-store.css') {
    let etag = 'ak857'

    res.setHeader('Cache-Control', 'no-store')
    res.setHeader('Content-Type', 'text/css; charset=UTF-8')
    res.setHeader('ETag', etag)
    if (req.headers['if-none-match'] === etag) {
      res.statusCode = 304
      res.write('here is bad')
      res.end()
      return
    }

    let css = fs.readFileSync('./css.css')
    res.write(css)
    res.end()
    return
  }

设置为 no-store 的资源，浏览器端就不会启用缓存，每次都成远端获取最新的内容，且请求头不会追加对应的 If-None-Match

浏览器什么情况下会把请求的资源存入缓存？
只要请求到的响应头开启缓存（ Cache-Control: max-age=<number> 或 Expires）或包含 ETag 响应头，或者即使没有设置 Cache-Control 浏览器都会把资源默认存入缓存，除非明确设置 Cache-Control: no-store 不需要浏览器存储缓存。