翻译:setInterval与requestAnimationFrame的时间间隔测试

由于原测试发生在13年,所以近日(14年3月31日),根据浏览器实测情形调整了文后的表格。

原文来自stackoverflow问题:浏览器在标签页/窗口闲置的时候,浏览器暂停js吗?。采纳的回答中有两个测试,专门测试了requestAnimationFramesetInterval在各个场景下的时间间隔,测试过程和结果都值得了解。

<翻译>

测试一

我写了一个测试《帧率分布:setInterval VS requestAnimationFrame》。

《翻译:setInterval与requestAnimationFrame的时间间隔测试》

注意:测试结果跟CPU有很大关系。同时,requestAnimationFrame在桌面端IE10+上才开始支持,同时Opera不支持requestAnimationFrame(译注:原文的兼容性相关内容已过时,这里使用canIuse的结论。)

这个测试记录下了setIntervalrequestAnimationFrame在不同浏览器下运行的真正耗时,同时展示他们的数据分布。你可以改变setInterval的毫秒值来看看不同的结果。

setTimeoutsetInterval在延迟方面行为类似。而requestAnimationFrame在不同(支持的)浏览器中,总体来说维持在了60fps上下。

若想看看切换到一个不同的标签/或者让窗口闲置的结果,直接打开(我写的测试)页面,切换到另外一个标签中,等待一阵子。它会记录在标签页闲置时的真正耗时。

测试二:

另一种测试的方案是在setIntervalrequestAnimationFrame中重复地记录timestamp值,在独立的console窗口中查看结果。你可以看到,在你闲置标签页或者窗口时,它更新的有多频繁(如果它有更新的话)。

结果:

Internet Explorer

在窗口/标签页闲置时,IE对setInterval的延时不作限制;然而IE10+(译注,原文是IE10,本人IE11测试也是同样的结果)在标签页闲置时暂停了相应的requestAnimationFrame,无论窗口是否闲置。

Safari

Safari在窗口/标签页闲置时不暂停setInterval,它依然以正常频率重复运行(setInterval的函数)。在标签页闲置时,requestAnimationFrame暂停了。

Firefox

Firefox在标签页闲置时,将setInterval的时间间隔限制在1000ms左右。如果时间间隔高于1000ms,则没有相应限制。无论窗口有没有闲置,只要你切换到不同的标签页,setInterval的时间间隔就会被限制。
在标签页闲置时,requestAnimationFrame的时间间隔被限制在1-3秒一帧。

源码

// The default shortest interval/timeout we permit
#define DEFAULT_MIN_TIMEOUT_VALUE 4 // 4ms
#define DEFAULT_MIN_BACKGROUND_TIMEOUT_VALUE 1000 // 1000ms

Chrome

与Firefox行为类似,在标签页闲置的时候,Chrome将setInterval最小的时间间隔闲置在1000ms左右。
requestAnimationFrame在标签页闲置的时候被完全暂停。

源码

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

Opera

Opera在标签页闲置的时候不作setInterval的限制。
requestAnimationFrame 不被支持。在标签页闲置时,requestAnimationFrame暂停。(译注:由于新版Opera已经支持了requestAnimationFrame,这里是本人的测试结果。)

总结

标签页闲置时,时间间隔:

setIntervalrequestAnimationFrame
IE10+待测试暂停
IE9-无影响不支持
Safari 无影响>=1s暂停
Firefox>=1s1s – 3s
Chrome>=1s暂停
Opera 无影响>=1s 不支持 暂停

</翻译>

扩展阅读:

《翻译:setInterval与requestAnimationFrame的时间间隔测试》

    原文作者:Humphry
    原文地址: https://segmentfault.com/a/1190000000386368
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞