javascript如何操作Web Workers_怎样实现多线程【教程】_网络技术

Web Workers 不能直接操作 DOM，只能通过 postMessage 通信，需单独 JS 文件、同源路径，注意 MIME 类型和模块类型配置，Dedicated Worker 适用于 CPU 密集任务。

这是最常踩的坑：Worker 线程里调用 document.getElementById 或 console.log（非 self.console.log）会报错，因

为 Worker 没有 window、document、localStorage 等主线程专属对象。

Worker 只能访问：self、fetch、setTimeout、IndexedDB、WebAssembly 和部分加密 API。所有通信必须通过 postMessage 和 onmessage 进行。

主线程发消息用：worker.postMessage(data)，支持结构化克隆（可传对象、数组、ArrayBuffer，但不能传函数或 DOM 节点）
Worker 收消息写在 self.onmessage = (e) => { ... } 里，e.data 是传入数据
Worker 主动发回结果也用 self.postMessage(result)，主线程监听 worker.onmessage

必须把 Worker 逻辑写在**单独的 .js 文件里**，不能是内联字符串或箭头函数——浏览器会拒绝执行。

例如，新建 worker.js：

self.onmessage = function(e) {
  const result = e.data * e.data;
  self.postMessage(result);
};

主线程中加载它：

const worker = new Worker('worker.js');
worker.postMessage(123);
worker.onmessage = function(e) {
  console.log('计算结果：', e.data); // 15129
};

这个错误几乎都源于跨域或 MIME 类型问题。常见原因：

Worker 脚本返回了 text/html（比如 404 页面被当成 JS 加载）→ 检查路径是否拼错，服务器是否返回了正确的 Content-Type: application/javascript
用了 importScripts('xxx.js') 但路径不对或跨域 → 所有 importScripts 的资源也必须同源且可访问
在模块 Worker 中用了 type: "module"，但没加 type="module" 到 new Worker() 构造函数：new Worker('worker.js', { type: 'module' })
Vite / Webpack 项目中直接写 new Worker('./worker.js') 会失败 —— 需用 new Worker(new URL('./worker.js', import.meta.url)) 让打包器识别并处理

别被名字误导：SharedWorker 是为多个页面/iframe 共享一个后台线程设计的，不是为了提升单页性能；ServiceWorker 是网络代理 + 缓存控制器，生命周期由浏览器管理，不能手动 postMessage 触发任意计算。

真要 CPU 密集型任务（如图像处理、JSON 解析、加密），只用 DedicatedWorker。如果需要线程池，得自己封装管理多个 Worker 实例，注意避免同时创建过多导致浏览器限制（Chrome 通常限制约 20 个 Worker）。

另外，Worker 启动本身有毫秒级延迟，简单计算（比如