如何让页面处于隐藏状态时requestAnimationFrame仍正常执行

浏览器默认会在标签页处于后台隐藏状态时暂停requestAnimationFrame的调度，以此降低性能损耗和电量消耗，这是浏览器的原生限制。
下面是比直接全局替换requestAnimationFrame更合理的实现方式：

方案1：基于可见性检测自动切换调度器 #

通过Page Visibility API监听页面显示状态，前台使用原生API保证渲染性能，后台自动切换为定时器调度，对原有业务逻辑侵入性最低：

// 保留原生API引用
const nativeRequestAnimationFrame = window.requestAnimationFrame;
const nativeCancelAnimationFrame = window.cancelAnimationFrame;
const fallbackTimers = new Map();
let nextTimerId = 1;

document.addEventListener('visibilitychange', () => {
  // 页面隐藏时切换为setTimeout实现
  if (document.hidden) {
    window.requestAnimationFrame = (callback) => {
      const timerId = nextTimerId++;
      const timeoutId = setTimeout(() => {
        callback(performance.now());
        fallbackTimers.delete(timerId);
      }, 1000 / 60);
      fallbackTimers.set(timerId, timeoutId);
      return timerId;
    };

    window.cancelAnimationFrame = (id) => {
      const timeoutId = fallbackTimers.get(id);
      if (timeoutId) {
        clearTimeout(timeoutId);
        fallbackTimers.delete(id);
      }
    };
    return;
  }
  // 页面恢复显示时切回原生API，清理残留定时器
  window.requestAnimationFrame = nativeRequestAnimationFrame;
  window.cancelAnimationFrame = nativeCancelAnimationFrame;
  fallbackTimers.forEach(timeoutId => clearTimeout(timeoutId));
  fallbackTimers.clear();
});

该方案的优势：

• 前台场景完全复用原生requestAnimationFrame能力，不影响正常动画的流畅度和性能
• 仅在页面隐藏时启用定时器兜底，避免不必要的资源浪费
• 配套实现了cancelAnimationFrame的兼容逻辑，原有调用逻辑无需修改即可正常运行

方案2：Web Worker驱动高精度调度 #

如果对后台执行的时间精度要求较高，可以借助Web Worker实现不受页面可见性影响的调度：

• 将调度逻辑放在独立的Web Worker中运行，Worker的定时器不会因为前台页面隐藏而降频
• 主线程维护需要执行的回调队列，Worker每16ms向主线程发送消息触发回调执行
• 页面可见时优先使用原生requestAnimationFrame，隐藏时切换为Worker消息触发，调度精度远高于主线程的setTimeout

注意事项 #

回调逻辑如果包含DOM操作，必须放在主线程执行，Web Worker仅负责调度触发，不能直接操作DOM
若业务不需要严格60fps的执行频率，可以适当调大后台调度的间隔时间，进一步降低性能和电量消耗

内容的提问来源于stack exchange，提问作者brown john