Firefox切换标签后requestAnimationFrame未完全停止？合规性疑问

1. 什么是“后台标签”？ #

• 后台标签指当前未被用户聚焦的浏览器标签页：当你从当前标签切换到其他标签、最小化浏览器窗口，或者切换到其他应用程序时，原标签就会进入后台状态。

2. 为什么你的示例中requestAnimationFrame没有完全停止？ #

MDN提到的“暂停”是浏览器的性能优化策略，但不同浏览器的实现存在差异：

• 多数浏览器（如Chrome）会在后台标签中大幅降低requestAnimationFrame调用频率，甚至完全暂停；但Firefox的处理逻辑不同，它会将后台标签的requestAnimationFrame调用频率限制在极低水平（约每10秒一次），而非完全停止。
• 你示例中的音频仍能播放，正是因为Firefox还在以极低频率触发回调，满足了代码中“每1秒（相对于回调时间戳）播放音频”的节流逻辑——但实际间隔会因回调触发变慢而大幅延长。

3. 这种行为是否符合规范？ #

完全符合规范。HTML标准仅建议浏览器对后台标签的动画进行节流或暂停以节省系统资源（CPU、电量），并未强制要求完全停止requestAnimationFrame调用。不同浏览器可根据自身性能优化策略实现，因此Firefox的表现是合理的。

测试代码 #

function playAudio() {
  const ctx = new AudioContext();
  const osc = ctx.createOscillator();
  const startTime = ctx.currentTime;
  const stopTime = startTime + 0.2;
  osc.frequency.value = 440;
  osc.connect(ctx.destination);
  osc.start(startTime);
  osc.stop(stopTime);
}

let lastActionTime = 0;

function action(timestamp) {
  console.log(timestamp);
  window.requestAnimationFrame(action);
  if (timestamp - lastActionTime < 1000) {  // Throttle
    return
  }
  playAudio()
  lastActionTime = timestamp
}

function startAction() {
  window.requestAnimationFrame(action);
}

window.onload = function() {
  const startButton = document.getElementById("start");
  startButton.addEventListener("click", startAction)
}

<button id="start">Start</button>

内容的提问来源于stack exchange，提问作者Lone Learner