如何利用window.onpageshow事件检测页面是否从BFCache恢复，进而重启异步逻辑？

本文共计648个文字，预计阅读时间需要3分钟。

可以使用以下内容替换原创新内容：

为什么必须用 pageshow 而不是 mounted 或 onload

Vue 的 onMounted、React 的 useEffect 或原生 DOMContentLoaded/load 在 BFCache 恢复时**完全不会触发**——页面不是重新加载，而是直接解冻。依赖这些钩子的初始化逻辑会静默跳过，导致：

• 定时器未重启（比如每 30 秒拉取一次数据的 setInterval）
• AJAX 轮询停止，界面卡在旧状态
• WebSocket 连接断开但未重连
• 表单校验规则未重新绑定，输入无响应

如何安全地重新激活异步逻辑

在 pageshow 回调中，仅当 event.persisted === true 时执行恢复动作。关键原则是：只唤醒、不重建；避免重复注册或内存泄漏。

• 对已存在的定时器，先 clearInterval 再 setInterval（或用标志位控制是否已启动）
• 检查 WebSocket 实例的 readyState，CLOSED 或 CONNECTING 时主动重连
• 对轮询请求，可加防抖：延迟 100ms 后发起首次拉取，避免和页面刚恢复时的其他逻辑冲突
• 避免在 pageshow 中调用 location.reload()——它会丢失当前 JS 状态，且破坏用户体验

典型代码结构（Vue 3 setup script 示例）

以下写法兼顾兼容性与可维护性，已在 iOS Safari 17+、Chrome Android 120+、微信 WebView 8.0.49+ 验证有效：

onMounted(() => {
  const handlePageShow = (e) => {
    if (e.persisted) {
      // 页面从 BFCache 恢复
      resumeAsyncTasks(); // 自定义恢复函数
    }
  };
  window.addEventListener('pageshow', handlePageShow);
  onBeforeUnmount(() => {
    window.removeEventListener('pageshow', handlePageShow);
  });
});

补充：区分 BFCache 恢复与真实刷新

单靠 persisted 只能知道“是不是缓存恢复”，但不能确定“是不是用户按了刷新键”。如需进一步识别真实刷新（例如清空临时 token），应结合 window.name：

• 首次加载或刷新后，window.name 为空或非预期值 → 可设为 'fresh' 并执行初始化
• 若 window.name === 'fresh' 且 e.persisted === true → 是缓存恢复，执行恢复逻辑即可
• 若 window.name !== 'fresh' 且 e.persisted === false → 很可能是真实刷新，需重置更深层状态