谷歌浏览器html5缓存致异常_清理谷歌html5缓存法【清缓】

chrome 90+已彻底移除appCache，但残留缓存仍会导致白屏等异常；必须通过开发者工具Application面板→Clear storage→勾选Application cache手动清除，且需严格匹配协议、域名、端口。

Chrome 的 Application Cache（AppCache）早已废弃，但残留仍会干扰页面

Chrome 从 90 版本起彻底移除了对 Application Cache（即 manifest 缓存）的支持，但如果你的页面曾用过 cache.manifest，或第三方脚本注册过 window.applicationCache，浏览器可能仍保留着旧缓存条目，导致资源加载失败、白屏、js 不执行等异常——这不是普通 http 缓存，清“浏览记录”或按 Ctrl+Shift+Del 默认勾选项根本清不掉。

手动清除 html5 AppCache 的唯一可靠路径

必须进 Chrome 的开发者工具专用面板操作，且需匹配当前页面协议 + 域名 + 端口（哪怕只是 localhost:3000 和 localhost:3001 也被视为不同源）：

• 打开目标页面（确保 URL 完全匹配历史使用缓存的地址）
• 按 F12 → 切到 Application 标签页 → 左侧选 Clear storage
• 勾选 Application cache（注意不是 “Cache storage” 或 “Service workers”）
• 点击 Clear site data

如果页面已无法加载，可尝试在隐身窗口中打开该 URL（确保无插件干扰），再执行上述步骤。

Cache Storage 和 Service Workers 是现代替代方案，但常被误认为“html5 缓存”

很多人遇到的“清完还是旧页面”，实际是 Service Worker 控制了缓存逻辑，它和废弃的 Application Cache 互不兼容，但共存时优先级更高。检查方式：

立即学习“前端免费学习笔记（深入）”；

• 在 Application → Service Workers 面板，看是否有激活/等待中的 worker
• 若有，勾选 Update on reload，然后刷新；或点 Unregister 彻底卸载
• 同时勾选 Cache Storage 一并清除（它由 Service Worker 脚本写入，如 caches.open('v1')）

若你没主动写 Service Worker，可能是引入的框架（如 Create react App、vue CLI）或 CDN SDK 自动注册了——查 navigator.serviceWorker.getRegistrations() 就能确认。

命令行强制禁用所有 HTML5 缓存（仅限本地调试）

开发阶段想彻底规避缓存干扰，启动 Chrome 时加参数比反复清理更高效：

chrome.exe --disable-application-cache --disable-cache --disk-cache-size=1 --media-cache-size=1 --disable-reading-from-canvas

macos/linux 替换为 google-chrome 命令；windows 用户注意路径含空格需加引号。此方式跳过磁盘缓存与 AppCache 初始化，但不会影响内存中已激活的 Service Worker，所以仍建议配合面板里手动 unregister。

真正麻烦的是跨源缓存残留：比如你用 https://a.example.com 注册过 manifest，后来切到 https://b.example.com，Chrome 仍可能因同域前缀复用缓存策略——这种场景下，必须分别对两个完整 URL 执行 Clear storage 操作，漏一个就可能复现异常。