浏览器如何暂停/更改JavaScript时选项卡或窗口未激活? [英] How do browsers pause/change Javascript when tab or window is not active?

问题描述

背景:我正在做一些用户界面测试，需要检测人们是否在关注.但是，这个问题不是关于页面可见性 API.

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

• ios 5 在选项卡未处于活动状态时暂停 javascript
• setInterval 和setTimeout 选项卡未处于活动状态时延迟会减少 - 这似乎是最近才开始出现的，并且可能会在其他方面搞砸 Jasmine 单元测试.
• requestAnimationFrame 在选项卡未处于活动状态时变慢(合理，想不出为什么这会对任何人造成太大影响)

我有以下问题:

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

解决方案

测试一

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

^{注意:此测试非常占用 CPU.IE 9- 和 Opera 12- 不支持 requestAnimationFrame.}

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

测试二

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

• 测试setInterval
• 测试requestAnimationFrame

结果

Chrome
Chrome limits the minimum interval of setInterval to around 1000ms when the tab is inactive.如果间隔大于 1000ms，它将以指定的间隔运行.窗口是否失焦并不重要，只有当您切换到不同的选项卡时，间隔才会受到限制.requestAnimationFrame 在选项卡处于非活动状态时暂停.

//提供对后台选项卡的最小计时器间隔的控制.const double kBackgroundTabTimerInterval = 1.0;

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

火狐
Similar to Chrome, Firefox limits the minimum interval of setInterval to around 1000ms when the tab (not the window) is inactive.但是， RequestAnimationFrame 在选项卡处于非活动状态时运行指数较慢，每个帧都需要1S，2S，4S，8S等.

//我们允许的默认最短间隔/超时#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 does not limit the delay in setInterval when the tab is inactive, but it pauses requestAnimationFrame in inactive tabs.窗口是否失焦无关紧要.

边缘
从 Edge 14 开始，setInterval 在非活动选项卡中的上限为 1000 毫秒.requestAnimationFrame 在非活动选项卡中始终暂停.

Safari
Just like Chrome, Safari caps setInterval at 1000ms when the tab is inactive.requestAnimationFrame 也暂停了.

歌剧
由于采用了 Webkit 引擎，Opera 表现出与 Chrome 相同的行为.setInterval 的上限为 1000 毫秒，requestAnimationFrame 在选项卡处于非活动状态时暂停.

总结

非活动标签的重复间隔:

<前>setInterval requestAnimationFrame铬9- 不受影响 不支持10 不受影响 暂停11+ >=1000 毫秒暂停火狐3- 不受影响 不支持4 不受影响 1s5+ >=1000ms 2ⁿs(n = 自不活动以来的帧数)浏览器9- 不受影响 不支持10+ 不受影响 暂停边缘13-不受影响暂停14+ >=1000 毫秒暂停野生动物园5- 不受影响 不支持6 不受影响 暂停7+ >=1000 毫秒暂停歌剧12- 不受影响 不支持15+ >=1000 毫秒暂停

Background: I'm doing some user interface tests that need to detect if people are paying attention or not. But, this question is not about the page visibility API.

Specifically, I would like to know how my Javascript code will be affected if the current tab is not active, or the browser window is not active, in different browsers. I've dug up the following so far:

• ios 5 pauses javascript when tab is not active
• setInterval and setTimeout delay is reduced when tabs are not active - seems like this just started appearing recently and can mess up Jasmine unit tests, around other things.
• requestAnimationFrame is slowed when tab is not active (reasonable, can't think of why this would affect anyone too much)

I have the following questions:

• Other than mobile browsers, do desktop browsers ever pause JS execution when a tab is not active? When and which browsers?
• Which browsers reduce the setInterval repeat? Is it just reduced to a limit or by a percentage? For example, if I have a 10ms repeat versus a 5000ms repeat, how will each be affected?
• Do these changes happen if the window is out of focus, as opposed to just the tab? (I imagine it would be harder to detect, as it requires the OS API.)
• Are there any other effects that would not be observed in an active tab? Could they mess things up that would otherwise execute correctly (i.e. the aforementioned Jasmine tests)?

解决方案

Test One

I have written a test specifically for this purpose:
Frame Rate Distribution: setInterval vs requestAnimationFrame

^{Note: This test is quite CPU intensive. requestAnimationFrame is not supported by IE 9- and Opera 12-.}

The test logs the actual time it takes for a setInterval and requestAnimationFrame to run in different browsers, and gives you the results in the form of a distribution. You can change the number of milliseconds for setInterval to see how it runs under different settings. setTimeout works similarly to a setInterval with respect to delays. requestAnimationFrame generally defaults to the 60fps depending on the browser. To see what happens when you switch to a different tab or have an inactive window, simply open the page, switch to a different tab and wait for a while. It will continue to log the actual time it takes for these functions in an inactive tab.

Test Two

Another way to test it is to log the timestamp repeatedly with setInterval and requestAnimationFrame and view it in a detached console. You can see how frequently it is updated (or if it is ever updated) when you make the tab or window inactive.

• Test for setInterval
• Test for requestAnimationFrame

Results

Chrome
Chrome limits the minimum interval of setInterval to around 1000ms when the tab is inactive. If the interval is higher than 1000ms, it will run at the specified interval. It does not matter if the window is out of focus, the interval is limited only when you switch to a different tab. requestAnimationFrame is paused when the tab is inactive.

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

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

Firefox
Similar to Chrome, Firefox limits the minimum interval of setInterval to around 1000ms when the tab (not the window) is inactive. However, requestAnimationFrame runs 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 does not limit the delay in setInterval when the tab is inactive, but it pauses requestAnimationFrame in inactive tabs. It does not matter whether the window is out of focus or not.

Edge
Starting from Edge 14, setInterval is capped at 1000ms in inactive tabs. requestAnimationFrame is always paused in inactive tabs.

Safari
Just like Chrome, Safari caps setInterval at 1000ms when the tab is inactive. requestAnimationFrame is paused as well.

Opera
Since the adoption of the Webkit engine, Opera exhibits the same behavior as Chrome. setInterval is capped at 1000ms and requestAnimationFrame is paused when the tab is inactive.

Summary

Repeating intervals for inactive tabs:

           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

这篇关于浏览器如何暂停/更改JavaScript时选项卡或窗口未激活?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！