监听页面的可见性变化，在很多场景下非常实用，比如跟踪用户行为、节省资源、优化性能等。

1 代码示例

		document.addEventListener("visibilitychange", () => {
  			if (document.visibilityState === "visible") {
    			alert("当前页面已切换，变得可见了！");
  			}
		});

效果如下：

刷新页面不会触发，只有进行浏览器页签切换的时候才会触发。

2 代码解析

document.addEventListener("visibilitychange", () => {...})

使用 addEventListener 方法为文档对象 document 添加一个事件监听器，监听的事件类型为 visibilitychange 。

当页面的可见性状态发生改变时，这个事件会被触发。

if (document.visibilityState === "visible") {...}

当 visibilitychange 事件被触发后，检查 document.visibilityState 的值，以防止只做一次浏览器页签切换时，会触发两次事件的问题。

document.visibilityState是一个非常有用的属性，它提供了关于文档当前可见性状态的信息，在现代浏览器中已经得到了广泛的支持。

它有三种取值：

visible：

当文档内容至少一部分在屏幕上可见时，document.visibilityState 的值为 visible。

这意味着用户可以看到页面的一部分或全部内容。例如，当用户正在浏览网页，并且该网页处于当前的浏览器窗口中可见的状态。

hidden：

当文档完全不可见时，该属性的值为 hidden。

这可能发生在多种情况下，比如用户切换到了其他标签页、最小化了浏览器窗口或者操作系统进入了锁屏状态等。在这些情况下，网页对于用户来说是不可见的，浏览器可以采取一些优化措施，例如暂停不必要的动画、减少后台任务的资源占用等。

prerender：

这个状态表示页面正在预渲染。预渲染是一种浏览器技术，它在后台预先加载和渲染一个页面，以便在用户实际访问该页面时能够更快地显示。

然而，目前并非所有的浏览器都支持预渲染，并且使用预渲染也需要谨慎考虑，因为它可能会消耗一定的系统资源