浏览器页面处于不活跃状态时setInterval不定时执行

浏览器页面处于不活跃状态时setInterval不定时执行

1.问题背景

页面建立webSocket并设置定时保活机制，切换到后台或其他标签页一段时间后，定时器未按时调用，导致保活超时，ws closed

2.原因

当页面变为非活动状态时，WebKit 会自动采取措施来节省电量：

• requestAnimationFrame停止。
• CSS 和 SVG 动画被暂停。
• 计时器受到限制。

页面变为非活动状态（不是用户的主要焦点）的情况有多种，例如：

• 用户切换到不同的选项卡。
• 用户切换到不同的应用程序。
• 浏览器窗口最小化。
• 浏览器窗口可见但不是焦点窗口。
• 浏览器窗口位于另一个窗口的后面。
• 窗口所在的空间不是当前空间。

3.解决方案

使用 Web Workers。可以让浏览器窗口在非激活状态（或者最小化）也让setTimeout、setInterval有效不休眠的功能。

而且webWorkers还可以解决一个页面存在多个定时器时候间隔时间误差较大的问题。

4.交互状态

对于 Web 开发人员，需要考虑三种交互状态：

• 当用户主动与内容交互时。
• 当页面位于最前面，但用户没有与之交互时。
• 当页面不是最前面的内容时。

页面可见性监听：

• 页面可见性 API提供了一种方法来响应页面转换到后台或前台。这是避免在页面处于后台时更新 UI
• blur只要页面不再聚焦，就会发送事件。在这种情况下，页面可能仍然可见，但它不是当前聚焦的窗口。

5.参考：

• （1）How Web Content Can Affect Power Usage https://webkit.org/blog/8970/how-web-content-can-affect-power-usage/#:~:text=Timers%20are%20throttled

• （2）当浏览器切换到其他标签页或者最小化时，你的js定时器还准时吗？https://juejin.cn/post/6899796711401586695