StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<h2>Test One</h2> <p>I have written a test specifically for this purpose:<br> <a href="http://laucheukhim.github.io/frame-rate-distribution/">Frame Rate Distribution: setInterval vs requestAnimationFrame</a></p> <p><sup>Note: This test is quite CPU intensive. <code>requestAnimationFrame</code> is not supported by IE 9- and Opera 12-.</sup></p> <p>The test logs the actual time it takes for a <code>setInterval</code> and <code>requestAnimationFrame</code> to run in different browsers, and gives you the results in the form of a distribution. You can change the number of milliseconds for <code>setInterval</code> to see how it runs under different settings. <code>setTimeout</code> works similarly to a <code>setInterval</code> with respect to delays. <code>requestAnimationFrame</code> generally defaults to the 60fps depending on the browser. To see what happens when you switch to a different tab or have an inactive window, simply open the page, switch to a different tab and wait for a while. It will continue to log the actual time it takes for these functions in an inactive tab.</p> <h2>Test Two</h2> <p>Another way to test it is to log the timestamp repeatedly with <code>setInterval</code> and <code>requestAnimationFrame</code> and view it in a detached console. You can see how frequently it is updated (or if it is ever updated) when you make the tab or window inactive.</p> <ul> <li><a href="http://jsfiddle.net/laucheukhim/Aev79/">Test for <code>setInterval</code></a></li> <li><a href="http://jsfiddle.net/laucheukhim/WfdnM/1/">Test for <code>requestAnimationFrame</code></a></li> </ul> <h2>Results</h2> <p><strong>Chrome</strong><br> Chrome limits the minimum interval of <code>setInterval</code> to around 1000ms when the tab is inactive. If the interval is higher than 1000ms, it will run at the specified interval. It does not matter if the window is out of focus, the interval is limited only when you switch to a different tab. <code>requestAnimationFrame</code> is paused when the tab is inactive.</p> <pre><code>// Provides control over the minimum timer interval for background tabs. const double kBackgroundTabTimerInterval = 1.0; </code></pre> <p><sup><a href="https://codereview.chromium.org/6546021/patch/1001/2001">https://codereview.chromium.org/6546021/patch/1001/2001</a></sup></p> <p><strong>Firefox</strong><br> Similar to Chrome, Firefox limits the minimum interval of <code>setInterval</code> to around 1000ms when the tab (not the window) is inactive. However, <code>requestAnimationFrame</code> runs exponentially slower when the tab is inactive, with each frame taking 1s, 2s, 4s, 8s and so on.</p> <pre><code>// The default shortest interval/timeout we permit #define DEFAULT_MIN_TIMEOUT_VALUE 4 // 4ms #define DEFAULT_MIN_BACKGROUND_TIMEOUT_VALUE 1000 // 1000ms </code></pre> <p><sup><a href="https://hg.mozilla.org/releases/mozilla-release/file/0bf1cadfb004/dom/base/nsGlobalWindow.cpp#l296">https://hg.mozilla.org/releases/mozilla-release/file/0bf1cadfb004/dom/base/nsGlobalWindow.cpp#l296</a></sup></p> <p><strong>Internet Explorer</strong><br> IE does not limit the delay in <code>setInterval</code> when the tab is inactive, but it pauses <code>requestAnimationFrame</code> in inactive tabs. It does not matter whether the window is out of focus or not.</p> <p><strong>Edge</strong><br> Starting from Edge 14, <code>setInterval</code> is capped at 1000ms in inactive tabs. <code>requestAnimationFrame</code> is always paused in inactive tabs.</p> <p><strong>Safari</strong><br> Just like Chrome, Safari caps <code>setInterval</code> at 1000ms when the tab is inactive. <code>requestAnimationFrame</code> is paused as well.</p> <p><strong>Opera</strong><br> Since the adoption of the Webkit engine, Opera exhibits the same behavior as Chrome. <code>setInterval</code> is capped at 1000ms and <code>requestAnimationFrame</code> is paused when the tab is inactive.</p> <h2>Summary</h2> <p>Repeating intervals for inactive tabs:</p> <pre> <b>setInterval</b> <b>requestAnimationFrame</b> <b>Chrome</b> 9- not affected not supported 10 not affected paused 11+ >=1000ms paused <b>Firefox</b> 3- not affected not supported 4 not affected 1s 5+ >=1000ms 2<sup>n</sup>s (n = number of frames since inactivity) <b>IE</b> 9- not affected not supported 10+ not affected paused <b>Edge</b> 13- not affected paused 14+ >=1000ms paused <b>Safari</b> 5- not affected not supported 6 not affected paused 7+ >=1000ms paused <b>Opera</b> 12- not affected not supported 15+ >=1000ms paused </pre>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload