BackForward Cache（BFCache）启用与导航性能优化实践

BackForward Cache（BFCache）启用与导航性能优化实践概述BFCache 在前进/后退导航时复用完整页面快照，能够显著降低 `TTFB/LCP` 并提升交互连贯性。合理规避阻塞因素即可获得高命中率。阻塞因素排查清单`unload`/`beforeunload` 事件监听；同步 XHR；后台计时器与未清理的 WebSocket/Media；非恢复式的存储/网络锁。实践示例// 使用 pagehide/pageshow 管理资源，并保持 BFCache 可用 addEventListener('pagehide', (e) => { if (e.persisted) { // 页面进入缓存：暂停非必要轮询或动画 } }); addEventListener('pageshow', (e) => { if (e.persisted) { // 从缓存恢复：重启必要任务，避免重复初始化 } }); // 避免使用 unload/beforeunload；改用 visibilitychange document.addEventListener('visibilitychange', () => { if (document.visibilityState === 'hidden') { // 上报或轻量清理任务 } }); 验证方法测试环境：Windows 11 / macOS 14；Chrome 86+ / Firefox 94+；Safari 16+。指标：统计 BFCache 命中率；对比回退/前进导航的 `TTFB/LCP/INP`；工具：使用 `chrome://bfcache` 与 DevTools BFCache 检查器验证阻塞项。注意事项避免在隐藏态保持高资源占用；按需暂停任务。对登录态页面谨慎评估缓存恢复逻辑。结合路由框架提供的导航钩子实现一致恢复流程。