How to disable bfcache and browser disk cache for a page?

随着浏览器性能优化技术的不断演进，bfcache（后退/前进缓存） 与 磁盘缓存（disk cache） 已成为提升用户浏览体验的关键机制。然而，在某些场景下，这些缓存会导致页面状态异常、数据过期或敏感信息泄露，迫使开发者主动为其禁用。本文将从原理到实践，系统解析如何针对单个网页禁用 bfcache 和浏览器磁盘缓存。

一、bfcache 与磁盘缓存的本质区别

在深入禁用方法前，需明确二者差异：

• bfcache：浏览器在用户离开页面时，将整个页面（包括 JavaScript 堆、DOM 状态、网络连接等）完整保存在内存中。当用户点击“后退”或“前进”按钮时，浏览器直接从内存恢复页面，无需重新加载。其特点是保留所有运行时状态，但仅用于导航历史。
• 磁盘缓存：浏览器将静态资源（HTML、CSS、JS、图片等）写入硬盘，下次访问相同 URL 时直接从磁盘读取，避免重复网络请求。它不保留页面运行时状态，但影响首次加载后的所有后续访问。

二、为何需要禁用缓存？

典型场景包括：

1. 实时性敏感页面：股票行情、在线竞拍、直播弹幕——若使用 bfcache 恢复，页面可能显示过时数据。
2. 安全受限页面：登录后页面、支付确认页，bfcache 可能使已登出用户仍看到敏感信息。
3. 单页应用（SPA）状态冲突：若页面依赖 URL 参数或 sessionStorage 动态渲染，bfcache 恢复的旧 DOM 会与当前路由冲突。
4. 广告跟踪/分析需求：磁盘缓存可能导致“独立访客”计数不准，或 A/B 测试版本错乱。

三、禁用 bfcache 的实战方法

方法1：通过 HTTP 响应头控制（推荐）

bfcache 的行为由浏览器引擎决定，但开发者可通过 Cache-Control 和 no-store 指令间接阻止。

Cache-Control: no-store

注意：此头会同时禁用磁盘缓存和 bfcache。若只想禁用 bfcache 而保留磁盘缓存，需使用 no-cache 配合 must-revalidate，但现代浏览器（如 Chrome）对 bfcache 的判定更严格——仅在 no-store 时完全禁用 bfcache。

方法2：使用 unload 事件监听（部分兼容）

某些浏览器（如 Safari）在页面进入 bfcache 前会触发 unload 事件，开发者可在其中执行清理：

window.addEventListener('unload', function() {
  // 锁定页面，阻止 bfcache
});

但 Chrome 已不再为 bfcache 触发 unload，因此该方法局限性较大。

方法3：设置 beforeunload 事件（不完全可靠）

window.addEventListener('beforeunload', function(e) {
  e.preventDefault();
});

此方法仅提示用户有未保存数据，实际并不阻止 bfcache 存储。

方法4：使用 pagehide 事件配合 persisted 属性（最可靠）

window.addEventListener('pagehide', function(event) {
  if (event.persisted) {
    // 页面即将被放入 bfcache，强制重定向或清理
    window.location.reload();
  }
});

当用户从 bfcache 恢复页面时，pageshow 事件中 event.persisted 为 true，可在此重新加载：

window.addEventListener('pageshow', function(event) {
  if (event.persisted) {
    window.location.reload();
  }
});

四、禁用磁盘缓存的精确控制

使用 HTTP 头（全局禁用）

Cache-Control: no-cache, no-store, must-revalidate
Pragma: no-cache
Expires: 0

• no-store 彻底禁止缓存（包括磁盘和内存）。
• no-cache 允许缓存但必须向服务器验证。

针对指定资源禁用

若只禁用 HTML 页面缓存，但同时希望 CSS/JS 仍可缓存，可单独为 HTML 响应设置 Cache-Control: no-store，而资源文件设置 max-age。

使用 Service Worker 拦截请求

在 Service Worker 的 fetch 事件中，对指定 URL 返回网络优先策略，不写入缓存：

self.addEventListener('fetch', event => {
  if (event.request.url.includes('/sensitive-page')) {
    event.respondWith(fetch(event.request));
  }
});

HTML Meta 标签（不推荐，效果有限）

<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">

现代浏览器对 meta 标签的遵守程度不一，仅靠此方法不可靠。

五、浏览器兼容性总结

六、最佳实践建议

1. 优先使用 HTTP 响应头：Cache-Control: no-store 是跨浏览器最可靠的方式，同时解决 bfcache 和磁盘缓存问题。
2. 配合 pageshow 事件：对于无法修改服务器头的场景（如 CDN 或静态托管），在 HTML 中注入 JavaScript 检测 event.persisted 并强制刷新。
3. 避免滥用禁用：缓存是性能利器，仅在确实需要实时性、安全性的页面禁用，其他页面应充分利用缓存的优势。
4. 测试验证：在 Chrome DevTools 的 Application 面板中可查看当前页面的缓存状态；通过勾选“Disable cache”可模拟无缓存环境。

七、结语

bfcache 和磁盘缓存是浏览器性能优化的双刃剑。开发者应深入理解其工作机制，根据页面特性精准控制。通过 HTTP 响应头与 JavaScript 事件相结合，可实现细粒度的缓存禁用策略，在保证用户体验的同时，满足业务对实时性和安全性的严苛要求。未来，随着浏览器缓存策略的持续演化，开发者需保持跟进，以应对新版本带来的行为变化。