17370845950

Web Workers 是浏览器原生多线程机制，独立于主线程、不共享内存、不可操作 DOM；通过 new Worker() 创建并用 postMessage 异步通信，适用于耗时计算等场景。

Web Workers 是什么：浏览器里真正的多线程机制

Web Workers 不是“模拟”多线程，而是浏览器原生提供的、与主线程完全隔离的独立 JavaScript 执行环境。它不共享内存，不能直接操作 document 或 window，但能运行耗时计算、解析大 JSON、加密解密、图像处理等任务，避免阻塞 UI。

怎么创建并通信：用 Worker 构造函数 + postMessage

主线程中创建 Worker 需要一个单独的 JS 文件路径（不能是内联字符串或 Blob URL 在部分旧环境有兼容问题），通信靠异步消息传递：

• new Worker('./heavy-task.js') 必须传入外部脚本路径，不能写成 new Worker('console.log(1)')
• 主线程用 worker.postMessage(data) 发送数据，用 worker.onmessage = e => {...} 接收
• Worker 脚本里用 self.onmessage = e => {...} 接收，用 self.postMessage(result) 回传
• 传输对象默认被结构化克隆（Date、RegExp 会丢失，function 和 undefined 会被忽略）

/* main.js */
const worker = new Worker('./sum-worker.js');
worker.postMessage({ numbers: Array.from({ length: 1e7 }, (_, i) => i) });
worker.onmessage = e => console.log('结果:', e.data);
/ sum-worker.js /
self.onmessage = e => {
const sum = e.data.numbers.reduce((a, b) => a + b, 0);
self.postMessage(sum);
};

常见错误：主线程卡住？Worker 没启动？

多数“Worker 不工作”问题出在路径、作用域或通信时机上：

• 404 报错：检查 Worker 构造函数里的路径是否相对于 HTML 页面，不是相对于当前 JS 文件
• 空白页或白屏：Worker 脚本里写了 document.body 或 alert() —— 这些在 Worker 环境里根本不存在，会直接报 ReferenceError
• 收不到消息：主线程没加 onmessage 监听，或 Worker 脚本里漏了 self.postMessage()，或用了 return 代替发送
• 大数组传参

  

  慢：别把几 MB 的数组直接 postMessage，改用 Transferable（如 postMessage(data, [data.buffer])）零拷贝移交 ArrayBuffer

Worker 的限制和替代选择

Worker 不能访问 DOM，也不能用 localStorage、fetch（新版支持）、setTimeout（支持，但注意是 Worker 自己的事件循环）。真正需要 DOM 操作的繁重任务，比如 Canvas 渲染优化，得用 OffscreenCanvas 配合 Worker；而简单计算类任务，Worker 就够用。注意 Safari 对 SharedArrayBuffer 默认禁用，涉及并发读写需配 cross-origin-isolated 头。