在 javascript 中，web worker 无法直接通过 `new worker('data:text/javascript,...')` 的 data url 语法实例化，因为浏览器出于安全考虑禁止了 worker 执行内联脚本。要实现类似效果，必须将代码转换为 blob url，即先创建包含源码的 blob 对象，再调用 `url.createobjecturl()` 生成临时 url 并传入 `worker` 构造函数。
为什么 Data URL 不能用于 Web Worker
浏览器规范明确限制了 Worker 的来源，只允许同源策略下的文件、Blob URL 或 Data URL（仅限特定 MIME 类型且通常被禁用）。对于 JavaScript Worker，绝大多数现代浏览器（Chrome, Firefox, Safari）会抛出错误，提示不支持 Data URL 作为 Worker 源。这是为了防止 XSS 攻击和确保沙箱隔离。因此，开发者必须采用替代方案，最标准的是使用 Blob URL。
const code = `
self.onmessage = function(e) {
console.log('Worker received:', e.data);
self.postMessage('Echo: ' + e.data);
};
`;
// 1. 创建 Blob 对象
const blob = new Blob([code], { type: 'application/javascript' });
// 2. 生成 Blob URL
const workerUrl = URL.createObjectURL(blob);
// 3. 实例化 Worker
const worker = new Worker(workerUrl);
// 4. 发送消息测试
worker.postMessage('Hello Worker');
// 5. 接收响应
worker.onmessage = function(e) {
console.log('Main thread received:', e.data);
};
// 6. 清理资源（可选但推荐）
// worker.terminate();
// URL.revokeObjectURL(workerUrl);上述代码展示了完整的流程：首先定义一个字符串形式的 JavaScript 代码块，然后将其封装为 `Blob` 对象，指定 MIME 类型为 `application/javascript`。接着使用 `URL.createObjectURL()` 创建一个指向该 Blob 的临时 URL。最后将这个 URL 传递给 `new Worker()`。这种方式完全符合浏览器的安全策略，并且可以动态生成和执行代码。
立即学习“Java免费学习笔记（深入）”；
如何处理 Worker 中的复杂逻辑与依赖
当 Worker 需要处理更复杂的逻辑时，仅仅传递一个简单的字符串可能不够清晰。此时可以将代码模块化，或者使用构建工具将多个文件合并为一个字符串。此外，如果需要在主线程和 Worker 之间传递大量数据，可以使用 `postMessage` 的第二个参数来转移所有权（transferable objects），如 `ArrayBuffer` 或 `Transferable` 接口，以提高性能。
// 模拟更复杂的 Worker 代码
const complexCode = `
self.onmessage = async function(e) {
const data = e.data;
// 模拟耗时操作
await new Promise(resolve => setTimeout(resolve, 1000));
// 处理数据
const result = data.map(item => item * 2);
// 返回结果
self.postMessage({ status: 'completed', result });
};
`;
const blob = new Blob([complexCode], { type: 'application/javascript' });
const workerUrl = URL.createObjectURL(blob);
const worker = new Worker(workerUrl);
worker.postMessage([1, 2, 3, 4, 5]);
worker.onmessage = function(e) {
if (e.data.status === 'completed') {
console.log('Result:', e.data.result); // [2, 4, 6, 8, 10]
}
};
// 注意：在实际应用中，应确保在不再需要 Worker 时调用 terminate()
// 并在适当时候调用 revokeObjectURL() 释放内存这段代码演示了一个异步处理的场景。Worker 接收到一个数组后，模拟了一个耗时操作，然后对每个元素进行加倍处理，并将结果以对象形式返回。这种模式适用于需要后台计算而不阻塞主线程 UI 的场景。需要注意的是，虽然这里使用了 `async/await`，但在某些旧版浏览器中可能需要 polyfill 或改用 Promise 链式调用。同时，务必记得在程序结束时终止 Worker 并撤销 Blob URL，以避免内存泄漏。
基于 Blob URL 的生命周期管理问题
在使用 Blob URL 创建 Worker 时，一个关键问题是资源的清理。`URL.createObjectURL()` 创建的 URL 会一直占用内存，直到被显式撤销或页面关闭。如果在循环中频繁创建 Worker，可能会导致内存增长。因此，最佳实践是在 Worker 完成任务或被终止后，立即调用 `URL.revokeObjectURL()`。此外，如果 Worker 内部发生了未捕获的错误，它可能会意外终止，此时也需要在主线程中监听 `error` 事件并进行相应的清理工作。
