HTML Web Worker多线程使用方法大全

Web Worker 使用指南：这些坑你大概率会踩

先说几个核心结论：Web Worker 不能直接写在 HTML 文件里，必须分离成独立的 .js 文件，而且页面必须通过 HTTP/HTTPS 协议加载——如果你在本地双击打开 HTML 文件，走的是 file:// 协议，会直接报错。这不是 bug，是浏览器明确的安全限制。

new Worker() 路径怎么写才不报错

路径这事儿，看着简单，坑却不少。浏览器对 new Worker() 的脚本路径有硬性限制：只接受同源 URL（包括 data: 和 Blob: 这种），不支持直接传字符串代码或者内联函数。最容易踩的坑是这几个：

• file:// 协议下运行：错误信息通常是 Failed to construct 'Worker': Script at 'file:///' cannot be accessed from origin 'null'。解决方法很简单，别直接用浏览器打开本地文件，用 npx http-server、VS Code 的 Live Server 或者任意本地服务启动页面。
• 相对路径歧义：比如直接写 ./worker.js，在某些构建工具（像 Vite、Webpack）里可能解析失败。ESM 环境下最稳妥的写法是 new Worker(new URL('./worker.js', import.meta.url))，这个模式能保证路径在各种环境下都正确。
• 跨域脚本：即使加了 CORS 头，new Worker() 也拒绝非同源 URL。不用指望从 CDN 上加载 https://cdn.example.com/worker.js，这条路走不通。
• 动态生成脚本：如果你需要动态创建 Worker 逻辑，用 Blob 构造更可靠：new Worker(URL.createObjectURL(new Blob(['self.onmessage = ...'], {type: 'application/javascript'})))。

主线程和 Worker 怎么通信才不丢消息

通信是另一个容易翻车的地方。全靠 postMessage() 和 onmessage 来回传递，没有共享内存这一说，所有数据走结构化克隆（structured clone）。下面这几个问题很常见：

• 主线程漏监听：worker.onmessage = e => {...} 必须在 postMessage() 之前设置好，否则第一次发过去的消息直接就丢了。推荐用 worker.addEventListener('message', ...)，更健壮。
• Worker 内没写 self.onmessage：有人习惯在里面写个 console.log(self) 看看环境，但这不代表逻辑跑起来了。必须显式绑定 self.onmessage，Worker 才能收到消息，否则永远静默。
• 误传大数组：如果传的是普通 Array 或 Object，数据会被深拷贝。一个 10MB 的数组可能导致主线程卡顿几百毫秒。对于可转移对象（比如 ArrayBuffer），要把它加到 postMessage() 的第二个参数里：worker.postMessage(data, [data.buffer])，这样数据不会经过拷贝，而是直接转移所有权。
• 忘记处理 error：Worker 内部未捕获的异常默认是静默的，你根本不知道发生了什么。主线程需要监听 worker.onerror，Worker 内部也建议加一句：self.onerror = e => self.postMessage({type: 'error', ...})，把错误信息透传出来。

Worker 里哪些 API 根本不能用

Worker 是个纯计算环境，没有 DOM、没有 BOM，部分存储 API 也不能用。以下操作直接抛 ReferenceError，试都不用试：

• 任何 DOM 操作：document.getElementById、document.body、alert、localStorage、sessionStorage 全都不可用。不过 indexedDB 是能用的，可以用来存取数据。
• 全局对象缺失：window、parent、top、frames 这些全都不存在。只能用 self，它等价于 globalThis。
• 部分网络 API 受限：fetch 和 XMLHttpRequest 可以正常使用，但 WebSocket 在部分旧版 Safari 中不可用，需要注意兼容性。
• 渲染相关 API：requestAnimationFrame、getComputedStyle、CSSStyleSheet 都不能用。如果你需要在 Worker 里做 Canvas 渲染，得配合 OffscreenCanvas 来实现。

Chrome 里怎么调试 Worker 代码

不少人会跑到“Application → Service Workers”里去找普通 Worker，那个标签页只显示 service worker，普通 Worker 不在那儿。正确的操作路径是：

• 打开 DevTools → Sources → Page → workers，这里会列出所有运行中的 Worker 实例。
• 右键点击 Worker 脚本，选择 “Open in Debugger”，就能像普通代码一样设断点、看作用域、单步执行。
• Worker 内部的 console.log 输出默认会出现在主线程控制台，但前缀会带上 [Worker] 标识。如果你只想看 Worker 的日志，可以在 Console 输入 Filter: [Worker] 进行过滤。
• 如果 Worker 启动后立刻就崩溃了，先检查一下 self.onerror 是否把错误信息透传出来了，否则异常会被吞掉，根本找不到报错位置。

还有一个很容易被忽略的细节：Worker 实例一旦被 worker.terminate() 终止，就不能再复用了。每次需要新任务，都得新建一个 Worker 实例。除非你用 SharedWorker，但它有额外的连接管理成本，普通场景下别轻易切换。