Network面板中index.html请求的Size和状态码是判断HTML缓存是否生效的唯一可靠方式：from memory/disk cache表示强缓存命中；304且Size极小为协商缓存生效；200加具体字节数说明缓存完全失效。
直接看 DevTools Network 面板里的 index.html 请求，这是唯一可靠、无需代码介入的判断方式。
看 Network 面板的 Size 列和状态码
打开 Chrome / Edge / Safari 的开发者工具 → Network 标签页 → 刷新页面（不是强制刷新）→ 找到 index.html 请求：
-
Size显示from memory cache或from disk cache：强缓存命中，没发网络请求 -
Status是304 Not Modified且Size很小（如123 B）：协商缓存生效，服务端确认未变，复用本地副本 -
Status是200且Size是具体字节数（如2.4 KB）：缓存完全失效，每次都在重新下载 HTML -
TTFB> 200ms +200+ 大Size：典型缓存未生效信号，性能隐患明确
检查响应头是否被正确下发
点开 index.html 请求的 Headers → Response Headers，确认关键字段存在且值合理：
-
Cache-Control值不能是no-cache、no-store或max-age=0（这些等于禁用强缓存） - 静态 HTML 推荐设为
public, max-age=300（5 分钟），带哈希的入口页可设public, max-age=31536000, immutable - 必须有
ETag或Last-Modified（至少一个），否则协商缓存无法触发；Nginx 默认开etag on，但需确认未被覆盖 - 如果用了 CDN，还要查
X-Cache类响应头（如x-cache: HIT），确认 CDN 层也命中了
用 Performance API 辅助验证
在控制台运行以下代码，能拿到本次导航中 HTML 的真实传输行为：
htmlppt.skill
下载
把任意文章或文档内容转换成精美的全屏翻页 HTML 演示文件（幻灯片风格）。当用户发来一篇文章、文档链接、Markdown 内容、或粘贴的文本，并且希望生成演示用的 HTML 时触发。支持任意内容来源：iWiki 链接、KM 链接、本地文件路径、直接粘贴的文本。生成的 HTML 文件保存到本地工作区，并通过企微直接发送给用户。触发词示例：帮我把这篇文章做成PPT、转成演示文档、生成HTML幻灯片、做个演示、转成可以演示的格式、article to deck、make a slide。
立即学习“前端免费学习笔记（深入）”；
const entries = window.performance.getEntriesByType('navigation');
if (entries.length) {
const htmlEntry = entries[0];
console.log('transferSize:', htmlEntry.transferSize); // 0 表示大概率命中强缓存
console.log('encodedBodySize:', htmlEntry.encodedBodySize);
console.log('fetchStart → responseStart:', htmlEntry.responseStart - htmlEntry.fetchStart);
}注意：transferSize === 0 是强缓存的强信号，但某些浏览器在 304 场景下也可能返回 0，所以仍要结合 Network 面板的状态码交叉判断。
常见误判点：别被“刷新”骗了
用户按 F5 或回车是普通刷新，走缓存逻辑；但 Ctrl+Shift+R（或 Cmd+Shift+R）是强制刷新，会跳过所有缓存，永远返回 200 + 新内容。很多开发者反复点强制刷新，然后说“缓存没生效”，其实只是自己没给它生效的机会。
真正验证缓存，必须用普通刷新，且确保页面不是刚首次访问（首次访问无缓存可言）。
