移动端网页冻结前需监听freeze和pagehide事件双保险保存状态，恢复时通过resume事件重置定时器、网络请求和UI；保存内容须轻量可序列化，优先用sessionStorage，真机测试覆盖锁屏等场景。

移动端网页退到后台后被冻结（Frozen），再切回来时容易丢失状态、卡顿或白屏。关键不是等它“醒来”再处理，而是在冻结前存好数据、在恢复时精准还原。

冻结前必须做两件事：监听 freeze + 补漏 pagehide

浏览器进入 Frozen 阶段会触发 freeze 事件，这是最后可靠的保存时机。但有些 Android 或旧版 iOS 浏览器可能跳过 freeze，直接丢弃页面，所以得加一层保险：

• 在 freeze 回调里立刻调用 saveState()，并标记 frozen = true
• 同时监听 pagehide，检查 event.persisted === true 且 frozen !== true，满足就再执行一次保存
• 避免重复写入：用 performance.now() 记录上次保存时间，200ms 内不触发第二次

恢复时靠 resume 事件重置关键逻辑

页面从 Frozen 阶段复苏，会触发 resume 事件。这时 DOM 已恢复，但 JS 执行环境是“冷启动”——定时器没续上、异步请求没返回、UI 状态可能错乱：

• 在 resume 回调中重新初始化定时器（如轮询、倒计时）
• 检查是否有未完成的网络请求，按需重发或取消（比如上传中断、长连接断开）
• 根据保存的状态，手动同步 UI：滚动位置、表单输入、选中项、播放进度等
• 不要依赖 visibilitychange 或 focus，它们在 Frozen → Active 过程中可能不触发或延迟

状态保存内容要精简、可序列化

Frozen 阶段不允许发起新请求、不能操作 DOM、无法使用某些 API（如 Web Audio）。所以保存的数据必须轻量、纯 JSON 可序列化：

• 优先存用户可见的关键状态：当前 tab、表单字段值、列表滚动 offset、视频/音频 currentTime
• 避免存函数、DOM 节点、WebSocket 实例等不可序列化对象
• 用 sessionStorage 存储，比 localStorage 更贴合单页会话生命周期
• 敏感信息（如 token）不建议存这里，resume 时应走服务端校验或静默刷新

测试和兼容要注意真实场景

模拟冻结在桌面 Chrome DevTools 里可行，但移动端行为差异大：

• iOS Safari 对 Frozen 支持较弱，更倾向直接 Terminated 或 Discarded，pagehide + persisted 是主要抓手
• Android Chrome 80+ 支持完整 Lifecycle 事件，但部分定制系统（如三星、华为）可能截断 freeze
• 真机测试时，用“最近任务”切换、锁屏、通知栏下拉等方式触发后台，别只靠 Tab 切换
• Discarded 阶段无事件可监听，所以 saveState 必须在 freeze 和 pagehide 两个节点都覆盖到位

大量免费API接口：立即使用
涵盖生活服务API、金融科技API、企业工商API、等相关的API接口服务。免费API接口可安全、合规地连接上下游，为数据API应用能力赋能！