可行,现代浏览器支持通过Blob URL动态创建内联Web Worker:将脚本转为application/javascript类型Blob,用URL.createObjectURL生成临时URL,再传入Worker构造函数,并通过postMessage通信。

可以,通过 Blob URL 动态创建并运行内联 Web Worker 是完全可行的,且是现代浏览器的标准做法。核心思路是:将 Worker 代码作为字符串生成 Blob,再用 URL.createObjectURL() 创建可访问的 URL,最后传给 Worker 构造函数。
构造内联 Worker 脚本字符串
Worker 逻辑需写成字符串(注意引号转义和作用域隔离),不能直接引用外部变量或函数。常见写法有模板字符串、JSON 序列化参数、或提前定义好可拼接的函数体。
- 使用反引号包裹脚本内容,内部可换行、写注释,但所有 JS 必须是纯文本
- 若需传参,建议在实例化后通过
postMessage发送,避免字符串拼接引发语法错误 - 注意单双引号嵌套:例如
`self.onmessage = function(e) { console.log(e.data); };`
创建 Blob 并生成 URL
Blob 的 MIME 类型必须为 "application/javascript"(部分浏览器对 "text/javascript" 兼容,但推荐前者)。
- 将脚本字符串转为
Uint8Array或直接传入new Blob([scriptStr], {type: 'application/javascript'}) - 调用
URL.createObjectURL(blob)获取唯一、临时的 blob URL(如blob:https://site.com/xxx) - 该 URL 只在当前文档生命周期内有效,页面卸载后自动释放;也可手动调用
URL.revokeObjectURL()
实例化 Worker 并通信
用生成的 blob URL 初始化 Worker,之后与普通 Worker 完全一致。
const worker = new Worker(blobUrl);- 通过
worker.postMessage(data)向 Worker 发送消息 - 监听
worker.onmessage接收返回结果 - Worker 内部用
self.onmessage和self.postMessage实现双向通信
完整示例
以下是一个计算斐波那契数列的内联 Worker 示例:
const workerCode = `
self.onmessage = function(e) {
const n = e.data;
function fib(i) { return i <= 1 ? i : fib(i-1) + fib(i-2); }
self.postMessage(fib(n));
};
`;
const blob = new Blob([workerCode], { type: 'application/javascript' });
const blobUrl = URL.createObjectURL(blob);
const worker = new Worker(blobUrl);
worker.onmessage = function(e) {
console.log('Result:', e.data); // 如:55
};
worker.postMessage(10);
// 使用完毕后可选释放
// worker.terminate();
// URL.revokeObjectURL(blobUrl);


















