检测页面可见性主要依赖于page visibility api，通过监听 visibilitychange 事件并读取 document.visibilitystate 属性判断状态；document.visibilitystate 包含 visible、hidden、prerender 和 unloaded 四种值；示例代码通过监听页面可见性变化实现动画的暂停与恢复；该api常用于优化视频播放，在页面不可见时暂停视频以节省资源；在spa中需结合路由逻辑或生命周期钩子确保正确响应可见性变化；对不支持的浏览器可通过检测 document.hidden 属性并提供备用方案兼容。
检测页面可见性主要依赖于Page Visibility API，它允许你了解用户是否正在查看你的页面，这对于优化资源使用和提供更佳的用户体验至关重要。
Page Visibility API应用场景解析
解决方案
要检测页面可见性，你需要监听 visibilitychange 事件，并通过 document.visibilityState 属性来判断页面的可见状态。document.visibilityState 可能的值包括：
-
visible: 页面内容至少部分可见。 -
hidden: 页面完全不可见。 -
prerender: 页面正在后台预渲染，尚未可见。 -
unloaded: 页面正在从内存中卸载。
一个简单的示例：
document.addEventListener("visibilitychange", function() {
if (document.visibilityState === 'visible') {
console.log("页面可见");
// 在页面可见时执行的操作，例如恢复动画
} else {
console.log("页面不可见");
// 在页面不可见时执行的操作，例如暂停动画
}
});这个代码片段监听了 visibilitychange 事件。当事件触发时，它会检查 document.visibilityState 的值，并根据页面的可见性执行相应的操作。例如，如果页面变为可见，可以恢复之前暂停的动画；如果页面变为不可见，可以暂停动画以节省资源。
如何利用Page Visibility API优化视频播放？
视频播放是Page Visibility API的一个典型应用场景。当用户切换到其他标签页或最小化浏览器窗口时，可以暂停视频播放，避免浪费带宽和CPU资源。反之，当用户返回页面时，可以自动恢复播放。
let video = document.getElementById('myVideo');
document.addEventListener("visibilitychange", function() {
if (document.visibilityState === 'visible') {
if(video.paused){
video.play();
}
} else {
video.pause();
}
});这段代码获取了一个 id 为 myVideo 的视频元素，并在 visibilitychange 事件触发时，根据页面的可见性来控制视频的播放和暂停。如果页面变为可见，且视频处于暂停状态，则恢复播放；如果页面变为不可见，则暂停视频。
Page Visibility API对单页应用（SPA）有什么影响？
在单页应用中，页面切换通常不会触发完整的页面重新加载。这意味着，如果没有正确处理，visibilitychange 事件可能会被忽略。因此，在SPA中，需要确保在路由切换时正确地处理页面可见性。
一种方法是在路由切换时手动触发 visibilitychange 事件。但这可能会比较复杂。更简单的方法是，确保你的应用始终监听 visibilitychange 事件，并根据 document.visibilityState 的值来更新应用的状态。
另外，对于SPA来说，使用框架提供的生命周期钩子函数也是一个不错的选择。例如，在React中，可以使用 useEffect 钩子来监听 visibilitychange 事件。
如何处理老旧浏览器不支持Page Visibility API的情况？
虽然Page Visibility API已经被广泛支持，但仍然有一些老旧浏览器不支持它。为了确保你的代码在所有浏览器中都能正常工作，你需要进行特性检测。
if (typeof document.hidden !== "undefined") {
// Page Visibility API supported
document.addEventListener("visibilitychange", function() {
if (document.visibilityState === 'visible') {
console.log("页面可见");
} else {
console.log("页面不可见");
}
});
} else {
// Page Visibility API not supported
console.log("Page Visibility API not supported");
// 提供备用方案，例如使用定时器来检测页面是否失去焦点
}这段代码首先检查 document.hidden 属性是否存在。如果存在，则表示浏览器支持Page Visibility API，然后就可以正常使用该API。如果不存在，则表示浏览器不支持Page Visibility API，需要提供备用方案。例如，可以使用定时器来检测页面是否失去焦点，但这不如Page Visibility API高效和准确。
