浏览器限频后台定时器是为省电降载的标准行为，非bug；应以服务端时间+本地差值校准、Web Worker独立计时、visibilitychange事件兜底补偿来保障倒计时准确。
后台标签页定时器被限频的本质
浏览器对非活跃标签页的定时器执行频率做硬性限制，不是 bug，而是标准行为。Chrome、Edge 等主流浏览器会将 setInterval/setTimeout 在后台时的最小间隔拉长到约 1 秒甚至更久（规范允许低至 1000ms），且不保证准时——这是为了省电、降负载、防恶意脚本持续运行。此时即使代码写的是 setInterval(fn, 100)，实际回调可能每 1.2 秒、2 秒甚至更久才触发一次，造成倒计时跳秒、状态更新滞后、动画卡顿等时序错乱。
用服务器时间 + 本地差值校准基准
不依赖定时器“走多少次”，而是以服务端下发的绝对时间点为锚点，每次渲染都实时计算剩余毫秒数。这样即使定时器被节流，只要页面恢复前台后立刻重算，误差就不会累积。
- 首次加载时请求接口获取服务器当前时间（如
/api/time），与Date.now()做差，得到timeDiff - 倒计时结束时间设为
serverTime + duration，后续所有“当前时间”都用Date.now() + timeDiff替代 - 配合
requestAnimationFrame或 1s 级定时器做 UI 更新，只负责“读取+渲染”，不负责“推进时间”
用 Web Worker 绕过主线程节流
Worker 运行在独立线程，不受页面可见性影响，可维持稳定节奏计时。适合需要高保真倒计时、心跳上报、离线状态管理等场景。
- 新建
countdown-worker.js，内部用setInterval每秒 postMessage 通知主线程 - 主线程监听消息更新 UI，不参与计时逻辑
- 页面隐藏时 Worker 仍正常运行；页面关闭前调用
worker.terminate()释放资源 - 注意：Worker 无法访问 DOM 和
document，所有交互必须通过 message 通信
监听页面可见性变化做兜底补偿
利用 visibilitychange 事件感知页面是否回到前台，在恢复瞬间校正偏差。
- 记录页面隐藏时的预期剩余时间与实际停留时长
- 页面显示时，用服务器时间或本地差值重新计算真实剩余值，而非继续累减
- 对用户可见的倒计时，可加过渡动画（如数字快速滚动）掩盖跳变，提升体验一致性
