标签或窗口处于非活动状态时，浏览器如何暂停/更改Javascript？

Question

背景：我正在做一些用户界面测试，这些测试需要检测人们是否在关注。

具体来说，我想知道如果当前的选项卡处于非活动状态，或者浏览器窗口处于非活动状态，那么在不同的浏览器中，我的Javascript代码将受到什么影响。到目前为止，我已经挖掘了以下内容：

我有以下问题：

• 除了移动浏览器以外，当选项卡处于非活动状态时，桌面浏览器是否会暂停JS执行？什么时候使用哪些浏览器？
• 哪些浏览器减少setInterval重复次数？它只是减少到一个极限还是一个百分比？例如，如果我有一个10ms的重复与一个5000ms的重复，那么每个都会受到影响吗？
• 如果 窗口 不在焦点上，而不仅仅是选项卡上，是否会发生这些更改？（我想这将更难检测，因为它需要OS API。）
• 在活动选项卡中是否还会观察到其他任何效果？他们会搞乱本来可以正确执行的事情（即上述的茉莉花测试）吗？

Answer 1

注意：此测试占用大量CPU。requestAnimationFrameIE 9-和Opera 12-不支持。

该测试记录setInterval并requestAnimationFrame在不同的浏览器中运行所需的实际时间，并以分发的形式为您提供结果。您可以更改毫秒数，setInterval以查看其在不同设置下的运行方式。延迟方面的setTimeout工作与a类似setInterval。requestAnimationFrame通常默认设置为60fps，具体取决于浏览器。要查看切换到其他选项卡或不活动窗口时发生的情况，只需打开页面，切换到其他选项卡，然后等待一段时间。它将继续在不活动的选项卡中记录这些功能的实际时间。

测试

测试它的另一种方法是使用setInterval和反复记录时间戳，并requestAnimationFrame在独立的控制台中查看它。当您使选项卡或窗口处于非活动状态时，您可以查看更新的频率（或者是否曾经更新）。

结果

*当该标签页处于非活动状态时， *Chrome浏览
器将最小间隔限制为setInterval1000毫秒左右。如果间隔大于1000ms，它将以指定的间隔运行。窗口是否聚焦不重要，仅当您切换到其他选项卡时，间隔才会受到限制。requestAnimationFrame选项卡处于非活动状态时暂停。

// Provides control over the minimum timer interval for background tabs.
const double kBackgroundTabTimerInterval = 1.0;

Firefox
与Chrome相似，setInterval当选项卡（而非窗口）处于非活动状态时，Firefox将最小间隔限制为1000毫秒左右。但是，requestAnimationFrame当选项卡处于非活动状态时，运行速度将呈指数级降低，每个帧占用1s，2s，4s，8s等。

// The default shortest interval/timeout we permit
#define DEFAULT_MIN_TIMEOUT_VALUE 4 // 4ms
#define DEFAULT_MIN_BACKGROUND_TIMEOUT_VALUE 1000 // 1000ms

Internet Explorer
IE不会限制setInterval选项卡处于非活动状态时的延迟，但会requestAnimationFrame在非活动选项卡中暂停。窗口是否未聚焦都没有关系。

Edge
从边缘14开始，setInterval在不活动的选项卡中，上限为1000ms。requestAnimationFrame总是在非活动标签中暂停。

Safari
与Chrome浏览器一样，setInterval当该标签页处于非活动状态时，Safari的上限为1000毫秒。requestAnimationFrame也暂停了。

Opera
自从采用Webkit引擎以来，Opera表现出与Chrome相同的行为。setInterval上限为1000毫秒，requestAnimationFrame当该标签页处于非活动状态时会暂停。

摘要

非活动标签的重复间隔：

setInterval     requestAnimationFrame
Chrome
9-         not affected    not supported
10         not affected    paused
11+        >=1000ms        paused

Firefox
3-         not affected    not supported
4          not affected    1s
5+         >=1000ms        2ns (n = number of frames since inactivity)

IE
9-         not affected    not supported
10+        not affected    paused

Edge
13-        not affected    paused
14+        >=1000ms        paused

Safari
5-         not affected    not supported
6          not affected    paused
7+         >=1000ms        paused

Opera
12-        not affected    not supported
15+        >=1000ms        paused