如何利用 Page Lifecycle API 还原被浏览器系统主动回收的页面业务现场

文章小白一枚，正在不断学习积累知识，现将学习到的知识记录一下，也是将我的所得分享给大家！而今天这篇文章《如何利用 Page Lifecycle API 还原被浏览器系统主动回收的页面业务现场》带大家来了解一下##content_title##，希望对大家的知识积累有所帮助，从而弥补自己的不足，助力实战开发！

discard后JS环境已终止，无法监听；唯一可靠信号是pageshow且persisted===false，需结合URL标记、localStorage时间戳、navigation.type交叉验证；保存现场仅能在freeze事件或pagehide且persisted===true时完成。

页面被浏览器系统主动回收（discarded）后，JavaScript 执行环境已彻底终止，无法监听或响应该状态。还原业务现场的关键不是“捕获 discard”，而是在它发生前存好快照，并在用户重新打开时精准识别冷启动。

唯一可依赖的恢复线索：pageshow + persisted === false

当用户从任务管理器或后台切回一个已被 discard 的 Tab，浏览器会发起全新加载，此时触发 pageshow 事件，且 event.persisted === false。这与 frozen 后 resume 的 true 正好相反——它是 discard 后重建的最可靠信号。

但仅凭 persisted === false 不够，需交叉验证：

• 检查 URL 是否含 ?_reloaded=1 等标记（需你在上一次 pagehide 或 freeze 中主动写入 localStorage）
• 读取 localStorage 中保存的状态时间戳，若距当前时间 > 5 分钟，基本可判定已被 discard（frozen 通常撑不过 2–3 分钟）
• 调用 performance.getEntriesByType('navigation')[0]?.type，值为 'reload' 或 'navigate' 也支持 discard 后重建的判断

真正能保存现场的两个安全时机

discard 不可逆，必须在冻结（frozen）前完成持久化。可靠窗口只有两个：

• freeze 事件：页面即将冻结，JS 仍可执行，DOM 可读，是最后同步保存机会
• pagehide 且 event.persisted === true：说明页面将进入 bfcache 或 frozen 状态，也应立即保存

在这两个时机中，优先使用 localStorage.setItem() 或 indexedDB 存储轻量、可序列化的数据（如表单值、滚动位置、选中 tab）。避免依赖 navigator.sendBeacon()，它在 freeze 中可能无法发出。

还原逻辑必须区分冷启动与热恢复

用户回到页面时，要立刻判断加载类型：

• 冷启动（discard 后重建）：pageshow.persisted === false、document.hasFocus() === true、无残留 DOM 状态 → 从 localStorage 或服务端拉取最近快照，再手动 restore 表单、滚动条、播放进度等
• 热恢复（frozen → resume）：触发 resume 事件，DOM 和 JS 上下文原样保留 → 只需重置已失效的定时器、检查网络连接、拉取过期数据，不要 reload 或重建根实例

还原后，务必清除旧快照标记（如删掉 localStorage 中的临时键），防止下次误用。

移动端特别注意：别信 visibilitychange 和 beforeunload

visibilitychange 只反映可见性，不表示冻结；beforeunload 在 discard 场景下完全不可靠。iOS Safari 旧版本甚至不触发 freeze，部分安卓 WebView 也会跳过它。因此必须采用 freeze + pagehide(persisted=true) 双监听策略，并用 performance.now() 防抖，200ms 内不重复保存。

状态序列化时，只保存原始值（字符串、数字、布尔、纯对象），剔除 DOM 节点、函数、EventTarget 等不可序列化内容。例如读 input.value 而非绑定整个元素，记 window.scrollY 而非某个容器的 scrollTop。

今天带大家了解了的相关知识，希望对你有所帮助；关于文章的技术知识我们会一点点深入介绍，欢迎大家关注golang学习网公众号，一起学习编程~