window.onpagehide与onpageshow监测移动端冻结状态详解

本文深入解析了移动端页面冻结状态监测的核心机制，强调 `event.persisted === true` 是判断页面即将进入 bfcache 或冻结而非彻底卸载的唯一可靠信号，并系统梳理了如何在 `pagehide` 中精准触发状态保存、在 `pageshow` 中安全恢复（需双重校验 `event.persisted` 和 localStorage 存在性）、以及用 `freeze + pagehide` 组合+防抖策略实现兼容性兜底；同时指出恢复时应避免重置整个页面状态，仅同步可序列化字段（如滚动位置、表单值、媒体进度），严禁保存 DOM 节点或函数等不可序列化内容，从而真正解决 iOS Safari 和 Android 浏览器中页面后台冻结导致的状态丢失与重复恢复难题。

pagehide 事件里 event.persisted 是唯一可信信号

移动端浏览器（尤其是 iOS Safari）在页面退到后台时，pagehide 会照常触发，但关键不是它“发生了”，而是 event.persisted 的值。只有当这个布尔值为 true 时，才表示浏览器打算保留页面状态——大概率走 bfcache 或冻结路径，而不是直接卸载。

常见错误现象：只监听 pagehide 就调用保存逻辑，结果在 Chrome Android 上重复触发（比如切到其他 App 又快速切回），或在 Safari 上漏掉冻结前的最后机会。

• event.persisted === false 说明页面即将销毁（如用户点关闭标签），此时保存无意义，甚至可能污染 localStorage
• event.persisted === true 才是真正需要抢救状态的时刻；但要注意，它不保证后续一定能 resume，只是“尽力而为”
• 别在 pagehide 回调里读取 element.scrollHeight 或 getBoundingClientRect() —— 页面已不可见，这些值常返回 0

pageshow 的 event.persisted 必须校验，否则恢复逻辑会错乱

pageshow 确实会在页面从冻结或 bfcache 恢复时触发，但它也会在普通刷新后触发（此时 event.persisted === false）。如果你不加判断就执行恢复，用户刚刷新完表单，瞬间又被 localStorage 里的旧草稿覆盖。

正确做法是双条件检查：

• 必须满足 event.persisted === true
• 且本地存储中确实存在对应键（比如 localStorage.getItem('uiState') 不为 null）
• 恢复完成后，建议立即清除该键或加个已恢复标记（如 localStorage.removeItem('uiState')），避免下次 pageshow 再次误恢复

freeze + pagehide 组合才是防丢保底方案

freeze 事件理论上更贴近“冻结”动作本身，但它有严重兼容短板：iOS Safari 直到 16.4+ 才稳定支持，旧版本静默忽略；部分 Android WebView 根本不派发该事件。所以不能单靠它。

实操上必须组合使用：

• 先注册 freeze 回调，在里面调用 saveState() 并设 frozen = true
• 再注册 pagehide，仅当 event.persisted && !frozen 时补存一次
• 加时间防抖：用 performance.now() 记录上次保存时间，200ms 内不再写入，防止两个事件紧挨着触发导致冗余

恢复时不要重置整个页面状态，只同步可序列化字段

从冻结中 resume 或 pageshow 恢复时，DOM 和事件监听器都还在，只是 JS 执行暂停了。误以为要“重新初始化”会导致定时器重复启动、请求重复发送、UI 状态冲突。

真正该做的只有三件事：

• 滚动位置：用 window.scrollTo(0, saved.scrollY)，别碰 element.scrollTop（元素可能已被重建）
• 表单字段：只设 input.value、textarea.value、select.selectedIndex 这类原始属性
• 播放/编辑进度：如 video.currentTime = saved.time，前提是保存时没存 DOM 节点或函数引用

容易被忽略的是：保存内容必须纯 JSON 可序列化。存了 document.body 或 setTimeout 回调，JSON.stringify() 会静默丢掉字段，恢复时根本拿不到。

本篇关于《window.onpagehide与onpageshow监测移动端冻结状态详解》的介绍就到此结束啦，但是学无止境，想要了解学习更多关于文章的相关知识，请关注golang学习网公众号！