通过 web workers 将核心游戏逻辑移至后台线程，可突破浏览器对非活跃标签页的定时器节流限制，确保增量游戏在最小化或切换标签时仍能准确、稳定地运行。
通过 web workers 将核心游戏逻辑移至后台线程，可突破浏览器对非活跃标签页的定时器节流限制，确保增量游戏在最小化或切换标签时仍能准确、稳定地运行。
现代浏览器为优化性能和功耗，会对非可见标签页（即 document.hidden === true）中的 JavaScript 执行施加严格限制：setTimeout 和 setInterval 的最小间隔会被强制延长至约 1000ms（甚至更久），动画帧（requestAnimationFrame）则完全暂停。这意味着依赖常规定时器的增量游戏在用户切换标签后将大幅减速甚至“冻结”，严重影响玩家体验。
Web Workers 是解决该问题最可靠、标准且广泛支持的方案。它允许你在独立于主线程的后台线程中执行 JavaScript，不受页面可见性影响——即使标签页被最小化、切换或浏览器进入后台，Worker 内的代码仍以全速运行。
✅ 基础实现示例
首先，创建一个 game-worker.js 文件，封装核心游戏逻辑（如资源生成、时间推进、状态计算）：
// game-worker.js
let resources = 0;
let cps = 1; // clicks per second
let lastTick = Date.now();
self.onmessage = function(e) {
if (e.data.type === 'START') {
self.intervalId = setInterval(() => {
const now = Date.now();
const deltaSec = (now - lastTick) / 1000;
resources += cps * deltaSec;
lastTick = now;
// 每秒向主线程同步一次最新状态（避免高频通信）
self.postMessage({
type: 'UPDATE',
data: { resources: Math.floor(resources), timestamp: now }
});
}, 100); // 100ms 精度足够，兼顾性能与准确性
} else if (e.data.type === 'UPDATE_CPS') {
cps = e.data.cps;
}
};
在主页面中启动 Worker 并建立双向通信：
// main.js
const worker = new Worker('./game-worker.js');
// 启动游戏逻辑
worker.postMessage({ type: 'START' });
// 接收 Worker 发来的状态更新
worker.onmessage = function(e) {
if (e.data.type === 'UPDATE') {
document.getElementById('resource-count').textContent =
Math.floor(e.data.data.resources).toLocaleString();
}
};
// 当玩家升级 CPS 时通知 Worker
function upgradeCps(newCps) {
worker.postMessage({ type: 'UPDATE_CPS', cps: newCps });
}
⚠️ 关键注意事项
- Worker 无法直接访问 DOM 或全局对象（如 window、document）：所有 UI 更新必须由主线程完成。Worker 负责纯计算逻辑，主线程负责渲染与交互。
- 通信开销需控制：频繁使用 postMessage 会影响性能。建议批量聚合状态、降低同步频率（如每 100–500ms 一次），或采用差分更新策略。
- 内存与生命周期管理：务必在页面卸载前终止 Worker（worker.terminate()），防止内存泄漏；若游戏支持持久化，可在 Worker 中结合 IndexedDB 存储关键状态。
- 兼容性：Web Workers 在所有现代浏览器（Chrome、Firefox、Safari、Edge）中均被完整支持，无需 polyfill。
✅ 替代方案对比（不推荐）
- document.hidden + setInterval（如提问者初稿）：仅缓解部分问题，无法绕过浏览器对 setInterval 的节流，长时间失焦后累计误差显著。
- AudioContext 或 WebRTC 黑科技：违反规范、易被浏览器拦截，且存在兼容性与稳定性风险。
- Page Visibility API 配合本地存储补偿：适合简单离线结算，但无法实现实时连续逻辑（如自动点击、实时冷却），精度和体验远逊于 Worker。
综上，Web Workers 不仅是技术上最合规的解法，更是面向未来、可扩展性强的架构选择——它将计算与渲染职责分离，天然契合增量游戏“后台持续运转 + 前端按需呈现”的核心需求。
