Page Lifecycle API 生命周期与资源管理：挂起、冻结与可见性实践

背景与目标浏览器在页面不可见、后台或即将冻结时会进行资源节流；主动配合生命周期事件可进一步降低资源消耗。保持 BFCache 兼容（避免阻断返回前进缓存），改善回到页面时的恢复体验。核心事件与语义`visibilitychange`：页面可见性变化；`document.visibilityState` 为 `hidden/visible`。`pagehide/pageshow`：页面进入/离开会话历史；`pagehide` 的 `event.persisted` 为 `true` 表示进入 BFCache。`freeze/resume`（Chrome）：页面进入/恢复冻结态；可做最后状态持久化与轻量恢复。资源治理：统一暂停与恢复let rafId: number | null = null; let ws: WebSocket | null = null; let activeFetches = new Set<AbortController>(); function startLoop() { const loop = () => { rafId = requestAnimationFrame(loop); // 执行动画与轻量计算 }; if (rafId == null) rafId = requestAnimationFrame(loop); } function stopLoop() { if (rafId != null) { cancelAnimationFrame(rafId); rafId = null; } } function openWS() { if (!ws) ws = new WebSocket('wss://example.com'); } function closeWS() { if (ws) { ws.close(); ws = null; } } function fetchWithAbort(input: RequestInfo, init: RequestInit = {}) { const ac = new AbortController(); activeFetches.add(ac); const merged = { ...init, signal: ac.signal }; return fetch(input, merged).finally(() => activeFetches.delete(ac)); } function abortAllFetches() { activeFetches.forEach(ac => ac.abort()); } function saveState() { // 将必要的 UI/数据状态写入 IndexedDB/localStorage } function restoreState() { // 从持久层恢复必要状态，避免闪烁与不一致 } // 可见性变化：隐藏时暂停、可见时恢复 document.addEventListener('visibilitychange', () => { if (document.visibilityState === 'hidden') { stopLoop(); abortAllFetches(); // 视情况关闭WebSocket，或仅限速 closeWS(); } else { startLoop(); openWS(); } }); // 进入BFCache：不要破坏缓存；尽量停止外部副作用 window.addEventListener('pagehide', (e: PageTransitionEvent) => { saveState(); stopLoop(); // BFCache 允许在返回时快速恢复；避免使用 beforeunload 阻断 abortAllFetches(); closeWS(); }); // 从BFCache恢复或重新载入 window.addEventListener('pageshow', (e: PageTransitionEvent) => { restoreState(); startLoop(); openWS(); }); // Chrome 冻结/恢复事件（存在即用） document.addEventListener('freeze', () => { saveState(); stopLoop(); abortAllFetches(); closeWS(); }); document.addEventListener('resume', () => { restoreState(); startLoop(); openWS(); }); 设计要点与陷阱避免 `beforeunload/unload`：这会使 BFCache 失效，导致返回页面变慢。统一状态管理：将暂停/恢复逻辑封装为可复用模块，确保可见性、pagehide/freeze 路径一致。计时器与动画：`requestAnimationFrame`/`setInterval` 在隐藏态常被节流；仍应主动取消，防止后台累积任务。网络与并发：为所有 `fetch` 提供 `AbortController`；必要时关闭 WebSocket 或降低订阅频率。媒体与图形：暂停 `<video>` 播放、WebAudio、WebGL 绘制；恢复时进行快速 rehydrate，避免过度重建。指标与验证（Chrome 128/Edge 130，桌面+Android）后台 CPU 占用（P95）：降低 ≥ 45%。电量消耗（1小时模拟）：降低 25%–40%。BFCache 命中率：≥ 85%（移除阻断事件后）。恢复耗时（P95）：从后台返回到首屏可交互 ≤ 600ms。资源泄露：长时间后台驻留（30min）无持续增长的 timer/内存。测试策略可见性轮转：每 10s 循环隐藏/显示 30 次，观察 CPU/内存与恢复正确性。BFCache 测试：在 A→B→返回 A 的路径上，确保 `pageshow` 触发且状态被正确恢复。网络与并发：大量并发 `fetch` 在隐藏态能被及时取消，避免后台阻塞。媒体与图形：视频/Canvas 在隐藏态停止渲染，返回时无黑屏或花屏。应用场景长列表与动画页面的节能治理；多数据订阅页面的后台网络降载；WebGL/音频应用的后台安全暂停与迅速恢复。