如何使用JavaScript检测空闲的浏览器选项卡

在某些情况下，当用户与我们的最终产品或应用程序进行交互时，我们发现自己会执行许多密集的，占用大量CPU的任务。启动轮询器，建立WebSocket连接，甚至加载视频或图片等媒体，都有可能成为性能障碍，尤其是当这些任务在不需要的情况下消耗资源的时候。 在用户没有主动与界面交互的同时，从不必要的工作负载或网络请求中释放主线程是一个非常好的和有意义的实践。换一种方式，在大多数主机提供商都在引入基于配额的定价模式的行业中，减少网络请求也可以降低运行应用程序或服务的成本。 页面可见性(Page Visibility) API 所有现代的网页浏览器都加入了页面可见性API，它允许我们检测浏览器的标签页何时 JavaScript是Web开发中不可或缺的一部分，尤其在构建交互丰富的应用程序时。然而，随着应用程序变得越来越复杂，它们可能会在后台运行耗时的任务，即使用户已经切换到其他标签页或完全离开浏览器。这种情况下，为了优化性能和减少不必要的资源消耗，开发者可以利用浏览器提供的页面可见性API来检测用户是否与当前页面交互。 页面可见性API是一个标准化的接口，允许开发者检测浏览器选项卡的状态——是可见的（用户正在查看）还是隐藏的（用户切换到了其他选项卡或者最小化了窗口）。这个API的核心属性是`document.visibilityState`，它返回一个字符串，表示当前页面的状态。可能的值包括： 1. `visible` - 用户当前正在查看页面。 2. `hidden` - 页面被隐藏，比如用户切换到另一个标签页或者最小化了浏览器窗口。 通过监控`document.visibilityState`的变化，我们可以注册一个`visibilitychange`事件监听器。当页面状态改变时，该事件会被触发，从而让我们能够相应地调整应用的行为。以下是一个简单的例子： ```javascript const onVisibilityChange = () => { if (document.visibilityState === 'hidden') { console.log('> 这个窗口是隐藏的.'); // 隐藏时执行的操作，如停止定时任务、关闭WebSocket连接等 } else { console.log('> 这个窗口是可见的.'); // 显示时执行的操作，如恢复定时任务、重新建立WebSocket连接等 } }; document.addEventListener('visibilitychange', onVisibilityChange, false); ``` 举个具体的例子，假设我们有一个定时轮询API以获取更新的函数： ```javascript const poll = () => { const interval = 1500; let _poller = null; const repeat = () => { console.log(`~ Polling: ${Date.now()}.`); }; return { start: () => { _poller = setInterval(repeat, interval); }, stop: () => { console.log('~ Poller stopped.'); clearInterval(_poller); }, }; }; const poller = poll(); poller.start(); // 添加对visibilitychange事件的监听 document.addEventListener('visibilitychange', () => { if (document.visibilityState === 'hidden') { poller.stop(); // 当页面隐藏时，停止轮询 } else { poller.start(); // 当页面显示时，恢复轮询 } }); ``` 除了停止不必要的任务，我们还可以利用页面隐藏时的空闲时间预加载或异步加载资源，比如外部脚本、模块或大图像。例如，使用Webpack和ES2015的动态导入，我们可以智能地在后台加载这些资源，以便用户返回时页面已经准备好： ```javascript let loaded = false; const onVisibilityChange = () => { if (document.visibilityState === 'hidden') { // 如果页面隐藏，预加载或异步加载资源 if (loaded) return; Promise.all([ import('./async.js'), import('./another-async.js'), import(/* webpackChunkName: "bar-module" */ 'modules/bar'), import(/* webpackPrefetch: 0 */ 'assets/images/foo.jpg'), ]).then(() => { loaded = true; }); } }; document.addEventListener('visibilitychange', onVisibilityChange, false); ``` 通过这种方式，页面可见性API可以帮助我们创建更高效、更响应的Web应用程序。它不仅可以提高用户体验，减少不必要的CPU和网络资源消耗，还能帮助优化成本，特别是对于那些按使用量计费的云服务提供商。善用页面可见性API是现代Web开发中优化性能的一个重要策略。