Web Workers 是解决预加载与预解析不阻塞主线程的核心手段，支持 DNS 预解析、TCP 预连接及静态资源批量预加载，且规避了传统方式限制与执行风险。

Web Workers 是解决预加载与预解析任务不阻塞主线程的核心手段。它让资源获取、DNS 预解析、甚至轻量级 HTML 解析等操作在后台线程中完成，既避免干扰用户交互，又绕开了浏览器对 <link rel="prefetch"> 或 <link rel="preload"> 的策略限制（比如 Safari 不支持 prefetch、某些资源类型无法 onload 监听）。

为什么用 Web Worker 做预加载

传统方式如 new Image().src 只能加载图片；<link rel="stylesheet" disabled> 在 Firefox 中不可靠；<script type="text/cache"> 被多数现代浏览器忽略。而 Web Worker 不执行 DOM 操作、不触发渲染、不运行脚本，只做纯粹的 fetch 请求或 DNS 查询，天然满足“下载但不解析、不执行”的预加载需求。

实现 DNS 预解析 + TCP 预连接

Worker 本身不能直接调用 dns-prefetch 或 preconnect，但可通过 fetch() 触发底层连接建立。只要发起一次空请求（HEAD 或 GET），浏览器就会完成 DNS 解析、TCP 握手，甚至 TLS 协商（对 HTTPS 域名）。后续同域名请求可复用连接。

• 在 worker.js 中写：fetch('https://api.example.com/', { method: 'HEAD', cache: 'no-store' })
• 避免实际下载响应体，节省带宽
• 多个域名可并行发起，不占用主线程事件循环

静态资源批量预加载

适合图片、字体、CSS、JS 等已知路径的资源。Worker 中使用 Promise.allSettled() 控制并发，并统一返回结果状态。

• 主线程传入 URL 列表：worker.postMessage(['/assets/logo.png', '/css/app.css', '/js/utils.js'])
• Worker 内逐个 fetch，不 await，避免阻塞其他请求
• 成功时缓存 blob 或仅确认 HTTP 200，失败时记录日志供调试
• 无需插入 DOM，也不影响当前页面资源优先级

安全与兼容性注意点

Web Worker 预加载不是万能方案，需规避常见陷阱：

• 跨域资源必须开启 CORS，否则 fetch 会失败（即使只是预加载）
• 不要在 Worker 中调用 importScripts() 加载远程脚本——这会执行代码，违背“不解析”原则
• 移动端需留意 Worker 启动开销，建议在页面空闲期（如 scroll 结束后 500ms）再 postMessage 启动
• 对 HTML 页面预加载要谨慎：fetch 得到 HTML 后别尝试 DOMParser 解析，否则可能触发脚本执行或样式计算