浏览器缓存不是玄学：读懂 Cache-Control

页面刷新后变快，不一定是代码变快了。浏览器、CDN 和源站都可能保存响应副本，Cache-Control 决定这些副本什么时候可以直接使用。

两种不同的缓存对象

HTML 和带哈希的静态资源应该采用不同策略：

# HTML：允许缓存，但每次使用前重新验证
Cache-Control: public, max-age=0, must-revalidate

# 哈希资源：内容变更时文件名也会变
Cache-Control: public, max-age=31536000, immutable

如果给 HTML 设置一年缓存，发布新版本后用户仍可能看到旧页面。反过来，如果所有 CSS 和图片都禁用缓存，就会浪费带宽和加载时间。

ETag 在解决什么

ETag 是响应内容的版本标识。浏览器重新请求时会带上 If-None-Match，内容未变化时服务端只返回 304 Not Modified，无需再次传输完整文件。

用数据验证

不要只凭开发者工具里的“from cache”判断。连续请求同一个资源，记录状态码、传输大小和响应头，才能确认缓存策略是否按预期工作。