Web Worker 是规避浏览器后台标签页定时器限频的唯一稳定方案，通过独立线程+时间偏移校准+服务端时间同步，实现高精度倒计时。
浏览器对后台标签页的定时器强制限频是标准行为，不是 bug。Chrome、Edge 等会把 setTimeout 和 setInterval 的最小间隔拉长到约 1 秒甚至更久，导致倒计时跳秒、状态滞后。真正有效的绕过方式，不是“强行提速”，而是把计时逻辑移出主线程——Web Worker 是目前唯一稳定可行的路径。
用 Web Worker 承担核心计时逻辑
Worker 运行在独立线程，不受页面可见性影响，天然规避主线程节流。关键不是让它“永远不暂停”，而是让它“知道自己停了多久，并能准确补上”。
- 新建一个
countdown-worker.js文件，在其中用短周期轮询（如setTimeout(..., 50)）持续读取Date.now() - 不依赖固定间隔触发，而是基于基准时间（
baseTime）+ 已暂停时长（pausedDuration）动态计算“该不该执行” - 主线程通过
visibilitychange监听页面隐藏/显示，并向 Worker 发送{ type: 'pause', timestamp }或{ type: 'resume', timestamp }消息 - Worker 收到
resume后，累加本次暂停时长，后续所有触发判断都包含该偏移量
用 worker-timers 库省去重复造轮子
自己实现容易遗漏校准、ID 管理、消息往返延迟补偿等细节。成熟方案已封装全部逻辑，开箱即用。
- 安装：
npm install worker-timers - 导入后直接替换原生 API：
import { setInterval, clearTimeout } from 'worker-timers' - 调用方式与原生完全一致，例如
setInterval(() => console.log('每100ms执行'), 100)，即使页面最小化也保持精度 - 内部自动处理 visibility 感知、暂停累计、服务端时间同步、误差漂移校正，实测后台仍可维持 100ms 级稳定输出
配合服务端时间做兜底校准
Worker 再精准，长期运行也会有毫秒级漂移。尤其用户长时间切走又返回，单靠本地推算可能偏差数秒。必须引入可信时间源。
- 首次加载时请求服务端时间接口（如
/api/time），得到服务器当前毫秒戳 - 与
Date.now()做差，得出本地与服务端的时间差timeDiff - 主线程和 Worker 都可定期（如每 30 秒）向服务端同步一次本地时间，Worker 根据往返延迟动态修正
baseTime - 对用户可见的倒计时，UI 渲染时统一用
serverTime + timeDiff计算剩余值，而非仅靠 Worker 推进
UI 层只负责渲染，不参与计时推进
主线程的任务应严格限定为：接收 Worker 消息 → 计算当前剩余时间 → 更新 DOM。避免在主线程里用 setInterval 做倒计时动画或状态轮询。
- Worker 每秒或每 100ms 发送一次当前剩余毫秒数（
postMessage({ remaining: 12345 })） - 主线程监听
onmessage，拿到数值后立即更新界面；无需自己维护计数器或减法逻辑 - 若出现跳变（比如从 10s 直接跳到 7s），可用数字滚动动画平滑过渡，提升视觉一致性
- 页面恢复前台瞬间，可主动触发一次服务端时间校准，重置 Worker 的
baseTime，消除累积误差
