181

背景：我正在做一些用户界面测试，需要检测人们是否在注意。但是，这个问题与页面可见性 API无关。

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

我有以下问题：

  • 除了移动浏览器，桌面浏览器是否会在选项卡不活动时暂停 JS 执行？何时以及哪些浏览器？
  • 哪些浏览器减少了setInterval重复？它只是减少到一个限制还是一个百分比？例如，如果我有一个 10 毫秒的重复和一个 5000 毫秒的重复，每个都会受到什么影响？
  • 如果窗口失焦，而不仅仅是选项卡，是否会发生这些变化？（我想它会更难检测，因为它需要 OS API。）
  • 是否有其他在活动选项卡中不会观察到的效果？他们会不会把本来可以正确执行的事情搞砸（即前面提到的 Jasmine 测试）？
4

3 回答 3

205

测试一

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

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

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

测试二

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

结果

Chrome
Chrome 将标签页处于非活动状态时的最小间隔限制为setInterval1000 毫秒左右。如果间隔高于 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为大约1000ms，当TAB（不是窗口）不活动时。但是，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总是在非活动标签中暂停。

野生动物园
就像Chrome一样，setInterval当标签不活动时，Safari帽子在1000ms上盖。requestAnimationFrame也被暂停。

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

概括

非活动标签的重复间隔：

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

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

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

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

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

歌剧
12- 不受影响 不支持
15+ >=1000ms 暂停
于 2013-04-16T09:56:09.337 回答
12

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

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

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

于 2013-04-10T08:36:46.980 回答
1

一个更新的答案来补充这些：在 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>

于 2019-12-11T23:51:59.763 回答