翻譯：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》

---