前端与浏览器 / 进阶

Web Worker 实战：把计算移出主线程之前要算清成本

说明 Worker 的适用边界、消息协议、可转移对象、错误处理和生命周期管理。 Worker 适合 CPU 密集任务，不适合替所有异步代码背锅。

9 分钟Web Worker · Structured Clone · Transferable · Concurrency

数据传输决定收益

postMessage 默认使用结构化克隆。大对象复制可能抵消并行收益；ArrayBuffer 可通过 transfer list 转移所有权，避免复制，但转移后原线程不能再访问。高频小任务不要每次创建 Worker。复用实例或使用小型 Worker 池，并给队列设置上限，防止用户连续操作积压过期任务。

EXAMPLE / 01Web Worker

self.onmessage = event => {
  const { id, buffer } = event.data;
  try {
    const values = new Float64Array(buffer);
    const total = values.reduce((sum, value) => sum + value, 0);
    self.postMessage({ id, result: { total, count: values.length } });
  } catch (error) {
    self.postMessage({ id, error: String(error) });
  }
};

把实现拆成可验证的小块

结构化克隆和线程调度都有成本

最后回到真实页面检查

消息需要 id、错误和取消语义