必须用 blob + url.createobjecturl() 创建 worker,mime 类型须为 "application/javascript";worker 内无法访问闭包或 dom,仅通过 postmessage 通信;使用后需调用 terminate() 和 revokeobjecturl() 清理资源。

不能直接用字符串或函数创建 Worker,必须借助 Blob + URL.createObjectURL() 生成合法的 JavaScript URL。这种方式不依赖外部文件,适合封装逻辑、按需启动、避免额外请求。
写好自包含的 Worker 脚本字符串
Worker 内部无法访问闭包、document、window 或主线程变量,所有输入输出都靠 postMessage 和 onmessage。脚本必须是完整可执行的 JS 字符串:
- 显式绑定
self.onmessage或使用事件监听器 - 用
self.postMessage()向主线程回传结果 - 避免任何 DOM 操作和全局对象引用
- 如需解析 XML,可用
DOMParser;如需复杂计算,确保数据已序列化传入
示例:
const workerCode = `self.onmessage = function(e) {<br> const result = e.data ** 2 + 1;<br> self.postMessage(result);<br>};`;
用 Blob 封装并生成可执行 URL
Blob 是二进制容器,必须指定正确的 MIME 类型才能被 Worker 加载:
- MIME 类型必须为
"application/javascript"("text/javascript"在部分浏览器中可能兼容,但不保证) - 调用
URL.createObjectURL(new Blob([workerCode], { type: "application/javascript" })) - 生成的 URL 形如
blob:http://localhost/xxx-xxx,仅在当前页面生命周期内有效
⚠️ 若页面以 file:// 协议打开,Blob URL Worker 会被浏览器禁用——必须通过 http:// 或 https:// 服务运行。
实例化 Worker 并通信
拿到 URL 后即可创建 Worker,并建立消息通道:
- 主线程用
worker.postMessage(data)发送任意可结构化克隆的数据(对象、数组、数字等) - 监听
worker.onmessage或worker.addEventListener('message', ...)接收返回 - Worker 内处理完后调用
self.postMessage(result)
示例调用:
const blob = new Blob([workerCode], { type: "application/javascript" });<br>const url = URL.createObjectURL(blob);<br>const worker = new Worker(url);<br><br>worker.onmessage = (e) => console.log("结果:", e.data);<br>worker.postMessage(5); // 输出:26
务必清理资源防止内存泄漏
每个 createObjectURL 都会保留对 Blob 的引用,不释放会导致内存持续占用,尤其在频繁创建/销毁场景下:
- 任务完成后调用
worker.terminate()终止线程 - 立即调用
URL.revokeObjectURL(url)解除引用 - 不要等到页面卸载才清理;应在收到最终响应后同步执行
完整收尾代码:
worker.onmessage = (e) => {<br> console.log(e.data);<br> worker.terminate();<br> URL.revokeObjectURL(url);<br>};










