タブを裏に回すとrequestAnimationFrameは止まり、setIntervalはガクッと更新頻度を落とす 💻

タブに現在のFPSを表示するテストサイトを作成しました。
こちらで挙動を確認したところ、Chromeでは、ブラウザのタブを裏に回した際、requestAnimationFrameは止まり、setIntervalは1秒に1回の更新になります。

DEMO

requestAnimationFrame

https://develop.kimizuka.org/fps/request-animation-frame/

setInterval

https://develop.kimizuka.org/fps/set-interval/

ソースコード

requestAnimationFrame

let count = 0;
let lastDelta = performance.now();

tick();

function tick() {
  const delta = performance.now();
  const fps = 1000 / (delta - lastDelta);

  lastDelta = delta;
  document.title = `FPS: ${fps.toFixed(2)}(${count++})`;
  requestAnimationFrame(tick);
}

setInterval

let count = 0;
let lastDelta = performance.now();

setInterval(() => {
  const delta = performance.now();
  const fps = 1000 / (delta - lastDelta);

  lastDelta = delta;
  document.title = `FPS: ${fps.toFixed(2)}(${count++})`;
  requestAnimationFrame(tick);
}, 1000 / 60);