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 头。
