Web Worker 分担大数据计算的消息设计

Web Worker 真正适合分担大数据计算的关键，不是把一段函数“丢到后台”，而是把消息协议、数据传输和取消边界先定清楚。主线程发送带有 taskId 的任务信封，Worker 只处理约定的 type，结果再带着同一个标识返回，这样多个任务交错时也不会把旧结果写回新界面。

官方地址：https://developer.mozilla.org/en-US/docs/Web/API/Worker

先把消息协议定成可追踪的任务

一个可维护的 Worker 消息至少要有任务标识、消息类型和业务载荷。不要直接把一个巨大数组裸传过去，也不要让 Worker 根据字段是否存在来猜测当前动作。下面的信封把请求和返回统一成四类消息，主线程只认当前 taskId。

// main.js：为每次计算创建可追踪的消息信封
const worker = new Worker("worker.js", { type: "module" });
let currentTaskId = 0;

function runTask(values) {
  const taskId = ++currentTaskId;
  worker.postMessage({
    taskId,
    type: "compute",
    payload: { values }
  });
}

worker.addEventListener("message", (event) => {
  const message = event.data;
  // 旧任务的进度或结果不能覆盖当前任务。
  if (message.taskId !== currentTaskId) return;
  if (message.type === "progress") renderProgress(message.payload);
  if (message.type === "result") renderResult(message.payload);
  if (message.type === "error") renderError(message.payload);
});

这里的 taskId 不承担业务数据，只承担关联关系。Worker 可以回传进度，也可以直接回传结果；错误则作为一种明确类型返回，避免把异常对象或不稳定的字符串格式当成协议。

普通数据克隆，大块缓冲区再考虑 transfer

postMessage() 默认使用结构化克隆，发送端和 Worker 得到的是相互独立的对象。它适合配置、数字数组和普通记录，但复制成本会随数据规模增长。函数、DOM 节点和部分带特殊内部状态的对象不能直接克隆，应该先转换成 Worker 能处理的纯数据。

当输入是连续的二进制缓冲区，可以把 ArrayBuffer 放进 transfer 列表。这样重点是转移所有权，而不是复制整块内存；发送完成后，主线程原来的缓冲区会被分离，不能再继续读取。

// main.js：转移缓冲区前先确认发送端不再使用它
const buffer = new ArrayBuffer(1024 * 1024);
worker.postMessage(
  { taskId: currentTaskId, type: "compute-buffer", payload: { buffer } },
  [buffer] // 中文说明：转移所有权，发送端的 buffer 会被 detach
);

// 这里不能再把 buffer 当作可写缓存使用；需要时应重新创建或等待结果。

Worker 内部只做计算，返回结果前保留任务标识

Worker 端不要直接修改页面，也不要把所有中间对象都回传。它接收协议消息，计算完成后只返回页面真正需要的数据。对于批量任务，可以按块处理并定期发送进度，主线程只更新进度展示。

// worker.js：Worker 只处理约定的消息类型并回传结果
self.addEventListener("message", (event) => {
  const { taskId, type, payload } = event.data;
  if (type !== "compute") return;

  try {
    const total = payload.values.reduce((sum, value) => sum + value, 0);
    // 中文说明：返回同一个 taskId，避免并发任务结果串线。
    self.postMessage({ taskId, type: "result", payload: { total } });
  } catch (error) {
    // 中文说明：只传递可序列化错误信息，保持消息协议稳定。
    self.postMessage({ taskId, type: "error", payload: { message: String(error) } });
  }
});

取消不是成功结果：用 terminate 收紧生命周期

当用户连续提交新查询，旧 Worker 即使还在计算，结果也已经没有展示价值。主线程可以先调用 terminate()，再创建新的 Worker；同时把旧任务标记为取消。它是立即停止，不保证把当前计算收尾，也不会自动替你恢复资源引用。

// main.js：新任务替换旧任务时，先收紧旧 Worker 的生命周期
function replaceWorker() {
  worker.terminate(); // 中文说明：立即停止旧 Worker，不等待它完成。
  currentTaskId += 1; // 中文说明：让旧消息即使到达也无法匹配当前任务。
  // 生产代码可在这里重新创建 worker，并重新绑定 message/error 监听器。
}

实践中要同时处理三件事：保存当前任务标识、在消息入口过滤迟到结果、在终止后清理 Worker 引用和监听器。若业务需要可恢复取消，应在协议里增加分块检查点或改用可协作停止的标志位；不要把 terminate() 描述成优雅中断。

常见问题

结构化克隆和 transfer 能同时使用吗？

可以。一个消息对象仍可走结构化克隆，而其中列入 transfer 的资源按转移处理；关键是把待转移对象实际挂在消息里，并接受发送端失去所有权。

为什么 Worker 结果明明返回了，页面却显示旧数据？

通常是没有用 taskId 做关联。每次提交都递增标识，回调只接受当前标识，旧任务就算晚到也只能被丢弃。

什么时候不该使用 terminate？

如果计算需要保存中间状态、释放自定义资源或向服务端发送收尾消息，直接终止可能太粗暴。此时应设计可协作停止的消息协议，分块计算并在边界检查取消标志。