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

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

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

---

<翻译>

测试一

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

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

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

setTimeout和setInterval在延迟方面行为类似。而requestAnimationFrame在不同（支持的）浏览器中，总体来说维持在了60fps上下。

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

测试二：

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

• setInterval的测试页
  http://jsfiddle.net/laucheukhim/Aev79/
• requestAnimationFrame的测试页
  http://jsfiddle.net/laucheukhim/WfdnM/1/

结果：

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，这里是本人的测试结果。）

总结

标签页闲置时，时间间隔：

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

</翻译>

---

扩展阅读：

• 张鑫旭的关于requestAnimationFrame的polyfill和应用的一篇文章：《CSS3动画那么强，requestAnimationFrame还有毛线用？》
• 深入requestAnimationFrame的机制：《理解WebKit和Chromium: 渲染主循环（main loop)和requestAnimationFrame》

---