如何通过Etag实现浏览器缓存图片10天且每12小时重新验证？

目标实现方案 #

要满足「浏览器缓存图片10天，每12小时重新验证一次」的需求，推荐使用以下HTTP头组合：

Cache-Control: max-age=43200, stale-while-revalidate=820800, public
ETag: "your-unique-resource-identifier"

各字段作用解析 #

• max-age=43200：设置缓存的新鲜期为12小时（43200秒）。在这个时间段内，浏览器会直接使用本地缓存，但会在后台异步发起资源验证请求（配合stale-while-revalidate）。
• stale-while-revalidate=820800：设置过期缓存可复用时长为9.5天（820800秒）。当新鲜期（12小时）过后，浏览器仍可继续使用旧缓存，但必须立即向服务器发起验证请求；验证通过后，会更新本地缓存。新鲜期+过期复用期总时长为10天，刚好满足10天缓存要求。
• public：允许CDN、代理服务器等中间节点缓存该资源，提升全局访问性能。
• ETag：服务器生成的资源唯一标识，浏览器验证时会携带If-None-Match头，服务器返回304 Not Modified则表示资源未变更，浏览器继续使用缓存；返回200 OK则更新缓存。

之前配置失效的原因 #

1. 原max-age=864000（10天）的问题：浏览器认为10天内缓存都是「新鲜」的，不会发起任何验证请求，直接读取本地缓存——即使配置了ETag，也没有触发验证的时机。
2. 添加must-revalidate无效的原因：该字段仅在缓存过期后生效，要求浏览器必须验证才能继续使用缓存，但它不会改变「新鲜期内不验证」的规则。原配置中10天的新鲜期太长，自然不会触发验证。

兼容性补充 #

如果需要兼容不支持stale-while-revalidate的旧浏览器，可退而求其次使用以下配置：

Cache-Control: max-age=43200, must-revalidate, public
ETag: "your-unique-resource-identifier"

这种配置下，每12小时缓存过期后，浏览器会先发起验证请求，等待服务器响应后再加载资源（用户可能感知到短暂延迟），总缓存周期仍为10天（每次验证通过后，缓存新鲜期重新计算）。

内容的提问来源于stack exchange，提问作者MagentaManatee