如何浏览器暂停/更改JavaScript时，标签或窗口处于非活动状态？ [英] How do browsers pause/change Javascript when tab or window is not active?

问题描述

背景：我做了需要的，如果人们所重视或不检测某些用户界面测试。但是，这个问题的不可以了解页面可见性API 。

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.

具体来说，我想知道如何在当前选项卡不活跃，或浏览器窗口不活跃，在不同的浏览器我的JavaScript code会受到影响。我已经挖了以下至今：

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中的javascript暂停时，标签不活跃


• <$c$c>setInterval和的setTimeout 标签时不活跃延迟降低 - 看起来这只是最近开始出现，并可以搞砸茉莉花单元测试，周围的其他事物
  
• requestAnimationFrame 当选项卡不激活（合理的，想不出为什么会影响到任何人太多）减慢

• 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)

我有以下问题：

• 比其他移动浏览器，你的桌面浏览器曾经暂停执行JS当标签处于非活动状态？当与哪些浏览器？


• 哪些浏览降低的setInterval 重复？难道仅仅是降低到了一个极限，或按百分比？举例来说，如果我有一个10ms的重复与一个5000毫秒重复，如何将各自的影响？


• 请这些变化发生的，如果的窗口的失焦，而不是仅仅是标签？ （我想这将是难以检测，因为它需要的OS API）


• 是否有不会在活动选项卡中观察到的任何其他影响？难道他们把事情弄得一团糟，否则将正确执行（即前面提到的茉莉花测试）？

• 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)?

推荐答案

我已经写了测试专门用于此目的：结果
帧速率分布：setInterval的VS requestAnimationFrame

Test One

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

^{注：该测试是非常CPU密集型。 requestAnimationFrame 不是由IE 9和Opera 12的支持。 -}

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

测试记录花费一个的setInterval 和 requestAnimationFrame 来在不同的浏览器中运行，并给出了实际时间你的结果在一个分配的形式。您可以更改的毫秒数的setInterval 来看看它在不同的设置是如何运行的。 的setTimeout 的工作方式类似于一个的setInterval 相对于延误。 requestAnimationFrame 一般默认为依赖于浏览器的60fps的。要看到当你切换到不同的选项卡或有一个活动窗口，只需打开网页，切换到不同的选项卡，等待一会儿会发生什么。它将继续记录花费在无效选项卡这些功能的实际时间。

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.

要测试它的另一种方法是用的setInterval 和 requestAnimationFrame 多次记录时间戳和查看它在分离安慰。你可以看到它是如何经常​​更新（或者如果它是不断更新）时，你的标签或窗口无效。

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.

• 试验的setInterval


• 试验 requestAnimationFrame

Chrome浏览器结果
Chrome浏览器限制为1000毫秒左右的setInterval 的最小间隔，当标签处于非活动状态。如果间隔超过1000毫秒时，就会在指定的时间间隔运行。不要紧，如果窗口脱焦，间隔是有限的，只有当你切换到不同的标签。 requestAnimationFrame 当标签处于非活动状态已暂停。

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：//$c$creview.chromium.org / 6546021 /贴片/2001分之1001}

火狐结果
类似的Chrome，火狐限制为1000毫秒左右的setInterval 的最小间隔，当标签（不是窗口）无效。然而， requestAnimationFrame 指数运行速度较慢，当标签处于非活动状态，每帧拍摄1秒，2秒，4秒，8秒等。

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不限制的setInterval 延迟时，标签是无效的，但它会暂停 requestAnimationFrame 非活动标签。不要紧窗口是否失焦或没有。

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.

边缘结果
从边缘14启动，的setInterval 是在活动标签页1000ms的上限。 requestAnimationFrame 总是处于非活动状态的标签已暂停。

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

Safari浏览器结果
就像Chrome浏览器，Safari浏览器帽的setInterval 在1000毫秒当标签处于非活动状态。 requestAnimationFrame 被暂停。

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

歌剧结果
由于采用的Webkit引擎，歌剧表现出相同的行为铬。 的setInterval 在1000毫秒封顶和 requestAnimationFrame 暂停时，标签是无效的。

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.

重复间隔活动标签页：

           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屋！