HTML本地缓存是HTTP协议层的可验证交付规则，核心由Cache-Control指令控制：max-age定义强缓存时长，no-cache强制验证，no-store彻底禁用，public/private决定共享范围；Expires、ETag等仅为辅助或降级手段。
HTML本地缓存不是“浏览器记住了网页”，而是HTTP协议层的一套可验证、可预测的交付规则——你改了文件却看不到效果，问题大概率不在浏览器清不清缓存，而在服务端没发对Cache-Control头。
Cache-Control 是唯一需要优先掌握的核心指令
它直接决定浏览器是否用缓存、用多久、能不能被CDN缓存。其他头如Expires或ETag只是辅助或降级手段。
-
max-age=3600表示资源新鲜期为1小时，期间所有请求都走强缓存（不发请求） -
no-cache不代表“不缓存”，而是强制每次请求都带If-None-Match或If-Modified-Since去服务器验证 -
no-store才是真禁用：禁止任何中间节点（包括浏览器、代理、CDN）存储副本 -
public允许共享缓存（如CDN），private只允许用户浏览器存（比如含用户信息的HTML） - 动态HTML页面建议设
Cache-Control: no-cache, must-revalidate，静态JS/CSS/图片则用public, max-age=31536000, immutable
为什么加?v=1.2 这种参数有时也不管用
因为浏览器只看URL是否完全一致——但如果你在开发时用的是localhost或file://协议，部分浏览器（尤其是Safari和旧版Edge）会忽略Cache-Control，甚至把查询参数也缓存进键里，导致?v=1.2 和 ?v=1.3 被当成两个独立资源，却都按同一份过期策略处理。
- Chrome在
localhost下仍尊重Cache-Control，但Safari可能无视max-age，只按启发式缓存（比如根据Last-Modified推算） - 用
file://打开HTML时，所有HTTP头失效，浏览器退化为基于文件修改时间的简单缓存，v=参数无效 - 真正可靠的版本控制是构建时重命名文件（如
main.a8f3b2c.js），配合immutable指令，让浏览器确认“内容不变就永远别问”
调试时禁用缓存 ≠ 理解缓存
开发者工具里勾选Disable cache只是临时绕过，它掩盖了真实缓存行为，反而让你误以为“只要我清了缓存就万事大吉”。真实环境里，用户不会开F12，也不会Ctrl+F5。
立即学习“前端免费学习笔记（深入）”；
- 用
curl -I https://yoursite.com/index.html检查响应头，确认Cache-Control值是否符合预期 - 在Network面板中看资源状态码：
200 (from memory cache)或200 (from disk cache)是强缓存生效；304是协商缓存成功；200（无from字样）才是全新下载 - 注意
304响应不带响应体，但依然要走网络往返——如果服务器验证逻辑慢（比如查数据库比对ETag），它反而比强缓存更耗时
最常被忽略的点是：HTML文件本身通常不该被长期缓存，但它的内联资源（如<script src="app.js"></script>）必须可长期缓存。这个分层控制意识，比记住所有指令更重要。
