如何通过 window.onpageshow 判断页面是否从 BFCache 恢复以重新激活异步逻辑-js教程-PHP中文网

必须用pageshow而非mounted或onload，因为bfcache恢复时后者完全不触发，导致定时器、轮询、websocket等异步逻辑静默失效；pageshow的event.persisted为true时才表示热态恢复，需手动唤醒而非重建。

如何通过 window.onpageshow 判断页面是否从 bfcache 恢复以重新激活异步逻辑

可以通过监听 pageshow 事件并检查其 event.persisted 属性来准确判断页面是否从 BFCache 恢复。只有当该值为 true 时，才表示页面是“冷启动跳过、热态恢复”，此时 DOM 和 JS 执行上下文完整保留，但异步逻辑（如定时器、轮询、未完成的 Promise、WebSocket 心跳等）很可能已暂停或失效，需手动重新激活。

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

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

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

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

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

DevChat

DevChat是一款AI大模型工具，开源的支持多款大模型的AI编程助手。

下载

对已存在的定时器，先 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);
  });
});