JavaScript怎样使用Web Workers【教程】_技术教程

Web Workers 无法访问 DOM，需通过 postMessage 通信；传参受结构化克隆限制，大数组优先用 ArrayBuffer + transferable；调试需手动启用 DevTools Worker 面板；使用后须调用 terminate() 防内存泄漏。

Web Workers 不能直接访问 DOM

这是最常踩的坑：在 Worker 线程里调用 document.getElementById 或修改 innerHTML 会直接报错 ReferenceError: document is not defined。Worker 运行在独立线程，没有 window、document、localStorage 等浏览器主线程专属对象。

正确做法是把计算或数据处理逻辑挪进去，结果通过 postMessage 传回主线程，再由主线程更新 UI：

/* main.js */
const worker = new Worker('worker.js');
worker.postMessage({ data: [1, 2, 3, 4, 5] });
worker.onmessage = (e) => {
  console.log('计算结果：', e.data); // 更新 DOM 在这里做
};

/* worker.js */
self.onmessage = (e) => {
  const result = e.data.data.reduce((a, b) => a + b, 0);
  self.postMessage(result); // 不能用 console.log 替代，主线程收不到
};

如何传参和接收返回值（注意类型限制）

postMessage 传递的数据会经过结构化克隆算法（structured clone），支持 Array、Object、Number、String、Boolean、ArrayBuffer 等，但不支持 function、undefined、Date（会被转成字符串）、RegExp、Map/Set（部分环境不支持）。

传大数组时优先用 ArrayBuffer + transferable 选项，避免拷贝开销：worker.postMessage(buffer, [buffer])
如果需要传复杂对象，先 JSON.stringify 再 postMessage，Worker 里用 JSON.parse；但要注意循环引用会失败
主线程和 Worker 都必须监听 onmessage，且需用 self（不是 this）来绑定

调试 Web Worker 很麻烦？Chrome DevTools 支持但要打开方式

默认情况下，Worker 的 console.log 会出现在主线程控制台，但断点、堆栈、作用域变量都不可见。必须手动打开 Worker 调试面板：

Chrome 中按 F12 → 「Application」→ 「Service Workers」→ 勾选「Update on reload」，然后刷新页面
或者更直接：在 worker.js 开头加 debugger;，再刷新，DevTools 会自动跳转到 Worker 脚本并停住
注意：每次修改 worker.js 后，浏览器可能缓存旧版本，强制硬重载（Ctrl+Shift+R）或禁用缓存（Network 标签页勾选 Disable cache）

终止 Worker 和内存泄漏风险

Worker 不会自动销毁，即使主线程已跳转路由或卸载页面，它仍可能在后台运行——尤其当忘记调用 worker.terminate() 或 Worker 内部有未清除的定时器。

主线程中，用完即终：在 onmessage 处理完结果后，立即调用 worker.terminate()
Worker 内部，避免 setInterval 或长期 while(true)，改用 setTimeout + 递归，或监听 onmessage 触发任务
若需复用 Worker，可用 worker.onerror 捕获异常，防止静默失败；错误不会自动终止 Worker，得自己处理

真正麻烦的是跨域 Worker 脚本加载失败、importScripts 路径 404、或主线程提前释放 w