什么是Web Workers_JavaScript中如何创建和使用Web Worker_网络技术

发布时间 - 2026-01-05 00:00:00 点击率：次

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

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

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

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

新建文件 worker.js，写入处理逻辑（例如：

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

）

监听返回：

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()，之后它不能再收发消息

每个 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 解析，就值得拆出去。别为了用而用。