HTML缓存本质是服务端通过Cache-Control等响应头控制浏览器对index.html的HTTP缓存，而非模板缓存；静态页可用public, max-age=3600但需JS/CSS带内容哈希，动态页须用private, max-age=0, must-revalidate，敏感页禁用缓存；meta标签无效，script需defer/async，且资源必须哈希+压缩。
HTML 文件本身不能被“模板缓存”加速——真正起作用的是浏览器对 index.html 的 HTTP 缓存行为。混淆模板结构和 HTTP 缓存，是线上页面长期卡在旧版本、JS 更新了但按钮文案没变的最常见原因。
Cache-Control 值必须匹配页面动态性
给 index.html 设置 public, max-age=3600 是高频错误：它会让用户持续加载旧 HTML，哪怕你已上线新 JS、删掉某个 <div>、甚至改了路由逻辑。
- 静态页（如文档、博客）可用
public, max-age=3600，但前提是所有 JS/CSS 路径含内容哈希（如main.a1b2c3.js） - 带用户态的页面（仪表盘、订单页）必须用
private, max-age=0, must-revalidate或直接no-cache——允许缓存，但每次都要向服务器验证 - 登录页、支付确认页等敏感页，强制设为
no-store，禁用任何本地/代理缓存 -
meta http-equiv="Cache-Control"在 Chrome/Firefox/Edge 中完全无效，仅极老 Safari 可能降级识别，别写
script 标签位置和属性直接影响白屏时长
浏览器解析 HTML 是流式的，<script> 放错位置会暂停整个 DOM 构建，再快的缓存也救不了白屏。
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
- 绝对不要把业务脚本放在
<head>里且不加defer或async - 有 DOM 依赖的脚本（如表单校验、组件初始化）优先用
defer：下载不阻塞，执行在 DOM 构建完成后 - 无依赖埋点脚本（如 GA、Sentry）用
async：下载不阻塞，执行时机不可控，但不影响主流程 - 内联 JS 控制在 1KB 以内；超量必须外链，否则 parser blocking 时间在低端设备上明显拉长
光设 Cache-Control 不够，构建与服务端配置必须协同
如果 index.html 缓存了 1 小时，但它引用的 main.js 没启用 content hash，用户加载的仍是旧逻辑——缓存策略就失效了。
立即学习“前端免费学习笔记（深入）”；
- JS/CSS 必须输出 content hash（Webpack 的
contenthash，Vite 默认行为），再配Cache-Control: public, max-age=31536000 - Nginx 或 CDN 需单独配置
index.html的缓存规则，不能和静态资源共用同一 location 块 - 启用 Gzip 或 Brotli 压缩：
gzip on或brotli on，HTML 体积通常缩小 50%~70% -
html-webpack-plugin的cache: true只加速本地开发编译，不影响浏览器缓存行为
最容易被忽略的一点：HTML 缓存时间越长，对 JS/CSS 路径哈希的准确性要求就越高——一个漏掉的哈希更新，就会让整个缓存链路失效。
