"Page Visibility API：visibilitychange 与后台策略"

---

title: "Page Visibility API：visibilitychange 与后台策略"

keywords:

• Page Visibility
• document.hidden
• visibilitychange
• 后台策略
• 节能

description: "介绍页面可见性状态与事件，用于暂停动画与轮询、降低后台开销，结合生命周期与用户体验策略，提供示例与参考。"

categories:

• 应用软件
• 编程开发

---

概述

Page Visibility API 暴露页面是否可见（document.hidden）与可见性变化事件。用于在后台暂停动画、降低轮询频率、推迟非关键任务，从而提升性能与电池寿命。

示例

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