Web Workers性能异常低下？我的数组元素相加测试遇瓶颈

嘿，我太懂你这种满心期待并行提速结果却翻车的感受了！咱们来好好唠唠问题出在哪，以及怎么优化才能让Web Workers真正发挥作用。

核心问题：开销盖过了并行收益 #

你遇到的情况其实很常见，尤其是这种超轻量计算场景，Web Workers的额外开销反而会抵消并行带来的优势，主要原因有这几点：

• 数据拷贝的巨大开销：默认情况下，主线程和Worker之间传递数据用的是「结构化克隆」，哪怕是TypedArray（比如你用的Int8Array），也会完整拷贝一份数据。25万元素的数组来回传递，这个拷贝的时间可能比你做加法的时间还长！
• 任务粒度太细碎：25万元素分给4个Worker，每个才处理6万多简单加法——这种计算本身几乎不费时间，但Worker的启动、调度、通信这些环节的开销却占了大头，完全得不偿失。
• 主线程调度成本：你还要花精力在主线程管理4个Worker的任务分发、结果收集，这些协调工作也会额外消耗资源。

优化方案：让Web Workers物尽其用 #

针对你的场景，咱们可以从这几个方向优化：

1. 用Transferable Objects（可转移对象）跳过拷贝 #

对于TypedArray，你可以直接把数组的buffer所有权转移给Worker，完全不需要拷贝数据，通信开销几乎为0。用法很简单，在postMessage的时候把buffer作为第二个参数传递：

// 主线程传递数据时转移buffer
worker.postMessage({ aChunk, bChunk }, [aChunk.buffer, bChunk.buffer]);

// Worker返回结果时也转移回去
self.postMessage({ result }, [result.buffer]);

这样一来，数据传递的开销就被彻底砍掉了。

2. 调整任务粒度，减少Worker数量 #

既然加法是超轻量计算，就别搞太多Worker了——试试只创建1-2个Worker，给每个分配更大的任务块。比如25万元素分给1个Worker，或者分成2大块，这样调度和通信的开销会大大降低，并行的收益才能体现出来。

3. 复用Worker，避免重复初始化 #

别每次计算都新建Worker！提前创建好Worker池，重复使用这些Worker，能省去每次创建Worker的初始化开销。比如提前初始化2个Worker，下次计算直接给它们派活就行。

4. 先对比主线程直接计算的性能 #

这种简单的逐元素加法，JS引擎的JIT编译已经做了超多优化，主线程直接用循环计算可能已经快得离谱。比如试试这段主线程代码对比下：

for (let i = 0; i < globalElements; i++) {
  c[i] = a[i] + b[i];
}

说不定主线程直接跑比用Worker还快，毕竟省掉了所有通信开销。

优化后的示例代码 #

这里给你一个调整后的完整示例，用了可转移对象和更少的Worker：

// 主线程代码
const workerCount = 2;
const workers = Array.from({length: workerCount}, () => new Worker('worker.js'));
const globalElements = 250000;

function createArray(value, elements) {
  return new Int8Array(elements).fill(value);
}

let a = createArray(1, globalElements);
let b = createArray(2, globalElements);
let c = new Int8Array(globalElements);

const chunkSize = Math.ceil(globalElements / workerCount);
let completed = 0;

workers.forEach((worker, idx) => {
  const start = idx * chunkSize;
  const end = Math.min(start + chunkSize, globalElements);
  // 用subarray获取原数组的片段，不创建新数组
  const aChunk = a.subarray(start, end);
  const bChunk = b.subarray(start, end);

  // 转移buffer所有权
  worker.postMessage({ start, aChunk, bChunk }, [aChunk.buffer, bChunk.buffer]);

  worker.onmessage = (e) => {
    const { start, result } = e.data;
    c.set(result, start);
    completed++;

    if (completed === workerCount) {
      console.log('计算完成！');
      // 不再使用的话关闭Worker
      workers.forEach(w => w.terminate());
    }
  };
});

// worker.js代码
self.onmessage = (e) => {
  const { start, aChunk, bChunk } = e.data;
  const result = new Int8Array(aChunk.length);
  // 简单循环计算，JIT会优化得很快
  for (let i = 0; i < aChunk.length; i++) {
    result[i] = aChunk[i] + bChunk[i];
  }
  // 转移结果buffer回主线程
  self.postMessage({ start, result }, [result.buffer]);
};

最后总结 #

Web Workers不是银子弹，它更适合计算密集型、耗时较长的任务（比如复杂数据处理、图像渲染、大文件解析）。像这种超简单的加法，主线程本身就能跑得飞快，反而Worker的通信和调度开销会拖后腿。调整任务粒度、用可转移对象，才能让它真正帮上忙！

内容的提问来源于stack exchange，提问作者M. Heus