页面可见度

刀刀

0字

0分钟

2026/8/16

JS 页面可见度基础概念

新建一个 HTML，初始化一个变量 n 为 0，设置一个定时器，每隔 10ms 打印一次变量 n，然后 n 自加 1。代码如下所示：

function count() {
  let n = 0
  const timer = setInterval(() => {
    console.log('n', n)
    n++

    if (n >= 300) {
      clearInterval(timer)
    }
  }, 10)
}

count()

运行后打开控制台，每隔 10ms 打印一次，直到 300 停止。但刷新后切换到其他页面，控制台打印速度变慢为 1s 一次。

这是因为浏览器有相应优化策略：用户切换到新页面后，浏览器认为旧页面暂不需要频繁执行定时器，避免资源浪费。

因此页面中的定时器需针对性优化。

JS Page Visibility API

页面可见度 API（ Page Visibility API）提供了一个属性和一个事件。

JS visibilitychange 事件

可以为 document 绑定 visibilitychange 事件方法，在浏览器切换新页面或者页面切换回来（即页面可见度变化后）触发。

document.addEventListener('visibilitychange', function () {
  console.log(1)
})

JS visibilityState 属性

document 有一个 visibilityState 属性，用于获取当前页面的可见度，为 visible 表示可见，为 hidden 表示不可见。

JS 页面可见度的整体逻辑

document.addEventListener('visibilitychange', function () {
  if (document.visibilityState === 'hidden') {
    // 页面不可见，做相应逻辑处理
  } else {
    // 页面可见，做相应逻辑处理
  }
})

JS 页面可见度总体效果

跳转预览：点击跳转

贡献者

duyidao

v_duyilin

刀刀

页面历史

最后编辑于 1 天前

查看完整历史

页面可见度 ​

JS 页面可见度基础概念 ​

JS Page Visibility API ​

JS visibilitychange 事件 ​

JS visibilityState 属性 ​

JS 页面可见度的整体逻辑 ​

JS 页面可见度总体效果 ​

贡献者