注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

@fc_lamp

关注Web应用解决方案MySql/PHP/Python一盏名为"飞川"的灯~

 
 
 

日志

 
 

关于setInterval与requestAnimationFrame  

2015-02-07 17:30:36|  分类: Web技术-Js/Html |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |
原文来自stackoverflow问题:浏览器在标签页/窗口闲置的时候,浏览器暂停js吗?。采纳的回答中有两个测试,专门测试了requestAnimationFramesetInterval在各个场景下的时间间隔,测试过程和结果都值得了解。
本文来源:http://segmentfault.com/blog/humphry/1190000000386368

测试一

我写了一个测试《帧率分布:setInterval VS 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不支持 暂停

ps:

// requestAnimationFrame 的浏览器兼容性处理
var w = window;
requestAnimationFrame = w.requestAnimationFrame || w.webkitRequestAnimationFrame || w.msRequestAnimationFrame || w.mozRequestAnimationFrame;


  评论这张
 
阅读(287)| 评论(0)
推荐 转载

历史上的今天

在LOFTER的更多文章

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2017