17370845950

Web Worker 是浏览器提供的后台线程机制，通过消息传递与主线程通信，不可直接访问 DOM；需用 postMessage 传数据回主线程更新；创建须从外部文件加载，支持结构化克隆与 transferable 优化；模块 Worker 需 type: 'module' 且注意兼容性；Worker 实例需手动 terminate 避免内存泄漏。

Web Worker 是浏览器提供的、让 JavaScript 在后台线程中运行的机制，它不阻塞主线程，能真正实现并发执行——但要注意，它不是“多线程”意义上的共享内存并发，而是通过消息传递（postMessage / onmessage）进行隔离通信。

Web Worker 为什么不能直接访问 DOM？

因为 DOM 操作是主线程专属的，Worker 运行在独立上下文，没有 window、document、localStorage 等全局对象。试图访问会直接抛出 ReferenceError 或 undefined。

• 可用的全局对象只有 self、console、setTimeout、fetch、importScripts() 等有限 API
• 想操作 DOM？必须把结果通过 postMessage 发回主线程，由主线程决定怎么更新
• 常见错误：在 Worker 里写 document.getElementById() —— 运行即报错，且无堆栈提示（除非打开 DevTools 的 Workers 面板）

如何创建并通信一个基本 Worker？

Worker 必须从外部 JS 文件加载（不能是内联字符串或 Blob URL，除非用 URL.createObjectURL()），且路径受同源策略限制。

主线程代码示例：

const worker = new Worker('worker.js');
worker.postMessage({ type: 'calculate', data: [1, 2, 3, 4] });

worker.onmessage = function (e) {
  console.log('主线程收到:', e.data); // { result: 10 }
};

worker.onerror = function (e) {
  console.error('Worker 报错:', e.message, e.filename, e.lineno);
};

对应 worker.js 内容：

self.onmessage = function (e) {
  if (e.data.type === 'calculate') {
    const sum = e.data.data.reduce((a, b) => a + b, 0);
    self.postMessage({ result: sum });
  }
};

• self 在 Worker 中等价于全局作用域，不要用 this 或 window
• 传给 postMessage 的数据会被结构化克隆（structured clone），不支持函数、DOM 节点、undefined、Symbol
• 如需传大量数据（如 ArrayBuffer），可用 transferable 选项避免拷贝：postMessage(data, [arrayBuffer])

Worker 中如何加载其他脚本或模块？

Worker 默认不支持 ES Module（import 语法），但可通过 importScripts() 同步加载传统脚本，或使用 new Worker(url, { type: 'module' }) 创建模块型 Worker（需服务端支持 MIME 类型 application/javascript）。

• importScripts('lib.js', 'utils.js')：按顺序同步加载，任一失败则整个 Worker 初始化失败
• 模块 Worker 示例：

  const worker = new Worker('./math-worker.js', { type: 'module' });

  ，然后在 math-worker.js 中可直接写 import { add } from './utils.mjs';
• 注意：模块 Worker 不支持 importScripts()，二者互斥
• Chrome 和 Firefox 支持良好，Safari 对模块 Worker 的 import.meta.url 解析有兼容性问题，慎用于生产环境

最易被忽略的一点：Worker 实例不会自动销毁。即使任务完成，只要没调用 worker.terminate() 或页面卸载，它就持续占用内存和线程资源。尤其在频繁创建/销毁场景下（比如每输入一个字符就启一个 Worker 做校验），务必手动清理。