浏览器无法监听 discarded 状态,因 js 上下文已被彻底销毁;唯一可靠保存时机是 freeze 和 pagehide with persisted === true,需在此二节点存快照,并在 pageshow 中通过 navigation type 与时间戳交叉验证 discard 后冷启动。

浏览器主动回收页面(discarded)时,JS 已被彻底终止,**没有任何事件能捕获该过程**。所谓“还原”,本质是提前存好快照,并在用户重新打开时识别出这是 discard 后的冷启动,再手动恢复——不是监听 discarded,而是绕过它。
为什么 discarded 状态无法监听也无法响应
页面进入 discarded 阶段时,浏览器已销毁整个 JS 执行上下文:所有定时器、fetch、setTimeout、beforeunload 全部中断,连 pagehide 都不会触发。你唯一能做的,是在它发生前就完成保存。
-
discarded不是生命周期事件,而是一个事后状态;没有on discarded这种东西 - 试图在
pagehide里加判断event.persisted === false来“捕获 discard”是错的——这个值为false只表示本次加载不是从 bfcache 恢复,可能是用户点了刷新、新开 Tab、或 discard 后重建,三者无法区分 - 真机测试中,Android Chrome 和 iOS Safari 在锁屏 + 后台驻留 2–5 分钟后大概率触发 discard,但无日志、无回调、无 warning
真正可靠的保存时机只有两个:freeze 和 pagehide with persisted === true
这两个事件是 JS 尚未被冻结/卸载前最后的安全窗口,必须在这两个节点都写入快照,缺一不可。
-
freeze:页面即将进入 Frozen 阶段,JS 还可执行,是最后的“保命点”。此时应调用localStorage.setItem()或indexedDB写入轻量状态(如表单值、滚动位置、当前 tab ID) -
pagehide且event.persisted === true:说明页面将进 bfcache,后续可能 resume。也应保存一次,避免 freeze 未触发(某些低内存设备会跳过 freeze 直接 discard) - 避免用
navigator.sendBeacon()做关键保存——它在freeze中可能被浏览器丢弃;keepalive: true不保证送达 - 保存内容必须可序列化,不要存函数、DOM 引用、
Map/Set实例等;优先用sessionStorage(比localStorage更干净,关闭 Tab 即清空)
如何在 pageshow 中识别 discard 后的冷启动并还原
用户切回被 discard 的 Tab 时,浏览器会发起全新 navigation,触发 pageshow 且 event.persisted === false。但仅凭这个不能断定是 discard,需交叉验证:
- 检查
performance.getEntriesByType('navigation')[0]?.type是否为'navigate'或'reload'(不是'back_forward') - 读取
localStorage中上次保存的时间戳,若距Date.now()> 300000(5 分钟),基本可判定已被 discard(Frozen 通常撑不过 2–3 分钟) - 可主动在保存时写入标记:
localStorage.setItem('_reloaded', '1'),并在pageshow中检测并立即清除,避免误判 - 还原时不要直接操作 DOM;先 restore 数据模型,再批量更新 UI。例如:先设
formData对象,再遍历input[name]赋值,避免反复 reflow
容易被忽略的关键细节
Discard 后重建的页面,document 是全新实例,所有之前挂载的事件监听器、IntersectionObserver、ResizeObserver 全部丢失。还原不只是填表单、滚位置,还要重装这些“活”的能力。
- 滚动位置恢复后,记得调用
window.scrollTo()并加{ behavior: 'auto' },避免 Safari 下失效 - 如果用了 React/Vue,别只存组件 state——要存路由参数、URL hash、甚至
history.state,否则 SSR 或 CSR 切换时状态错乱 - 服务端生成的 token、临时凭证类数据,不要存在客户端快照里;restore 后应立刻校验有效性,必要时静默刷新
- 真机测试必须覆盖锁屏 → 解锁 → 切回网页全链路,模拟器和桌面 DevTools 的
freeze按钮无法触发真实 discard
大量免费API接口:立即使用
涵盖生活服务API、金融科技API、企业工商API、等相关的API接口服务。免费API接口可安全、合规地连接上下游,为数据API应用能力赋能!











