标签或窗口处于非活动状态时,浏览器如何暂停/更改Javascript?

2020/10/24 10:41 · javascript ·  · 0评论

背景:我正在做一些用户界面测试,这些测试需要检测人们是否在关注。但是,这个问题是不是有关的页面知名度API

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

我有以下问题:

  • 比移动浏览器等,千万桌面浏览器曾经暂停执行JS当标签处于非活动状态?什么时候使用哪些浏览器?
  • 哪些浏览器减少setInterval重复次数?它只是减少到一个极限还是一个百分比?例如,如果我有一个10ms的重复与一个5000ms的重复,那么每个都会受到影响吗?
  • 如果窗口不在焦点上,而不仅仅是选项卡上,是否会发生这些更改(我想这将更难检测,因为它需要OS API。)
  • 在活动选项卡中是否还有其他效果无法观察到?他们会搞乱本来可以正确执行的事情(即上述的茉莉花测试)吗?

测试一

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

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

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

测试二

测试它的另一种方法是使用setInterval反复记录时间戳,requestAnimationFrame在独立的控制台中查看它。当您使选项卡或窗口处于非活动状态时,您可以查看其更新频率(或者是否曾经更新)。

结果

当该标签页处于非活动状态时,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

火狐

到铬类似,火狐限制的最小间隔
setInterval围绕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

https://hg.mozilla.org/releases/mozilla-release/file/0bf1cadfb004/dom/base/nsGlobalWindow.cpp#l296

Internet Explorer

IE不会限制
setInterval选项卡处于非活动状态时的延迟,但是会在选项卡处于非活动状态时暂停requestAnimationFrame窗口是否聚焦不重要。

边缘

从边缘14开始,
setInterval在不活动的选项卡中上限为1000ms。requestAnimationFrame总是在非活动标签中暂停。

Safari

与Chrome一样,
setInterval该标签页处于非活动状态时,Safari的上限为1000ms。requestAnimationFrame也暂停了。

Opera

自从采用Webkit引擎以来,Opera表现出与Chrome相同的行为。
setInterval上限为1000毫秒,requestAnimationFrame当该标签页处于非活动状态时会暂停。

概要

非活动标签的重复间隔:

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

火狐浏览器
3-不受影响不支持
4个未受影响的1s
5+> = 1000毫秒2 Ñ S(N =由于不活动帧的数量)

IE浏览器
9-不受影响,不支持
10个以上(不受影响)已暂停

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

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

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

我观察到的结果:在Chrome的非活动标签上,所有少于1000毫秒setTimeout(必须相同setInterval)的等待时间都四舍五入为1000毫秒我认为更长的超时时间不会被修改。

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

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

一个新的答案可以补充这些问题:在Chrome 78.0.3904.108上,我注意到所有这些超时(不仅是1000ms以下的超时)花费的时间比我移到其他选项卡然后返回时的预期时间长。我所看到的行为被更正确地描述为“不活动的选项卡上的所有超时可能会延迟一些额外的时间,最长为1000ms。” 尝试运行以下内容并切换到另一个选项卡!

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>
本文地址:http://javascript.askforanswer.com/biaoqianhuochuangkouchuyufeihuodongzhuangtaishiliulanqiruhezanting-genggaijavascript.html
文章标签: ,  
版权声明:本文为原创文章,版权归 javascript 所有,欢迎分享本文,转载请保留出处!

文件下载

老薛主机终身7折优惠码boke112

上一篇:
下一篇:

评论已关闭!