如何让浏览器非活跃标签页中的JS增量游戏持续运行？

首先得明确：现代浏览器会对**后台标签页的定时器（setInterval/setTimeout）**进行节流（比如把原本100ms的间隔强制拉长到1000ms甚至更久），这是浏览器的资源保护机制，没法直接绕过。但可以通过以下方式让游戏逻辑不受影响：

方案一：用Web Workers承载核心游戏逻辑 #

Web Worker是运行在后台的独立线程，不受页面可见性的限制，不会被浏览器节流。你可以把游戏的核心计算逻辑（比如资源增长、升级计算这些不需要操作DOM的部分）放在Worker里，主线程只负责接收Worker的计算结果、更新UI。

实现步骤： #

1. 创建一个独立的Worker文件（比如game-worker.js），在里面写核心游戏逻辑：

// game-worker.js
let resources = 0;
let gameLoop;

// 启动游戏循环
function startGameLoop() {
  gameLoop = setInterval(() => {
    // 这里写你的核心逻辑，比如每秒增加资源
    resources += 1;
    // 把结果发送给主线程
    self.postMessage({ resources });
  }, 1000);
}

// 接收主线程的指令
self.addEventListener('message', (e) => {
  if (e.data === 'start') {
    startGameLoop();
  } else if (e.data === 'stop') {
    clearInterval(gameLoop);
  }
});

2. 在主线程中加载Worker，监听消息并更新UI：

// 主线程代码
const gameWorker = new Worker('game-worker.js');

// 启动Worker里的游戏逻辑
gameWorker.postMessage('start');

// 接收Worker发送的游戏状态，更新UI
gameWorker.addEventListener('message', (e) => {
  document.getElementById('resource-count').textContent = e.data.resources;
});

// 页面关闭时停止Worker，避免内存泄漏
window.addEventListener('beforeunload', () => {
  gameWorker.postMessage('stop');
  gameWorker.terminate();
});

方案二：利用Audio Context（不推荐，兼容性差） #

有些浏览器不会限制带有活跃Audio Context的后台标签，但这种方法很不稳定，而且容易被浏览器的自动播放策略拦截，还可能浪费用户的音频资源，所以只作为备选。

简单示例： #

// 初始化一个静音的Audio Context，让浏览器认为页面在处理音频
const audioCtx = new (window.AudioContext || window.webkitAudioContext)();
const oscillator = audioCtx.createOscillator();
const gainNode = audioCtx.createGain();
gainNode.gain.value = 0; // 设置静音
oscillator.connect(gainNode);
gainNode.connect(audioCtx.destination);
oscillator.start();

注意事项 #

• Web Worker不能直接操作DOM，所有UI更新必须通过主线程完成，所以要做好Worker和主线程的消息通信。
• 不要在Worker里做过多的计算，避免占用过多CPU资源，影响用户设备性能。

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