Bagaimana cara browser menjeda / mengubah Javascript ketika tab atau jendela tidak aktif?

Latar Belakang: Saya sedang melakukan beberapa tes antarmuka pengguna yang perlu mendeteksi apakah orang memperhatikan atau tidak. Tapi, pertanyaan ini bukan tentang API visibilitas halaman .

Secara khusus, saya ingin tahu bagaimana kode Javascript saya akan terpengaruh jika tab saat ini tidak aktif, atau jendela browser tidak aktif, di browser yang berbeda. Saya telah menggali yang berikut ini sejauh ini:

• ios 5 menjeda javascript saat tab tidak aktif
• setIntervaldan setTimeoutpenundaan berkurang ketika tab tidak aktif - sepertinya ini baru saja mulai muncul baru-baru ini dan dapat mengacaukan tes unit Jasmine, di sekitar hal-hal lain.
• requestAnimationFrame diperlambat ketika tab tidak aktif (masuk akal, tidak bisa memikirkan mengapa hal ini mempengaruhi terlalu banyak orang)

Saya punya pertanyaan berikut:

• Selain peramban seluler, apakah peramban desktop pernah menghentikan eksekusi JS ketika sebuah tab tidak aktif? Kapan dan browser apa?
• Browser mana yang mengurangi setIntervalpengulangan? Apakah hanya dikurangi menjadi batas atau persentase? Sebagai contoh, jika saya memiliki 10ms repeat versus repeat 5000ms, bagaimana masing-masing akan terpengaruh?
• Apakah perubahan ini terjadi jika jendela tidak fokus, bukan hanya tab? (Saya membayangkan akan lebih sulit untuk dideteksi, karena membutuhkan OS API.)
• Apakah ada efek lain yang tidak akan diamati pada tab aktif? Bisakah mereka mengacaukan hal-hal yang seharusnya dilakukan dengan benar (yaitu tes Jasmine yang disebutkan sebelumnya)?

Tes Satu

Saya telah menulis tes khusus untuk tujuan ini:
Distribusi Frame Rate: setInterval vs requestAnimationFrame

^{Catatan: Tes ini cukup intensif CPU. requestAnimationFrametidak didukung oleh IE 9- dan Opera 12-.}

Tes mencatat waktu aktual yang diperlukan untuk setIntervaldan requestAnimationFramemenjalankan di berbagai browser, dan memberi Anda hasil dalam bentuk distribusi. Anda dapat mengubah jumlah milidetik untuk setIntervalmelihat cara kerjanya di bawah pengaturan yang berbeda. setTimeoutbekerja mirip setIntervaldengan sehubungan dengan penundaan. requestAnimationFrameumumnya default ke 60fps tergantung pada browser. Untuk melihat apa yang terjadi ketika Anda beralih ke tab lain atau memiliki jendela tidak aktif, cukup buka halaman, beralih ke tab lain dan tunggu sebentar. Ini akan terus mencatat waktu aktual yang diperlukan untuk fungsi-fungsi ini di tab tidak aktif.

Tes Dua

Cara lain untuk menguji itu adalah untuk log timestamp berulang kali dengan setIntervaldan requestAnimationFramedan melihatnya di konsol terpisah. Anda dapat melihat seberapa sering itu diperbarui (atau jika pernah diperbarui) ketika Anda membuat tab atau jendela tidak aktif.

• Tes untuk setInterval
• Tes untuk requestAnimationFrame

Hasil

Chrome
Chrome membatasi interval minimum setIntervalhingga sekitar 1000 ms ketika tab tidak aktif. Jika interval lebih tinggi dari 1000ms, itu akan berjalan pada interval yang ditentukan. Tidak masalah jika jendela tidak fokus, intervalnya dibatasi hanya ketika Anda beralih ke tab lain. requestAnimationFramedijeda ketika tab tidak aktif.

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

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

Firefox
Mirip dengan Chrome, Firefox membatasi interval minimum setIntervalhingga sekitar 1000 ms ketika tab (bukan jendela) tidak aktif. Namun, requestAnimationFrameberjalan lebih lambat secara eksponensial ketika tab tidak aktif, dengan setiap frame mengambil 1s, 2s, 4s, 8s, dan seterusnya.

// 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 tidak membatasi penundaan setIntervalketika tab tidak aktif, tetapi berhenti requestAnimationFramedi tab tidak aktif. Tidak masalah apakah jendela itu tidak fokus atau tidak.

Edge
Mulai dari Edge 14, setIntervaldibatasi pada 1000ms dalam tab tidak aktif. requestAnimationFrameselalu dijeda dalam tab tidak aktif.

Safari
Sama seperti Chrome, Safari tutup setIntervalpada 1000 ms saat tab tidak aktif. requestAnimationFramedijeda juga.

Opera
Sejak adopsi mesin Webkit, Opera menunjukkan perilaku yang sama seperti Chrome. setIntervaldibatasi pada 1000 ms dan requestAnimationFramedijeda ketika tab tidak aktif.

Ringkasan

Interval berulang untuk tab tidak aktif:

           setInterval      requestAnimationFrame 
Chrome
9- tidak terpengaruh tidak didukung
10 tidak terpengaruh dijeda
11+> = 1000 ms dijeda

Firefox
3 - tidak terpengaruh tidak didukung
4 tidak terpengaruh 1s
5+> = 1000ms 2 n s (n = jumlah frame karena tidak aktif)

YAITU
9- tidak terpengaruh tidak didukung
10+ tidak terpengaruh dijeda

Tepi
13- tidak terpengaruh dijeda
14+> = 1000ms dijeda

Safari
5- tidak terpengaruh tidak didukung
6 tidak terpengaruh dijeda
7+> = 1000ms dijeda

Opera
12- tidak terpengaruh tidak didukung
15+> = 1000ms dijeda

Apa yang saya amati: pada tab tidak aktif di Chrome , semua Anda setTimeout(harus sama setInterval) menunggu kurang dari 1000ms dibulatkan menjadi 1000ms . Saya pikir batas waktu yang lebih lama tidak dimodifikasi.

Tampaknya menjadi perilaku sejak Chrome 11 dan Firefox 5.0 : https://developer.mozilla.org/en-US/docs/DOM/window.setTimeout#Inactive_tabs

Lebih jauh, saya tidak berpikir itu berlaku seperti ini ketika seluruh jendela tidak aktif (tetapi tampaknya cukup mudah untuk diselidiki).

Jawaban yang lebih baru untuk melengkapi ini: pada chrome 78.0.3904.108 Saya perhatikan semua timeout ini (bukan hanya yang di bawah 1000 ms ) membutuhkan waktu sedikit lebih lama dari yang diharapkan ketika saya pindah ke tab yang berbeda, dan kemudian kembali. Perilaku yang saya lihat lebih tepat dideskripsikan sebagai "Semua timeout pada tab yang tidak aktif dapat ditunda dengan sejumlah tambahan, hingga maksimum 1000 ms." :

let timeouts = [ 500, 1000, 2000, 3000, 10000 ];

let minExcess = document.getElementsByClassName('minExcess')[0];

timeouts.forEach(ms => {
  let elem = document.getElementsByClassName(`t${ms}`)[0];
  let cnt = 0;
  
  let lastMs = +new Date();
  let f = () => {
    let curMs = +new Date();
    let disp = document.createElement('p');
    let net = curMs - lastMs;
    lastMs = curMs;
        
    setTimeout(f, ms);
    if (minExcess.value && (net - ms) < parseInt(minExcess.value)) return;
    
    disp.innerText = `${net},`;
    elem.appendChild(disp);
    if (++cnt > 10) elem.firstElementChild.remove();
    
  };
  setTimeout(f, ms);
  
});

body { font-size: 80%; }
div {
  max-height: 80px;
  overflow-x: auto;
  background-color: rgba(0, 0, 0, 0.1);
  margin-bottom: 2px;
  white-space: nowrap;
}
p { margin: 0; }
div > p {
  margin: 0;
  display: inline-block;
  vertical-align: top;
  margin-right: 2px;
}
input { margin: 0 0 10px 0; }
.t500:before { display: block; content: '500ms'; font-weight: bold; }
.t1000:before { display: block; content: '1000ms'; font-weight: bold; }
.t2000:before { display: block; content: '2000ms'; font-weight: bold; }
.t3000:before { display: block; content: '3000ms'; font-weight: bold; }
.t10000:before { display: block; content: '10000ms'; font-weight: bold; }

<p>Ignore any values delayed by less than this amount:</p>
<input type="text" class="minExcess" value="200" pattern="^[0-9]*$"/>
<div class="timeout t500"></div>
<div class="timeout t1000"></div>
<div class="timeout t2000"></div>
<div class="timeout t3000"></div>
<div class="timeout t10000"></div>