背景:我正在做一些用户界面测试,这些测试需要检测人们是否在关注。
具体来说,我想知道如果当前的选项卡处于非活动状态,或者浏览器窗口处于非活动状态,那么在不同的浏览器中,我的Javascript代码将受到什么影响。到目前为止,我已经挖掘了以下内容:
我有以下问题:
setInterval
注意:此测试占用大量CPU。requestAnimationFrameIE 9-和Opera 12-不支持。
requestAnimationFrame
该测试记录setInterval并requestAnimationFrame在不同的浏览器中运行所需的实际时间,并以分发的形式为您提供结果。您可以更改毫秒数,setInterval以查看其在不同设置下的运行方式。延迟方面的setTimeout工作与a类似setInterval。requestAnimationFrame通常默认设置为60fps,具体取决于浏览器。要查看切换到其他选项卡或不活动窗口时发生的情况,只需打开页面,切换到其他选项卡,然后等待一段时间。它将继续在不活动的选项卡中记录这些功能的实际时间。
setTimeout
测试它的另一种方法是使用setInterval和反复记录时间戳,并requestAnimationFrame在独立的控制台中查看它。当您使选项卡或窗口处于非活动状态时,您可以查看更新的频率(或者是否曾经更新)。
*当该标签页处于非活动状态时, *Chrome浏览 器将最小间隔限制为setInterval1000毫秒左右。如果间隔大于1000ms,它将以指定的间隔运行。窗口是否聚焦不重要,仅当您切换到其他选项卡时,间隔才会受到限制。requestAnimationFrame选项卡处于非活动状态时暂停。
// Provides control over the minimum timer interval for background tabs. const double kBackgroundTabTimerInterval = 1.0;
Firefox 与Chrome相似,setInterval当选项卡(而非窗口)处于非活动状态时,Firefox将最小间隔限制为1000毫秒左右。但是,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
Internet Explorer IE不会限制setInterval选项卡处于非活动状态时的延迟,但会requestAnimationFrame在非活动选项卡中暂停。窗口是否未聚焦都没有关系。
Edge 从边缘14开始,setInterval在不活动的选项卡中,上限为1000ms。requestAnimationFrame总是在非活动标签中暂停。
Safari 与Chrome浏览器一样,setInterval当该标签页处于非活动状态时,Safari的上限为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