Page Visibility API：visibilitychange 与后台策略

--- title: "Page Visibility API：visibilitychange 与后台策略" keywords: - Page Visibility - document.hidden - visibilitychange - 后台策略 - 节能 description: "介绍页面可见性状态与事件，用于暂停动画与轮询、降低后台开销，结合生命周期与用户体验策略，提供示例与参考。" categories: - 应用软件 - 编程开发 --- 概述 Page Visibility API 暴露页面是否可见（`document.hidden`）与可见性变化事件。用于在后台暂停动画、降低轮询频率、推迟非关键任务，从而提升性能与电池寿命。 示例 ```js function onVis() { if (document.hidden) { pauseAnimations(); stopPolling() } else { resumeAnimations(); startPolling() } } document.addEventListener('visibilitychange', onVis) onVis() ``` 工程建议 - 与生命周期协作：结合 Page Lifecycle 的冻结/恢复；避免丢失状态。 - 用户体验：在后台暂停非关键任务；保持必要的前台通知。 - 观测：记录可见性切换事件与资源使用变化。 参考与验证 - MDN Page Visibility 文档：https://developer.mozilla.org/docs/Web/API/Page_Visibility_API - web.dev 生命周期与可见性指南：https://web.dev/articles/page-lifecycle-api