HTML文件本身缓存对减少卡顿几乎没用，反而易引发白屏、旧内容、JS/CSS错配等问题；真正有效的是避免HTML阻塞解析+静态资源稳稳命中缓存，关键在Cache-Control精准配置、资源哈希化及服务端响应头真实生效。
HTML 文件本身缓存对减少卡顿几乎没用，反而容易引发白屏、旧内容、JS/CSS 错配等更严重的卡顿问题。真正能缓解卡顿的是不让 HTML 阻塞解析 + 让静态资源稳稳命中缓存。
Cache-Control 设错会让首屏更卡
常见错误现象：页面加载时白屏 1–2 秒，DevTools Network 面板里 index.html 请求耗时突增，或反复看到 304 但 DOM 构建仍慢。
-
Cache-Control: public, max-age=3600配给动态index.html：用户刷新后仍加载旧 HTML，但新 JS 已上线 → 脚本报错、组件挂载失败、按钮点击无响应，表现为“界面卡住不动” -
no-cache看似安全，实则每次都要发一次完整请求（含 DNS/TCP/TLS/HTTP 往返），首屏延迟没减少，只是把卡顿从“白屏”变成“闪一下再白屏” -
private在 CDN 场景下等于失效：CDN 节点不认private，可能缓存了 HTML，但用户浏览器却因private不敢复用 → 两边都发请求，重复加载
正确做法：
- 纯静态页（如文档站首页）：
Cache-Control: public, max-age=300（5 分钟足够压 CDN 回源） - 带用户态的页面（仪表盘、订单页）：
Cache-Control: no-cache, must-revalidate或max-age=0 - 敏感页（登录、支付）：
Cache-Control: no-store
script 标签位置和属性直接决定是否卡住渲染
浏览器解析 HTML 是单线程流式过程，<script></script> 出现在 里且没加 defer 或 async，就会暂停整个 HTML 解析，直到 JS 下载、执行完 —— 这就是白屏卡顿的根源。
立即学习“前端免费学习笔记（深入）”；
- 绝对不要写：
<script src="app.js"></script>放在里 - 业务逻辑脚本（如初始化 Vue/React、表单校验）：用
defer，下载不阻塞，执行在 DOM 构建完成后 - 埋点类脚本（Sentry、GA）：用
async，下载不阻塞，执行时机不可控但不影响主流程 - 内联 JS 控制在 1KB 以内；超量必须外链，否则 parser blocking 时间在低端设备上明显拉长
静态资源不带哈希，缓存就等于没开
你给 main.js 设置了 Cache-Control: public, max-age=31536000，但文件名没变，内容变了 → 用户永远拿不到新版 JS，功能异常、UI 错位、接口调不通，用户感知就是“点了没反应”“页面突然错乱”。
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
必须做：
- 构建时启用 content hash：Webpack 用
[contenthash]，Vite 默认开启 - HTML 中引用的路径自动更新，例如
main.a1b2c3.js - Nginx 配置匹配静态资源路径并加
immutable：add_header Cache-Control "public, immutable";
不这么做，哪怕 Cache-Control 写得再漂亮，浏览器也只会复用旧文件。
meta http-equiv="Cache-Control" 完全不可信
这个标签在 Chrome/Firefox/Edge 中被完全忽略，只在极个别旧版 Safari 上有降级行为。你写了它，DevTools 里看不到效果，但自己会误以为“缓存已生效”，结果线上出问题才发现 HTML 根本没缓存。
唯一可靠方式是服务端响应头：
- Nginx：
location = /index.html { add_header Cache-Control "no-cache"; } - Express：
res.set('Cache-Control', 'no-cache'); - 检查方式：Network 面板点 HTML 请求 → 看 Response Headers 里是否有
Cache-Control
最容易被忽略的是 CDN 层覆盖：阿里云、Cloudflare 默认会按路径规则重写缓存头，/index.html 可能被强制缓存 10 分钟 —— 此时服务端 header 再对也没用，必须去 CDN 控制台单独关掉或设短时间。
