如何利用 Page Lifecycle API 管理多标签页下的资源休眠与唤醒-js教程-PHP中文网

freeze 事件是移动端保存状态的最后同步窗口，必须用 localstorage 同步写入并加 try/catch；resume 事件仅恢复执行上下文，不可误作初始化；pagehide 的 persisted 需配合 freeze 补漏；多标签页需隔离 storage key 或用 broadcastchannel 协同。

如何利用 page lifecycle api 管理多标签页下的资源休眠与唤醒

freeze 事件是保存状态的最后同步窗口

移动端浏览器（尤其是 Safari 和 Chrome for Android）在标签页进入后台后，可能不触发 pagehide 或 beforeunload，但一定会在冻结前派发 freeze 事件——这是你唯一能**同步执行 JS 并写入持久化存储**的机会。

常见错误现象：用 visibilitychange 监听 hidden 就存状态，结果页面在分屏或画中画模式下仍 visible 却已被冻结，状态丢失。

只调用 localStorage.setItem() 或 sessionStorage.setItem()；避免 indexedDB 写入（异步、可能被中断）
序列化前做浅拷贝，剔除函数、undefined、DOM 节点、循环引用，否则 JSON.stringify() 抛错会直接退出事件处理器
必须包 try/catch，且 catch 块里不要 throw，浏览器不会等你处理错误

document.addEventListener('freeze', () => {
  try {
    const data = {
      scrollY: window.scrollY,
      draft: document.getElementById('editor')?.value?.slice(0, 1000) || ''
    };
    localStorage.setItem('app-state', JSON.stringify(data));
  } catch (e) {
    // 忽略，确保冻结流程不被阻断
  }
});

resume 事件不是页面重启，而是时间恢复

resume 触发时，DOM 树、所有事件监听器、未 resolve 的 Promise、定时器 ID 都原样存在——它不是 reload，也不是新加载，只是“时钟重新走动”。误判为初始化入口，极易导致重复绑定、双重请求、状态覆盖。

使用场景：仅做轻量校验与补救，比如检查距上次保存是否超时、重置已失效的 setTimeout、拉取过期数据，但不要调用 location.reload() 或重建整个 React/Vue 根实例。

先确认用户真正回到前台：document.visibilityState === 'visible' && document.hasFocus()
避免在 resume 中读取并立即渲染大量 localStorage 数据——可能引发 layout thrashing
如果保存时用了节流（如 200ms 内不重复存），恢复时也建议加时间差判断，防止刚唤醒就立刻触发冗余逻辑

pagehide 的 persisted 判断必须配合 freeze 补漏

部分安卓 Chrome 启用 bfcache 时，pagehide 可能不触发；而 Safari 在冻结前有时会跳过 freeze 直接终止。所以不能只信一个事件。

实操策略：在 pagehide 里检查 event.persisted，若为 true 且尚未标记已冻结（用闭包变量 frozen = false 控制），则立即执行一次保存逻辑——作为 freeze 的兜底。

用 performance.now() 记录上次保存时间戳，200ms 内重复触发直接 return
不要在 pagehide 里做 heavy 操作，它本身可能被中断
别依赖 beforeunload：在冻结场景下该事件完全不触发

多标签页下注意 localStorage 争用与状态污染

多个同源标签页共享同一份 localStorage，若都监听 freeze 并写入相同 key，可能相互覆盖；更糟的是，某标签页在 resume 时读到的是另一标签页存的脏数据。

关键点在于：每个标签页的状态应隔离，或至少带上下文标识。

用 document.location.href 或路由路径哈希生成唯一 storage key，例如 localStorage.setItem(`state-${location.pathname}`, ...)
若需跨标签页协同（如播放器主控权移交），改用 BroadcastChannel + localStorage 组合，由频道消息决定谁该保存/谁该忽略
冻结前写入时加时间戳字段，resume 时比对时间戳，丢弃早于当前页面创建时间的数据

最容易被忽略的其实是「多个标签页同时 resume」——它们几乎同时读写同一份缓存，没加锁机制的话，状态一致性无法保障。真要健壮，得引入简单版本号或使用 indexedDB 的事务（但仅限 resume 阶段，绝不在 freeze 里用）。