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）会触发深拷贝，性能差且内存翻倍。
立即学习“Java免费学习笔记（深入）”；
- 若需零拷贝传输二进制数据（如音频/图像处理），用
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” 下找独立调试窗口。
