---

title: BFCache（前进后退缓存）最佳实践：避免阻断与性能收益

keywords:

• BFCache
• back-forward cache
• pageshow/pagehide
• beforeunload
• bfcache-blockers

description: 解释 BFCache 的工作原理与阻断因素，提供事件处理与 API 使用的最佳实践，最大化导航返回/前进的性能收益。

date: 2025-11-27

sources:

• https://web.dev/bfcache/
• https://developer.chrome.com/docs/web-platform/bfcache/
• https://developer.mozilla.org/en-US/docs/Web/API/PageTransitionEvent

categories:

• 文章资讯
• 编程技术

---

概述

BFCache 在返回/前进导航时直接复用页面快照，绕过重新加载与脚本初始化。合理设计事件与资源策略可显著提升真实用户性能。

常见阻断（已验证）

• 使用 unload/beforeunload（建议改为 pagehide/visibilitychange）（来源）
• 未处理的 window.opener 交互、跨进程资源锁等（来源）
• 非幂等的网络状态或持久连接（WebSocket/RTC）未在隐藏时正确暂停（来源）

实践建议

• 事件：使用 pageshow/pagehide 管理恢复与暂停；监听 persisted 识别 BFCache 命中（来源）
• 状态恢复：在 pageshow 恢复定时器/动画与连接；在 pagehide 清理资源
• 观测：采集 BFCache 命中率与回退性能指标，优化阻断点