Web Worker 不能直接改 DOM 时应该如何回传结果

Web Worker 不能直接改 DOM，这是它和主线程之间最重要的边界。正确做法是让 Worker 只接收可序列化的数据并完成计算，再用 postMessage() 把结果发回主线程；主线程在 worker.onmessage 中读取结果，最后更新 textContent、属性或节点结构。不要尝试在 Worker 里调用 document.querySelector()，那不是权限不足，而是执行上下文根本没有页面的 DOM。

核心边界：Worker 只算数据，主线程负责 DOM

Dedicated Worker 有自己的全局作用域。它可以运行普通 JavaScript、发起网络请求、访问部分浏览器 API，却不能直接拿到创建它的页面对象。页面里的 document、元素节点和大多数 window 对象都属于主线程，所以 Worker 里写 DOM 操作会得到 ReferenceError 或类似的不可用结果。

可以把职责先压缩成下面这张表：

这个边界也解释了为什么 Worker 适合做文本解析、图片像素计算和大数组处理，却不适合直接承担页面渲染。渲染动作要回到主线程，Worker 只返回渲染所需的数据。

用 postMessage 回传结构化结果

主线程创建 Worker 后，向它发送任务；Worker 在自己的 onmessage 中读取输入，算出结果，再调用全局 postMessage()。返回主线程后，事件挂在 Worker 实例上的 onmessage 被触发。

// main.js：主线程只负责派发任务和更新页面
const worker = new Worker(new URL("./worker.js", import.meta.url), { type: "module" });
const result = document.querySelector("#result");

worker.onmessage = (event) => {
  // 只读取 Worker 返回的数据，不把 DOM 引用传进 Worker
  const { requestId, value } = event.data;
  result.textContent = `任务 ${requestId} 的结果：${value}`;
};

// 发送普通对象，Worker 侧会收到结构化克隆后的副本
worker.postMessage({ requestId: "task-01", numbers: [3, 5, 8] });

// worker.js：Worker 内没有 document，结果通过全局 postMessage 返回
self.onmessage = (event) => {
  const { requestId, numbers } = event.data;
  const value = numbers.reduce((sum, item) => sum + item, 0);

  // 返回新的普通对象，主线程在 worker.onmessage 中接收
  self.postMessage({ requestId, value });
};

注意两侧写法看起来很像：主线程把方法挂在 worker 实例上，Worker 内则直接使用全局的 self.onmessage 和 self.postMessage。消息默认按结构化克隆传递，因此主线程与 Worker 不会共享同一个普通对象实例。

把错误、过期响应和生命周期一起设计

只写成功分支，演示能跑，线上却容易混乱。多个任务同时发送时，结果返回顺序未必等于发送顺序，主线程应使用 requestId 识别响应；Worker 内的异常也应转成可识别的消息，而不是让页面永远等待。

// 主线程：只渲染仍然有效的请求，并统一处理错误
let latestRequestId = 0;

worker.onmessage = (event) => {
  const { requestId, ok, value, error } = event.data;
  if (requestId !== latestRequestId) return; // 丢弃过期结果
  result.textContent = ok ? String(value) : `计算失败：${error}`;
};

function run(numbers) {
  const requestId = ++latestRequestId;
  worker.postMessage({ requestId, numbers });
}

worker.onerror = (event) => {
  result.textContent = `Worker 加载或执行失败：${event.message}`;
};

如果数据量较大，普通对象会经历结构化克隆；对 ArrayBuffer 这类可转移对象，可以在第二个参数里传入 transfer list。转移后，发送方不再拥有那块缓冲区，不能把“传递”误认为“复制”。页面离开当前功能时调用 worker.terminate()，避免一个已经不可见的任务继续占用资源。

常见问题

Worker 能不能直接修改 canvas？

普通 DOM 不能直接改；如果业务需要并且浏览器支持，可以研究 OffscreenCanvas，把绘制对象以专门的 Worker 能力转移过去，但这和直接访问页面 DOM 是两条不同路径。

为什么 Worker 返回的数据不是原来的对象？

普通消息使用结构化克隆，接收端得到的是可用内容相同的副本。只有明确支持的对象配合 transfer list 才会转移所有权。

主线程一定要使用 onmessage 吗？

也可以使用 worker.addEventListener("message", handler)，核心仍是由主线程接收消息后更新 DOM。

Worker 适合替代所有异步请求吗？

不适合。它主要解决计算阻塞；如果任务只是等待网络，先使用普通异步 API，再根据 CPU 占用和交互卡顿决定是否引入 Worker。