页面可见性

页面可见性：就是对于用户来说，页面是显示还是隐藏，所谓显示的页面，就是我们正在看的页面；隐藏的页面，就是我们没有看的页面。因为，我们一次可以打开好多标签页面来回切换着，始终只有一个页面在我们眼前，其他页面就是隐藏的，还有一种就是把浏览器最小化，所有的页面就都不可见了。

API 很简单，document.hidden 就返回一个布尔值，如果是 true，表示页面可见，false 则表示页面隐藏。不同页面之间来回切换，触发 visibilitychange 事件。还有一个 document.visibilityState，表示页面所处的状态，取值：visible、hidden 等四个。

document.addEventListener("visibilitychange", function() {
    if (document.hidden) {
        document.title = "hidden";
    } else {
        document.title = "visibile";
    }
});

我们打开这个页面，然后再打开另一个页面，来回点击这两个页面，当我们看到这个页面时，标题显示 visiable，当我们看另一个页面时，标题显示 hidden。

动画，视频，音频都可以在页面显示时打开，在页面隐藏时关闭。

补充

补充：Page Visibility API 解决了一个具体问题——"避免在用户看不到的标签页里浪费资源"。

visibilityState 取值

取值	含义
`visible`	页面至少部分可见
`hidden`	页面完全不可见（如切换标签、最小化）
`prerender`	页面正在预渲染中
`unloaded`	页面即将被卸载