Page Lifecycle API 页面冻结与恢复策略实践

概述Page Lifecycle 相关事件（`visibilitychange`、`pagehide`、`pageshow`）可帮助页面在后台、导航与回退（BFCache）过程中合理暂停与恢复，提升资源利用与一致性。关键参数与概念- `document.visibilityState`: `visiblehidden`。`visibilitychange`: 前后台切换时触发，用于暂停动画/定时器与网络轮询。`pagehide/pageshow`: 导航离开与返回时触发，兼容 BFCache 回返。实践示例// 前后台切换 document.addEventListener('visibilitychange', () => { const hidden = document.visibilityState === 'hidden' if (hidden) { // 暂停动画与定时器 window.cancelAnimationFrame(window.__raf) clearInterval(window.__poll) } else { // 恢复必要任务 scheduleRaf() } }) // 导航离开/返回 window.addEventListener('pagehide', (e) => { // 持久化必要状态（localStorage/IndexedDB） persistState() }) window.addEventListener('pageshow', (e) => { const fromBFCache = e.persisted === true // BFCache 返回不应强制刷新数据；轻量校验即可 restoreState({ fromBFCache }) }) 验证方法BFCache：通过浏览器 DevTools 查看是否启用 BFCache；验证 `pageshow.persisted`。资源：后台时 CPU/网络占用显著下降，恢复后状态一致无闪烁。可访问性：切换过程中焦点与可见性不混乱。注意事项避免在 `pagehide` 中进行阻塞操作；尽量使用异步持久化。对实时连接（WebSocket/WebTransport）在后台降速或暂停，避免无意义占用。与 RUM 采集协作，记录 BFCache 返回与前后台切换事件。