17370845950

Web Workers 不能直接操作 DOM 或访问 window、document 等主线程对象，需通过 postMessage 通信；必须从同源外部文件加载，支持 fetch（不含 credentials: 'include'），用 self 替代 window，可调试且应按需使用。

Web Workers 不能直接操作 DOM，也不能访问 window、document、localStorage 等主线程专属对象——这是使用前必须接受的前提。

为什么主线程卡住时 Worker 仍能运行

浏览器把 JavaScript 执行分为「主线程」和「独立线程」。Web Worker 在后台新开一个 JS 线程，与主线程内存隔离，靠 postMessage() 通信。所以即使主线程正执行 while(true) 或大量计算，Worker 里的代码照常跑。

如何创建并启动一个 Web Worker

Worker 必须从外部文件加载，不能内联脚本。路径需满足同源限制，且不能是 file:// 协议（本地双击 HTML 会失败）。

• 新建文件 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
  };

常见报错和绕不过的限制

SecurityError: Failed to construct 'Worker' 多半是跨域或 file:// 加载；ReferenceError: window is not defined 是误在 Worker 里调用了 DOM API。

• Worker 内部用 self 代替 window，全局作用域就是 self
• 不能用 fetch？可以，但不支持 credentials: 'include'（除非显式配置 credentials: 'same-origin'）
• 想共享数据？不行。只能序列化后传值（postMessage() 底层调用结构化克隆算法），function、undefined、Symbol 会被丢弃
• 终止 Worker：worker.terminate()，之后它不能再收发消息

多个 Worker 或复杂任务怎么组织

每个 new Worker() 启动一个新线程，开销不小。高频创建/销毁不如复用；需要频繁通信时，注意避免主线程被大量 onmessage 回调阻塞。

• 用 importScripts('lib1.js', 'lib2.js') 在 Worker 内加载依赖（路径相对于 worker.js）
• 想让 Worker 主动终止自己？用 self.close()
• 调试 Worker：Chrome DevTools 的 Sources > Threads 面板能看到独立上下文，断点也有效
• 替代方案考虑：SharedArrayBuffer + Atomics（需 HTTPS + cross-origin-isolated 头），但兼容性差，目前多数场景仍用 postMessage

真正麻烦的不是“怎么写”，而是判断“该不该用”——简单计时器、小数组排序完全没必要 Worker；但图像像素处理、加密解密、大型 JSON 解析，就值得拆出去。别为了用而用。