HTML5 Web Worker 脚本路径始终相对于主页面 URL 解析，且必须与主页面同源（协议、域名、端口完全一致）；推荐使用 new URL('./worker.js', import.meta.url) 获取绝对路径以避免歧义。
HTML5 Web Worker 的脚本路径解析和同源策略限制是实际开发中容易出错的关键点。核心在于：Worker 构造函数传入的脚本 URL 必须是同源的绝对或相对路径，且浏览器会按当前页面上下文解析该路径——不是按 Worker 文件自身位置，也不是按模块导入逻辑。
Worker 脚本路径始终相对于主页面 URL
即使你在 js/workers/processor.js 中 new Worker('./helper.js')，浏览器仍以当前 HTML 页面的 URL 为基准解析 './helper.js'，而非以 processor.js 所在目录为基准。例如：
- 页面地址是
https://example.com/app/index.html，执行new Worker('workers/calc.js')→ 实际请求https://example.com/app/workers/calc.js - 若页面是
https://example.com/app/sub/page.html，同样写new Worker('workers/calc.js')→ 请求的是https://example.com/app/sub/workers/calc.js（不是 app/ 下的） - 使用绝对路径可规避歧义：
new Worker('/app/workers/calc.js')总从根开始解析
同源策略强制要求协议、域名、端口完全一致
Worker 脚本必须与主页面同源，否则抛出 SecurityError。注意以下常见陷阱：
- 本地开发时用
file://协议加载页面 → 所有 Worker 路径也必须是file://，且同盘符同目录结构；现代浏览器通常直接阻止 file:// 下的 Worker -
http://localhost:3000和http://127.0.0.1:3000视为不同源（域名不同） - HTTPS 页面无法加载 HTTP 资源，包括 Worker 脚本（混合内容被阻止）
- 子域名差异（
a.example.comvsb.example.com）默认不同源，需双方显式设置document.domain = 'example.com'（仅适用于 document-based 环境，对 Worker 本身无效，但可用于主页面与 Worker 通信前的预设）
动态路径与构建环境适配建议
避免硬编码路径，尤其在单页应用或构建工具（如 Webpack/Vite）中：
立即学习“前端免费学习笔记（深入）”；
- 用
new URL('./my-worker.js', import.meta.url)获取绝对 URL（ESM 环境下可靠，Vite/Webpack 均支持） - Webpack 中可配合
worker-loader或module.rules.type: 'javascript/auto'+new Worker(new URL('./worker.js', import.meta.url)) - Vite 中推荐直接
new Worker(new URL('./worker.ts', import.meta.url), { type: 'module' })，自动处理 HMR 和路径 - 若需运行时决定 Worker 地址（如灰度环境），可将基础路径注入全局变量或通过
<script>标签 data 属性传递，再拼接完整 URL
跨域场景的替代方案
当确实需要跨源逻辑（如第三方计算服务），Worker 本身不可绕过同源限制，但可通过间接方式实现：
- 主页面用
fetch或postMessage将数据发给同源代理接口，由后端转发请求并返回结果，再传给 Worker 处理（Worker 只负责纯计算） - 使用 Service Worker 拦截请求并注入响应（需注册在根路径，且页面与 SW 同源），但 Worker 本身仍不能跨域加载
- 将计算逻辑封装为 WebAssembly 模块，通过
fetch加载 wasm（wasm 加载受同源限制，但可配合 CORS 配置），在主线程或 Worker 中实例化执行
不复杂但容易忽略：Worker 路径解析规则固定，同源是硬性门槛。优先用 new URL(..., import.meta.url) 消除相对路径歧义，构建阶段确保输出路径与引用路径一致，上线前验证协议/域名/端口三者严格匹配。
