怎么快速搞定HTML缓存机制配置-html教程-PHP中文网

html缓存由http响应头控制，需按页面动态性分层配置：静态页用public,max-age=3600；带用户态页面用no-cache或max-age=0,must-revalidate；敏感页用no-store；nginx须分离html与静态资源缓存策略。

怎么快速搞定html缓存机制配置

HTML 缓存不是靠写个 <meta> 标签就能生效的——它完全由服务器返回的 HTTP 响应头控制，错配会导致用户卡在旧版页面、JS/CSS 错配、白屏等线上问题。配置对了，首屏快；配错了，连刷新都救不回来。

Cache-Control 必须按页面动态性分层设

给所有 HTML 统一加 public, max-age=3600 是最常见失误。关键看页面是否带用户态或实时数据：

静态页（文档、博客）：可设 public, max-age=3600，但前提是引用的 JS/CSS 文件名含内容哈希（如 main.a1b2c3.js）
带登录态/订单/仪表盘的页面：必须用 no-cache 或 max-age=0, must-revalidate——允许缓存，但每次都要校验
支付页、隐私页等敏感页：用 no-store，彻底禁用任何缓存（包括内存和磁盘）

别用 private：CDN 节点会忽略它，导致边缘缓存失效，首屏反而变慢。

Nginx 配置要区分 HTML 和静态资源

HTML 和 JS/CSS 的缓存策略必须分开，不能共用一个 location 块：

anything-to-html

将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。

下载

对 /index.html 单独配：

location = /index.html {<br>  add_header Cache-Control "no-cache";<br>  expires -1;<br>}

对静态资源（CSS/JS/图片）用指纹化路径 + 长期缓存：

location ~* \.(css|js|png|jpg|woff2)$ {<br>  expires 1y;<br>  add_header Cache-Control "public, immutable";<br>}

确保 immutable 只用于带哈希的文件——否则改了内容但 URL 不变，缓存就永远不更新

验证缓存是否真生效，别信 F5 刷新

普通刷新（F5 或地址栏回车）可能走内存缓存，掩盖真实行为。正确验证方式：

打开 DevTools → Network → 刷新页面 → 找到 index.html 请求
看 Size 列：显示 from memory cache 或 from disk cache 表示强缓存命中（HTML 不该这样）
看 Status 列：出现 304 Not Modified 才是协商缓存正常；200 OK 且无 from cache 说明没缓存或已过期
强制刷新（Ctrl+Shift+R）会跳过所有缓存，仅用于排除干扰，不能用来判断日常行为

Service Worker 离线缓存里 HTML 必须显式包含

只缓存 app.js 和 style.css，漏掉 index.html，离线时就是白屏——浏览器连主文档都拿不出来：

在 SW 的 install 事件中，用 cache.addAll() 显式加入绝对路径：['/', '/index.html', '/offline.html']
每次部署必须变更 CacheStorage 名称（如从 v1 → v2），并在 activate 事件中调用 caches.delete('v1')
fetch 事件中，对 request.destination === 'document' 的请求，必须兜底返回 /offline.html，否则网络中断时直接报错