visibilitychange 是一个事件，用于在 HTML5 的 <iframe>、<object>、<embed> 或 <video> 等元素中监听文档可见性的变化。当这些元素的文档从可见状态变为隐藏状态，或者从隐藏状态变为可见状态时，就会触发该事件。

使用 visibilitychange 事件可以实现一些优化操作，例如：

• 当用户在浏览器上切换标签页或最小化浏览器时，停止视频播放或暂停动画，以减少不必要的 CPU 和内存消耗。
• 当用户重新激活页面时，恢复之前暂停的视频播放或动画。

注意：初始化进入页面不会触发visibilitychange事件

以下是一个使用 visibilitychange 事件的示例代码：

let timer = setInterval(function(){
	console.log('倒计时执行了')
},1000)

function handleVisibilityChange() {
  if (document.hidden) {
	// 页面隐藏时执行的操作，例如暂停视频播放
	clearInterval(timer);
	console.log('倒计时停止了')
  } else {
	// 页面可见时执行的操作，例如恢复视频播放
	timer = setInterval(function(){
		console.log('倒计时执行了')
	},1000)
  }
}

// 监听 visibilitychange 事件
document.addEventListener('visibilitychange', handleVisibilityChange);

在上述代码中，通过 document.hidden 属性可以判断当前页面是否处于隐藏状态。如果页面隐藏，则停止计时器；如果页面可见，则开启定时器。通过监听 visibilitychange 事件，可以实现对页面可见性的响应，从而进行相应的操作。