Web Worker作为高精度定时器在iOS浏览器中为何表现不一致？

问题本质 #

你用忙等待循环实现的10ms定时在iOS Safari失效，核心原因是iOS对Web Worker的线程调度有严格节流机制——当Worker持续处于忙等待状态时，系统会限制其CPU占用，导致循环无法精准卡准10ms阈值。而setTimeout在移动端有最低4ms延迟（后台状态下还会更高），requestAnimationFrame依赖屏幕刷新帧率（通常60fps≈16.6ms），自然满足不了10ms的精度要求。

可行解决方案 #

1. 利用AudioContext高精度时钟（推荐适配实时交互） #

AudioContext的currentTime精度可达微秒级，由硬件音频驱动维护，不受浏览器线程调度或系统节流影响，完全无需预调度事件，适配你的实时交互场景：

Worker端代码修改

let audioContext;

onmessage = function(event) {
  // 初始化AudioContext（需在用户交互后触发，符合iOS音频激活政策）
  if (!audioContext) {
    audioContext = new AudioContext({ sampleRate: 44100 });
  }
  scheduleNextTick();
};

function scheduleNextTick() {
  const targetTime = audioContext.currentTime + 0.01; // 10ms转换为秒
  audioContext.resume().then(() => {
    // 用setTimeout做基础调度
    const timer = setTimeout(() => {
      postMessage({ data: [] });
      scheduleNextTick();
    }, (targetTime - audioContext.currentTime) * 1000);
    
    // 用AudioContext事件兜底修正误差
    const oscillator = audioContext.createOscillator();
    oscillator.connect(audioContext.destination);
    oscillator.onended = () => {
      clearTimeout(timer);
      postMessage({ data: [] });
      scheduleNextTick();
    };
    oscillator.start(targetTime);
    oscillator.stop(targetTime + 0.0001);
  });
}

主线程注意事项

必须在用户首次交互（如点击、触摸）后再初始化Worker，确保AudioContext能正常激活（iOS要求音频上下文必须由用户交互触发，禁止自动初始化）。

2. 优化忙等待循环（适配iOS调度逻辑） #

iOS会对长时间忙等待做降频处理，可拆分循环为小片段，插入空的Atomics.wait释放CPU时间片（需使用SharedArrayBuffer，注意跨域政策）：

onmessage = function(event) {
  const delay = 10;
  let startTime = Date.now();
  while (Date.now() < startTime + delay) {
    // 插入空原子等待，让系统有机会调度但不真正阻塞
    Atomics.wait(new Int32Array(new SharedArrayBuffer(4)), 0, 0, 0);
  }
  postMessage({ data: [] });
};

注意：使用SharedArrayBuffer需要页面配置跨域隔离头：Cross-Origin-Opener-Policy: same-origin和Cross-Origin-Embedder-Policy: require-corp，否则浏览器会禁用该API。

3. 结合MessageChannel的双向触发机制 #

避免Worker长时间空转，改用主线程与Worker的消息配合高精度时间计算：

• Worker接收到消息后，计算当前时间与目标10ms间隔的差值，用最小的setTimeout补全剩余时间，再发送消息回主线程；
• 这种方式降低Worker的CPU占用率，减少iOS系统触发节流的概率。

核心原理补充 #

• iOS对Web Worker的资源限制远严于桌面端，无意义的忙等待会被系统判定为无效计算，强制降频；
• AudioContext的时钟独立于JS引擎，由硬件音频模块维护，精度远高于Date.now()等JS时间API；
• Atomics.wait能让Worker在循环中短暂释放CPU，避免被系统判定为"恶意占用资源"而限制运行。

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