html缓存本身几乎不能减少白屏时间，反而配错会直接导致白屏——因浏览器卡在旧index.html中加载失效的新哈希资源，引发404或dom不匹配，js初始化失败致页面空白；真正影响白屏的是html解析流及阻塞资源。
HTML 缓存本身几乎不能减少白屏时间，反而配错会直接导致白屏——因为浏览器卡在旧 index.html 里，加载的却是新哈希名的 main.a1b2c3.js，结果脚本 404 或 DOM 结构不匹配，JS 初始化失败，页面就空着不动。
为什么给 index.html 加 max-age 会延长白屏
白屏结束的标志是首屏内容渲染完成（FP / FCP），这取决于三件事：HTML 解析完毕、关键 CSS 就位、首屏 JS 执行完。而 index.html 缓存只影响“HTML 文件下载”这一步；它下载得再快，如果里面引用的 main.js 路径已失效，或内联样式被移除，浏览器照样无法构建有效 DOM。
-
Cache-Control: public, max-age=3600配给index.html后，用户刷新看到的仍是旧 HTML，哪怕你刚上线了修复白屏的defer脚本 - 服务端没返回
ETag或Last-Modified，no-cache实际退化成“永远用缓存”，协商验证形同虚设 -
meta http-equiv="Cache-Control"在 Chrome/Firefox/Edge 中完全不生效，仅旧 Safari 可能识别，别当真
真正影响白屏的是 HTML 的解析流控制
浏览器边下载边解析 HTML，但遇到阻塞型资源就会停住：未加 defer 或 async 的 <script></script>、没预加载的关键字体、未内联的首屏 CSS —— 这些才是白屏元凶。
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
- 把首屏 CSS 内联进
，避免link[rel="stylesheet"]触发 parser blocking - 业务逻辑 JS 必须加
defer，确保 DOM 构建完成后才执行；埋点类脚本可用async - 关键字体（如
font-display: block）必须<link rel="preload" as="font">，否则加载超时直接白屏 - 绝对不要在
里放同步fetch或document.write()，它们会让解析彻底暂停
HTML 缓存该配什么，取决于你用什么架构
不是“要不要缓存”，而是“谁来决定这个 HTML 是否过期”。单页应用（SPA）、服务端渲染（SSR）、静态站点（SSG）的策略完全不同。
- SPA 的
index.html：必须Cache-Control: no-cache, must-revalidate或no-store（登录页），CDN 层禁用长缓存 - SSR 页面（如仪表盘）：用
private, max-age=0, must-revalidate，允许缓存但强制每次校验 - 纯静态文档页（如官网首页）：可设
public, max-age=300（5 分钟），但前提是所有资源 URL 带内容哈希 - 用
html-webpack-plugin或 Vite 的cache: true？那只是加速本地构建，和浏览器缓存无关
最常被忽略的协同点：缓存链路断一环，全盘失效
你配对了 index.html 的 no-cache，但 CDN 把它覆盖成 max-age=86400；你启用了 Brotli 压缩，但 Nginx 没配 gzip_vary on，导致协商缓存失效；你加了 immutable 给 main.a1b2c3.js，却忘了在 HTML 中更新引用路径……这些细节不拉通，缓存策略就是纸上谈兵。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
