worker构造函数只接受http(s)协议的脚本url，不支持内联字符串或函数体；必须用blob+url.createobjecturl()生成application/javascript类型临时url，并注意清理revokeobjecturl以防内存泄漏。
为什么不能直接用 new Worker("script.js") 加载内联代码
因为 Worker 构造函数只接受 URL，不支持字符串或函数体。浏览器强制要求脚本必须通过同源 URL 加载，哪怕你只是想跑几行逻辑，也得单独建个 .js 文件——这会多一次网络请求，还破坏封装。
用 Blob + URL.createObjectURL() 创建可执行的 Worker URL
核心思路是把 Worker 代码转成 Blob，再用 URL.createObjectURL() 生成一个生命周期绑定到当前文档的临时 URL。这个 URL 可被 Worker 安全加载。
注意三点：
-
Blob的 MIME 类型必须是"application/javascript"，否则 Chrome/Firefox 会拒绝执行（报错DOMException: Failed to construct 'Worker': Script at 'blob:...' cannot be accessed from origin） - Worker 内部不能访问闭包变量，所有通信必须走
postMessage()和onmessage - 用完记得调用
URL.revokeObjectURL()，否则内存泄漏（尤其在频繁创建/销毁 Worker 的场景）
示例：
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
const workerCode = `
self.onmessage = function(e) {
const result = e.data * 2;
self.postMessage(result);
}
`;
const blob = new Blob([workerCode], { type: "application/javascript" });
const url = URL.createObjectURL(blob);
const worker = new Worker(url);
<p>worker.onmessage = (e) => console.log(e.data);
worker.postMessage(21); // 输出 42</p><p>// 用完清理
worker.terminate();
URL.revokeObjectURL(url);
</p>
遇到 SecurityError: Failed to construct 'Worker' 怎么办
常见于以下情况：
- 页面是
file://协议打开的 ——Blob URLWorker 在本地文件系统被禁用，必须走http://或https:// - MIME 类型写成
"text/javascript"或漏写type选项 —— 严格校验下只有"application/javascript"被接受 - Worker 代码里用了
importScripts()加载外部脚本，但那些脚本跨域或路径错误 —— 内联 Worker 中应避免动态加载，或确保所有依赖也转为 Blob URL
Worker 里需要引用外部模块怎么办
无法直接 import，但可以分两步处理：
- 如果模块是纯函数、无副作用、可序列化，把它转成字符串（例如用
toString()），拼进workerCode字符串里 - 如果模块较大或含
fetch/localStorage等 API，建议改用SharedArrayBuffer+ 主线程预加载数据，或退回到传统外链 Worker - Webpack/Vite 等构建工具可通过
new Worker(new URL("./worker.ts", import.meta.url), { type: "module" })自动处理，但这不是原生 Blob 方案，且依赖构建时注入
真正难的不是生成 URL，而是让 Worker 里的逻辑和主线程保持同步、不重复打包、不出作用域陷阱——这些细节比语法更消耗调试时间。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
