页面Visible监听——Page Visibility API

背景

当我们切换标签页时，被切换的页面会被浏览器性能优化处理，例如Interval计时器会优化为1秒执行一次，可能造成计时混乱，在网页游戏的应用中尝尝使用此API来暂停游戏进程。

使用方法

document.addEventListener('visibilitychange', () => {
  if (document.visibilityState === 'hidden') {
    // 页面被切换
  } else if (document.visibilityState === 'visible') {
    // 页面可见
  }
})

通过 visibilitychange 事件监听页面可见变化，利用 document.visibilityState 判断页面可见状态，触发对应的回调机制解决需求。