Web Workers 是浏览器提供的真正并行执行 JavaScript 的机制，运行在独立线程中，不阻塞主线程；setTimeout/Promise 等仅是事件循环调度，无法解决 CPU 密集型任务卡顿问题。

Web Workers 是什么，为什么不能直接用 setTimeout 或 Promise 模拟多线程

Web Workers 是浏览器提供的真正并行执行 JavaScript 的机制，它在独立线程中运行脚本，不阻塞主线程的 UI 渲染和事件响应。这不是“伪多线程”——setTimeout、Promise、async/await 都只是事件循环调度，并未脱离单线程 JS 引擎；它们无法解决 CPU 密集型任务（如大数组排序、图像处理）导致的页面卡死问题。

关键限制：Worker 线程无法访问 window、document、localStorage 等 DOM 和 BOM 对象，只能通过 postMessage 与主线程通信。

如何创建和使用 Worker 实例（基础用法）

必须将 Worker 逻辑写在**单独的 .js 文件中**，不能内联字符串（除 Blob 方式外，但不推荐用于生产）。

• 新建文件 worker.js，内容为：

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

• 主线程中启动：

  const worker = new Worker('worker.js');
  worker.postMessage(42); // 发送数据
  worker.onmessage = function(e) {
    console.log('收到结果：', e.data); // 输出 84
  };

• self 在 Worker 内指向全局作用域，等价于主线程的 window；postMessage 是双向的，主线程也可用 worker.postMessage() 向 Worker 发送，Worker 用 self.postMessage() 回传。

传递复杂数据时要注意 structuredClone 和 transferable 对象

默认情况下，postMessage 使用结构化克隆算法（structuredClone）序列化数据，这意味着大对象（如百万级数组、ArrayBuffer）会触发深拷贝，性能差且内存翻倍。

• 若需零拷贝传输二进制数据（如音频/图像处理），用 transferable 参数：

  // 主线程
  const buffer = new ArrayBuffer(1024 * 1024);
  worker.postMessage(buffer, [buffer]); // 第二个参数表示转移所有权

• Worker 接收后，原 buffer 在主线程中变为 detached，不可再读写；
• 不是所有类型都支持 transfer：仅 ArrayBuffer、MessagePort、ImageBitmap 等少数几种；
• Chrome 92+ 支持 structuredClone 的完整选项，但 Safari 仍有限制，跨浏览器建议优先用 transfer 处理大二进制。

常见错误：Uncaught DOMException: Failed to construct 'Worker'

这个错误几乎总是由以下原因导致：

• Worker 脚本路径 404 或跨域（必须同源，或启用 CORS 头 + new Worker(url, { type: 'module' })）；
• 试图用 file:// 协议加载（本地双击 HTML 会触发，需起本地服务如 npx serve）；
• Worker 文件里用了 import 但没加 type: 'module' 选项（new Worker('worker.js', { type: 'module' })）；
• 在 Worker 中调用了 document.getElementById 等 DOM API —— 浏览器会直接抛 ReferenceError，而非静默失败。

Worker 的调试也容易被忽略：它不在主 DevTools 的 Sources 面板中，默认需打开 “Application → Service Workers” 或刷新后在 “Sources → Workers” 下找独立调试窗口。