测试一

我为此专门编写了一个测试：
帧速率分布：setInterval vs requestAnimationFrame

^{注意：此测试非常占用 CPU。requestAnimationFrameIE 9- 和 Opera 12- 不支持。}

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

测试二

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

• 测试 setInterval
• 测试 requestAnimationFrame

结果

Chrome
ChromesetInterval将选项卡处于非活动状态时限制为大约1000ms的最小间隔。如果间隔大于 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，FirefoxsetInterval将标签（不是窗口）处于非活动状态时将最小间隔限制为大约1000ms。However, requestAnimationFrameruns exponentially slower when the tab is inactive, with each frame taking 1s, 2s, 4s, 8s and so on.

// 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，setInterval当标签处于非活动状态时，Safari Caps在100毫秒时。requestAnimationFrame也暂停了。

Opera
自采用 Webkit 引擎以来，Opera 表现出与 Chrome 相同的行为。setInterval上限为 1000 毫秒，并requestAnimationFrame在选项卡处于非活动状态时暂停。

概括

非活动选项卡的重复间隔：

           setInterval      requestAnimationFrame 
Chrome
9- 不受影响 不支持
10 不受影响 暂停
11+ >=1000 毫秒暂停

火狐
3- 不受影响 不支持
4 不受影响 1s
5+ >=1000ms 2 n s（n = 自不活动以来的帧数）

IE
9- 不受影响 不支持
10+ 不受影响 暂停

边缘
13-不受影响暂停
14+ >=1000 毫秒暂停

苹果浏览器
5- 不受影响 不支持
6 不受影响 暂停
7+ >=1000 毫秒暂停

歌剧
12- 不受影响 不支持
15+ >=1000 毫秒暂停

我观察到：在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 毫秒。” 尝试运行以下命令并切换到另一个选项卡！

let timeouts = [ 500, 1000, 2000, 3000, 10000 ];

let 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();
    let disp = document.createElement('p');
    let 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, ms);
  
});

body { font-size: 80%; }
div {
  max-height: 80px;
  overflow-x: auto;
  background-color: rgba(0, 0, 0, 0.1);
  margin-bottom: 2px;
  white-space: nowrap;
}
p { margin: 0; }
div > p {
  margin: 0;
  display: inline-block;
  vertical-align: top;
  margin-right: 2px;
}
input { margin: 0 0 10px 0; }
.t500:before { display: block; content: '500ms'; font-weight: bold; }
.t1000:before { display: block; content: '1000ms'; font-weight: bold; }
.t2000:before { display: block; content: '2000ms'; font-weight: bold; }
.t3000:before { display: block; content: '3000ms'; font-weight: bold; }
.t10000:before { display: block; content: '10000ms'; font-weight: bold; }

<p>Ignore any values delayed by less than this amount:</p>
<input type="text" class="minExcess" value="200" pattern="^[0-9]*$"/>
<div class="timeout t500"></div>
<div class="timeout t1000"></div>
<div class="timeout t2000"></div>
<div class="timeout t3000"></div>
<div class="timeout t10000"></div>