当标签或窗口不活动时，浏览器如何暂停/更改JavaScript？

测试一

我为此专门编写了一个测试：
Frame Rate Distribution: setInterval vs requestAnimationFrame

^{注意：此测试占用大量 CPU。 IE 9- 和 Opera 12- 不支持 requestAnimationFrame。}

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

测试二

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

测试 setInterval

测试 requestAnimationFrame

结果

Chrome
当标签处于非活动状态时，Chrome 将 setInterval 的最小间隔限制为大约 1000 毫秒。如果间隔高于 1000ms，它将以指定的间隔运行。窗口是否失焦无关紧要，仅当您切换到不同的选项卡时，间隔才会受到限制。 requestAnimationFrame 在标签处于非活动状态时暂停。

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

^{https://codereview.chromium.org/6546021/patch/1001/2001}

Firefox
与 Chrome 类似，当标签页（而非窗口）处于非活动状态时，Firefox 将 setInterval 的最小间隔限制为 1000 毫秒左右。但是，requestAnimationFrame在不活动的情况下，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

^{https://hg.mozilla.org/releases/mozilla-release/file/0bf1cadfb004/dom/base/nsGlobalWindow.cpp#l296}

Internet Explorer
IE 在标签处于非活动状态时不会限制 setInterval 的延迟，但会在非活动标签中暂停 requestAnimationFrame。窗口是否失焦并不重要。

Edge
从 Edge 14 开始，setInterval 在非活动标签中的上限为 1000 毫秒。 requestAnimationFrame 始终在非活动标签中暂停。

Safari
与 Chrome 一样，当标签处于非活动状态时，Safari 会将 setInterval 的上限设为 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

---

我观察到：在 Chrome 中的非活动标签页上，等待少于 1000 毫秒 的所有 setTimeout（对于 setInterval 必须相同）四舍五入到 1000 毫秒。我认为更长的超时不会被修改。

似乎是自 Chrome 11 和 Firefox 5.0 以来的行为：https://developer.mozilla.org/en-US/docs/DOM/window.setTimeout#Inactive_tabs

此外，当整个窗口处于非活动状态时，我认为它不会以这种方式运行（但似乎很容易调查）。

---

一个更新的答案来补充这些：在 chrome 78.0.3904.108 上，当我移动到不同的选项卡然后回来时，我注意到所有这些超时（不仅仅是那些低于 1000 毫秒的超时）比预期的要长一些。我看到的行为被更正确地描述为“非活动选项卡上的所有超时可能会延迟一些额外的量，最多延迟 1000 毫秒。”尝试运行以下命令并切换到另一个选项卡！

让超时 = [ 500, 1000, 2000, 3000, 10000 ];让 minExcess = document.getElementsByClassName('minExcess')[0]; timeouts.forEach(ms => { let elem = document.getElementsByClassName(`t${ms}`)[0]; let cnt = 0; let lastMs = +new Date(); let f = () => { let curMs = +new Date(); 让 disp = document.createElement('p'); 让 net = curMs - lastMs; lastMs = curMs; setTimeout(f, ms); if (minExcess.value && (net - ms) < parseInt(minExcess.value)) return; disp.innerText = `${net},`; elem.appendChild(disp); if (++cnt > 10) elem.firstElementChild.remove(); }; setTimeout(f,小姐）; }）;正文 { 字体大小：80%; } div { 最大高度：80px;溢出-x：自动；背景色：rgba(0, 0, 0, 0.1);边距底部：2px；空白：nowrap； } p { 边距：0； } div > p { 边距：0;显示：内联块；垂直对齐：顶部；右边距：2px； } 输入 { 边距：0 0 10px 0; } .t500:before { 显示：块；内容：'500ms'；字体粗细：粗体； } .t1000：之前 { 显示：块；内容：'1000ms'；字体粗细：粗体； } .t2000：之前 { 显示：块；内容：'2000ms'；字体粗细：粗体； } .t3000：之前 { 显示：块；内容：'3000ms'；字体粗细：粗体； } .t10000：之前 { 显示：块；内容：'10000ms';字体粗细：粗体； }

忽略任何延迟小于此数量的值：

< div class="timeout t500">