浏览器切换标签或最小化时JS定时器行为测试与WebWorker解决方案

前言

这是近期开发中遇到的一个实际问题，本文记录了相关的测试实践结果，供同行参考。

JavaScript中的setInterval和setTimeout是日常开发中常用的定时器方法，相信大家都非常熟悉。例如以下代码示例：

setInterval(() => {
  console.log('1');
}, 500);

即使是前端初学者也能理解，这段代码旨在每500ms打印一次数字1。需要注意的是，实际执行时间还需考虑JavaScript宏任务和微任务的执行耗时。虽然定时器设定的间隔为500ms，但回调函数的触发可能需要等待宏任务队列处理，因此不一定恰好在第500ms时执行。关于Event Loop的基础机制不在本文讨论范围内。

然而，当用户将浏览器切换到其他标签页，或者将浏览器窗口最小化时，页面的定时器间隔时间是否依然保持为500ms？

本文将通过测试setInterval、setTimeout以及requestAnimationFrame这三个方法在浏览器可见与不可见状态下的具体表现，来解答上述疑问。测试所使用的浏览器及版本分别为：Google Chrome (86.0.4240.193)、Firefox (81.0.2) 以及 IE11。

浏览器可见和不可见状态

浏览器在可见与不可见状态之间切换时，会触发visibilitychange事件。我们可以通过监听该事件来判断当前页面的可见状态。

document.addEventListener("visibilitychange", function() {
  console.log(document.visibilityState);
});

document.visibilityState属性包含以下三个可能的值：

• hidden：表示页面完全不可见。
• visible：表示页面至少有一部分可见。
• prerender：表示页面即将或正在渲染，此时处于不可见状态。我们主要关注hidden这一状态值。当用户切换标签页或最小化浏览器时，document.visibilityState的值将变为hidden。此外，还可以使用document.hidden属性，该属性返回一个布尔值，当为true时，表明当前浏览器处于不可见状态。

关于visibilitychange事件的更多细节，可以参考阮一峰老师撰写的Page Visibility API教程。

setInterval

首先对setInterval进行测试，相关代码如下：

<button id="btn">开始计时</button>
// 兼容ie写法
document.getElementById('btn').addEventListener('click', function() {
  setInterval(function() {
    const myDate = new Date();
    const currentDate = myDate.getMinutes() + '分'+ myDate.getSeconds() + '秒' + myDate.getMilliseconds() + '豪秒';
    // 每次循环打印当前时间
    console.log(currentDate);
  }, 500);
});
// 浏览器可见状态切换事件
document.addEventListener('visibilitychange', function() { 
  if(document.hidden) {
    console.log('页面不可见');
  }
});

设定定时器间隔为500ms，先观察Google浏览器的表现：

测试结果显示，当页面变为不可见后，定时器的间隔时间被拉长至1s。接下来，我们将定时器间隔修改为2s进行再次测试。

结果显示，无论页面是否可见，间隔时间保持一致。

随后对Firefox和IE浏览器进行测试。以下列出的图片分别展示了500ms和2s间隔的测试结果。

IE浏览器测试结果如下：

经过大量测试，可以得出以下结论：在Google浏览器中，当页面处于不可见状态时，setInterval的最小间隔时间会被限制为1s。Firefox浏览器的setInterval行为与Chrome一致，但IE浏览器并未对不可见状态下的setInterval进行性能优化，因此其间隔时间在可见与不可见状态下保持不变。

setTimeout

接下来测试setTimeout的行为：

function timer() {
  setTimeout(function() {
    const myDate = new Date();
    const currentDate = myDate.getMinutes() + '分'+ myDate.getSeconds() + '秒' + myDate.getMilliseconds() + '豪秒';
    console.log(currentDate);
    timer();
  }, 500)
}
// 兼容ie写法
document.getElementById('btn').addEventListener('click', function() {
  timer();
});

同样先观察Google浏览器的表现（测试间隔分别为500ms和2s）：

在Google浏览器中，当间隔为500ms时，setTimeout与setInterval的表现一致，最小间隔均被限制为1s。然而，当间隔为2s时，测试结果出现差异：页面不可见后，实际间隔变为3s。经过多次重复测试，结果如下：左图显示间隔时间为990ms，右图显示间隔时间为1s。

在不可见状态下，左图中的990ms间隔时间被调整为1s，而右图中的1s间隔时间则变为2s。

接下来观察Firefox浏览器（测试间隔为500ms和2s）：

在Firefox浏览器中，当页面不可见时，左图的500ms间隔变为1s，而右图的2s间隔保持不变。

再来看IE浏览器（测试间隔为500ms）：

同样没有进行任何性能优化。

综合以上测试，我们可以得出以下结论：

• 在Google浏览器中，当页面处于不可见状态时，若setTimeout的设定间隔低于1s，则会被调整为1s；若设定间隔大于等于1s，则实际间隔会变为N+1s（即原间隔加1秒）。
• 在Firefox浏览器中，setTimeout的最小间隔时间会被调整为1s，而大于等于1s的间隔则保持不变。在IE浏览器中，不可见状态前后的间隔时间均不发生变化。

requestAnimationFrame

requestAnimationFrame（简称raf）是浏览器提供的一种更流畅的动画处理方法，它会在浏览器下次GUI绘制页面时执行传入的回调函数。GUI绘制的频率与显示器刷新率相关，普通显示器的刷新率通常为60Hz，因此raf在一秒内大约执行60次，间隔时间四舍五入约为17ms。

function timer() {
  const myDate = new Date();
  const currentDate = myDate.getMinutes() + '分'+ myDate.getSeconds() + '秒' + myDate.getMilliseconds() + '豪秒';
  console.log(currentDate);
  window.requestAnimationFrame(timer)
}
// 兼容ie写法
document.getElementById('btn').addEventListener('click', function() {
  timer();
});

接下来观察不同浏览器在raf方法下的表现：

Google浏览器测试结果：

Firefox浏览器测试结果：

IE浏览器测试结果：

观察结果发现，在Google浏览器和IE浏览器中，当浏览器状态变为不可见时，raf方法将停止执行。而在Firefox浏览器中，当状态变为不可见时，raf方法会按照1s、2s、4s、8s、16s、32s……这样的指数级递增顺序继续执行。

总结

在Google浏览器中，当页面处于不可见状态时，setInterval的最小间隔时间会被限制为1s。Firefox浏览器的setInterval行为与Chrome一致。IE浏览器并未对不可见状态下的setInterval进行性能优化，因此其间隔时间在可见与不可见状态下保持不变。

在Google浏览器中，当页面处于不可见状态时，若setTimeout的设定间隔低于1s，则会被调整为1s；若设定间隔大于等于1s，则实际间隔会变为N+1s。在Firefox浏览器中，setTimeout的最小间隔时间会被调整为1s，而大于等于1s的间隔则保持不变。在IE浏览器中，不可见状态前后的间隔时间均不发生变化。

在Google浏览器和IE浏览器中，当浏览器状态变为不可见时，raf方法将停止执行。而在Firefox浏览器中，当状态变为不可见时，raf方法会按照1s、2s、4s、8s、16s、32s……这样的指数级递增顺序继续执行。

如何解决

遇到问题自然需要寻找解决方案。在一些设定间隔小于1s的倒计时页面中，如果用户切换到了其他标签页，当用户切回时，页面上显示的倒计时时间往往是错误的。这种隐蔽的Bug可能带来较大的风险。该如何解决这一问题呢？

除了调用后台接口或使用WebSocket连接外，其实还有一个更优的解决方案：Web Worker。此外，Web Worker还能解决在一个页面中存在多个定时器时因浏览器优化导致的间隔时间误差较大的问题。

直接通过示例展示：

document.getElementById('btn').addEventListener('click', function() {
  var w = new Worker('demo_workers.js');
  w.onmessage = function(event){
    console.log(event.data);
  };
});
//浏览器切换事件
document.addEventListener('visibilitychange', function() { 
  if(document.hidden) {
    console.log('页面不可见');
  }
});

// demo_workers.js
setInterval(function() {
  const myDate = new Date();
  const currentDate = myDate.getMinutes() + '分'+ myDate.getSeconds() + '秒' + myDate.getMilliseconds() + '豪秒';
  postMessage(currentDate);
}, 500);

实际测试结果如下：

可以看到，使用Web Worker后，定时器间隔保持一致，不受页面可见性影响。

以上就是关于浏览器切换到其他标签页或最小化时JS定时器是否准时的详细测试内容，更多关于浏览器切换JS定时器准时测试的资料，请关注本站其他相关文章！