Comment les navigateurs mettent-ils en pause/modifient-ils Javascript lorsque l'onglet ou la fenêtre n'est pas actif?

Test Un

J'ai écrit un test spécifiquement à cette fin:
Distribution de fréquence D'images: setInterval vs requestAnimationFrame

^{Remarque: Ce test est assez gourmand en CPU. requestAnimationFrame N'est pas pris en charge par IE 9 - et Opera 12-.}

Le test enregistre le temps réel qu'il faut pour qu'un setInterval et requestAnimationFrame s'exécute dans différents navigateurs, et vous donne les résultats sous la forme d'une distribution. Vous pouvez modifier le nombre de millisecondes pour setInterval pour voir comment il fonctionne sous différents réglages. setTimeout fonctionne de la même manière qu'un setInterval en ce qui concerne les retards. {[3] } généralement par défaut à la 60fps en fonction du navigateur. Pour voir ce qui se passe lorsque vous passez à un onglet différent ou que vous avez une fenêtre inactive, ouvrez simplement la page, passez à un onglet différent et attendez un moment. Il continuera à enregistrer le temps réel qu'il faut pour ces fonctions dans un onglet inactif.

Deux

Une autre façon de le tester est de consigner l'horodatage à plusieurs reprises avec setInterval et requestAnimationFrame et affichez-le dans une console détachée. Vous pouvez voir à quelle fréquence il est mis à jour (ou s'il est jamais mis à jour) lorsque vous rendez l'onglet ou la fenêtre inactif.

• essai pour setInterval
• essai pour requestAnimationFrame

Résultats

Chrome
Chrome limite l'intervalle minimum de setInterval à environ 1000 ms lorsque l'onglet est inactif. Si l'intervalle est supérieur à 1000 ms, il s'exécutera à l'intervalle spécifié. Il n'a pas d'importance si la fenêtre est floue, l'intervalle est limité uniquement lorsque vous passez à un onglet différent. requestAnimationFrame est mis en pause lorsque l'onglet est inactif.

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

^{https://codereview.chromium.org/6546021/patch/1001/2001}

Firefox
Similaire à Chrome, Firefox limite l'intervalle minimum de setInterval à environ 1000 ms lorsque l'onglet (pas la fenêtre) est inactif. Cependant, requestAnimationFrame s'exécute exponentiellement plus lentement lorsque l'onglet est inactif, chaque image prenant 1s, 2s, 4s, 8s et ainsi de suite.

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

^{https://hg.mozilla.org/releases/mozilla-release/file/0bf1cadfb004/dom/base/nsGlobalWindow.cpp#l296}

Internet Explorer
IE ne limite pas le délai dans setInterval lorsque l'onglet est inactif, mais il met en pause requestAnimationFrame dans les onglets inactifs. Peu importe si la fenêtre est floue ou non.

Bord
À partir du bord 14, setInterval est plafonné à 1000 ms dans les onglets inactifs. requestAnimationFrame est toujours en pause dans les onglets inactifs.

Safari
Tout comme Chrome, Safari caps setInterval à 1000ms lorsque l'onglet est inactif. {[3] } est également en pause.

Opéra
Depuis L'adoption du moteur Webkit, Opera présente le même comportement que Chrome. setInterval est plafonné à 1000ms et requestAnimationFrame est mis en pause lorsque l'onglet est inactif.

Résumé

Répétition des intervalles pour les onglets inactifs:

           setInterval     requestAnimationFrame
Chrome
9-         not affected    not supported
10         not affected    paused
11+        >=1000ms        paused

Firefox
3-         not affected    not supported
4          not affected    1s
5+         >=1000ms        2ns (n = number of frames since inactivity)

IE
9-         not affected    not supported
10+        not affected    paused

Edge
13-        not affected    paused
14+        >=1000ms        paused

Safari
5-         not affected    not supported
6          not affected    paused
7+         >=1000ms        paused

Opera
12-        not affected    not supported
15+        >=1000ms        paused