Help us understand the problem. What is going on with this article?

setInterval()の各ブラウザのバックグラウンドでの動作を調べてみた

More than 3 years have passed since last update.

動機

JavaScriptを書いてる際によくお世話になっているsetInterval()。
これがブラウザがバックグラウンドになった際にどんな動作をしているのかちゃんと確認したことが無かったので確認をしてみたくなった。

確認した環境

  • Mac
    • Chrome(最新版)
    • Firefox Nightly
    • Safari11
  • Windows10
    • Edge
    • IE11

バックグラウンド時の仕様

MDNのドキュメントには以下のようにある。

バックグラウンドのタブによる負荷 (およびバッテリー消費) を軽減するため、アクティブ状態でないタブでのタイマーの呼び出しは、1 秒 (1000 ms) あたり 1 回までとなります。

Firefox はこの動作をバージョン 5 (バグ 633421 を参照。1000 ms の定数は設定項目 dom.min_background_timeout_value で変更できます) から、Chrome はこの動作をバージョン 11 (crbug.com/66078) から実装しています。

MDNの遅延が長い理由より引用

果たして本当にそうなっているのか。。。

確認用コード

let count = 0;
setInterval(() => {
  count++;
  console.log(count);
}, 100);

結果

  • Chrome、Firefox Nightly、Safari11、Edge
    • ドキュメント通りの実装。バックグラウンドでは最小遅延時間が1秒になった。
  • IE11
    • 100msの遅延時間は変わらず実行され続けた。

さすがはIE11。ブレない。

tokino
フロント周りを主にやってる人。時々PHPer。
d2cdot
テクノロジーの力で『伝えたいコトを伝わるカタチに』
https://www.d2cdot.co.jp/
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away