Web Worker 脚本路径优化核心是提升首次加载性能：优先用同源内联 Blob URL（≤5KB）、预加载高频脚本、Service Worker 缓存离线资源，并规避相对路径陷阱。
Web Worker 的脚本路径选择直接影响首次加载性能——关键在于避免额外网络请求、复用已有资源、减少解析开销。
优先使用同源内联 Blob URL
将 Worker 逻辑封装为字符串，通过 Blob 创建本地 URL，完全绕过网络请求：
const workerCode = `
self.onmessage = function(e) {
postMessage(e.data * 2);
}
`;
const blob = new Blob([workerCode], { type: 'application/javascript' });
const worker = new Worker(URL.createObjectURL(blob));
- 适用于逻辑稳定、体积较小（建议 ≤ 5KB）的 Worker
- 需注意：每次创建新 Blob URL 都会生成唯一地址，不可跨实例复用；使用后可调用
URL.revokeObjectURL()清理（非必须但推荐） - 不支持动态
importScripts()，所有依赖需提前内联或转为字符串拼接
预加载关键 Worker 脚本
对高频使用的独立 Worker 文件（如图像处理、加密模块），在主页面加载阶段主动预取：
<link rel="preload" href="processor.js" as="script">
- 配合
as="script"确保浏览器以脚本方式预加载，避免 MIME 类型误判 - Worker 构造时仍需显式指定路径：
new Worker('processor.js')，但此时脚本大概率已缓存就绪 - 慎用于低频 Worker，否则浪费带宽和内存
利用 Service Worker 缓存 Worker 脚本
在 Service Worker 的 install 阶段主动缓存 Worker 文件，确保离线可用且首屏加速：
立即学习“前端免费学习笔记（深入）”；
// service-worker.js
self.addEventListener('install', e => {
e.waitUntil(
caches.open('worker-cache').then(cache =>
cache.addAll(['worker-main.js', 'utils.js'])
)
);
});
<p>// 主线程中注册时指定 scope，确保 Worker 请求命中缓存
navigator.serviceWorker.register('/sw.js', { scope: '/' });
- Worker 脚本请求受 Service Worker 控制（需同源且 scope 覆盖）
- 首次加载仍需网络，但后续访问直接从 Cache Storage 读取，毫秒级响应
- 注意版本更新策略：修改文件名或添加查询参数（如
worker-v2.js）触发缓存刷新
避免常见路径陷阱
Worker 脚本路径解析与普通脚本不同，易引发意外请求：
- 相对路径以 主页面 URL 为基准，不是 Worker 文件所在目录 —— 若在
/app/page.html中执行new Worker('lib/worker.js')，实际请求的是/app/lib/worker.js，而非/lib/worker.js - 不要用
./或../拼接路径，容易因入口页位置变化失效；推荐使用绝对路径（/workers/analyser.js）或 URL 构造函数 - 避免在 Worker 内用
importScripts('vendor.js')加载第三方库——应提前合并或通过 Blob 内联，否则新增 DNS 查询和 TCP 连接
