html5 web worker 支持通过 blob + url.createobjecturl 动态创建并执行字符串代码，配合 terminate() 和 revokeobjecturl() 可安全实现按需并发与资源清理，兼容主流浏览器但需注意 api 限制及旧版 safari 的错误处理。
HTML5 的 Web Worker 允许在后台线程中运行脚本，避免阻塞主线程。但标准 Worker 构造函数只接受 URL（本地脚本文件或 Blob URL），不支持直接传入字符串代码。要实现“动态生成 Worker 脚本并按需并发执行”，关键在于**将动态代码转为可执行的 Worker 上下文**，常用且兼容性好的方式是使用 Blob + URL.createObjectURL。
动态创建 Worker 脚本（字符串 → 可执行 Worker）
通过构造 Blob 对象封装 JavaScript 字符串，再生成临时 URL，即可作为 Worker 的入口：
function createWorkerFromCode(code) {
const blob = new Blob([code], { type: 'application/javascript' });
const url = URL.createObjectURL(blob);
return new Worker(url);
}
// 示例：动态生成一个计算斐波那契的 Worker
const fibWorker = createWorkerFromCode(`
self.onmessage = function(e) {
const n = e.data;
let a = 0, b = 1;
for (let i = 2; i console.log('Result:', e.data.result);
按需并发：管理多个 Worker 实例
为避免无节制创建导致内存/性能问题，建议封装 Worker 池或任务队列。简单按需并发可采用以下策略：
- 每个独立任务（如一次图像处理、一次大数据排序）创建专属 Worker，任务结束立即终止并释放资源
- 用
worker.terminate()主动销毁不再需要的 Worker - 配合
URL.revokeObjectURL()清理 Blob URL 引用，防止内存泄漏
示例：安全销毁 Worker
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
function runTask(code, data) {
const blob = new Blob([code], { type: 'application/javascript' });
const url = URL.createObjectURL(blob);
const worker = new Worker(url);
worker.postMessage(data);
worker.onmessage = e => {
console.log('Task done:', e.data);
worker.terminate(); // 主动终止
URL.revokeObjectURL(url); // 释放 URL
};
worker.onerror = err => {
console.error('Worker error:', err);
worker.terminate();
URL.revokeObjectURL(url);
};
}
注意事项与兼容性提醒
动态 Worker 方案虽灵活，但需注意：
- Worker 内不能访问
window、document等 DOM API，仅能使用self、postMessage、fetch、setTimeout等受限 API - Chrome、Firefox、Safari、Edge 均支持 Blob URL 创建 Worker，但旧版 Safari（≤15.4）对内联 Blob Worker 的错误处理较弱，建议加 try/catch 包裹
- 若代码含
importScripts，路径必须为同源绝对 URL 或相对路径（相对于 Blob URL 所在位置），实际中建议将依赖提前合并进动态字符串，或改用import.meta.url+fetch动态加载模块（需 Worker 启用type: "module"）
进阶：支持模块化动态 Worker（ES Module Worker）
现代浏览器支持 new Worker(url, { type: 'module' })。若动态代码需 import 其他模块，可这样写：
const moduleCode = `
import { helper } from './utils.js'; // 注意：需同源且服务器支持 CORS（若跨域）
self.onmessage = e => {
self.postMessage(helper(e.data));
};
`;
const blob = new Blob([moduleCode], { type: 'application/javascript' });
const url = URL.createObjectURL(blob);
const modWorker = new Worker(url, { type: 'module' });
此时需确保所 import 的模块路径可被 Worker 正确解析（推荐使用完整 URL 或构建时预处理路径）。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
