掌握 Web Worker 关键在于理解其“独立线程、隔离环境、消息驱动”本质；常见陷阱包括同源加载失败、通信拷贝卡顿、错误静默丢失、误用 DOM API，需分别通过本地服务、Transferable、onerror 监听和严格环境隔离来规避。
掌握 Web Worker 的常见陷阱与调试技巧，关键不是背 API，而是理解它“独立线程、隔离环境、消息驱动”的本质。很多问题表面是报错，根源其实是误把 Worker 当成普通模块来用——比如想在里头操作 DOM、传个大对象卡住页面、或者本地双击 HTML 就失败。下面从四个最常踩坑的环节讲清怎么做、为什么容易错、怎么快速定位。
同源加载失败：本地双击就报错？不是代码问题，是运行环境错了
Worker 构造函数必须传一个网络可访问的 JS 文件路径（如 'worker.js'），不能是内联字符串、data: URL 或 file:// 协议地址。双击 HTML 打开时，浏览器以 file:// 协议加载，Worker 脚本会因跨域被拦截，报 SecurityError，且静默失败——没报错提示，脚本也不执行。
- 开发阶段务必起本地服务：用 Vite、http-server、Webpack Dev Server 等，确保页面和 worker.js 都走
http://localhost:xxx - 检查部署后是否同源：协议、域名、端口三者必须完全一致；CDN 或微前端场景下，注意 worker.js 的实际加载地址
- 别写
new Worker('data:text/javascript,...')或new Worker(blobUrl)—— 浏览器兼容性差，部分新版已禁用 - 加
worker.onerror捕获加载失败，比如提示“Worker 脚本未加载，请检查路径或服务状态”
通信卡顿或数据丢失：你以为传的是引用，其实全是拷贝
主线程调用 postMessage(data) 时，默认对 data 做结构化克隆（structured clone），对象被深拷贝而非共享。这意味着：你改了 Worker 里的数组，主线程原数组不变；传一个 50MB 的 ArrayBuffer，主线程和 Worker 各占一份内存，延迟明显。
使用约定式提交（Conventional Commits）生成标准化的 Git 提交信息。适用于以下场景： (1) 暂存更改时需要提交信息； (2) 审查 diff 时希望获得结构化摘要； (3) 编写 PR 描述或变更日志（changelog）条目； (4) 用户明确要求“为本次更改编写提交信息”。 该功能会分析已暂存/未暂存的 diff，并生成按类型（type）划分范围的提交信息。
- 大数组、图像数据、JSON 缓冲区等，优先用 Transferable：
worker.postMessage({ buffer }, [buffer])，移交所有权，零拷贝 - 移交后主线程的
buffer自动变为detached，不能再读写，否则报错；需提前备份或重新分配 - 避免频繁传小对象：可合并多个字段为单次消息，减少通信次数；Worker 内也建议缓存常用配置，避免反复解析
- 调试时用
console.log(typeof data, data?.byteLength)判断是否是可转移对象，防止误传导致意外拷贝
Worker 内部报错静默消失：没监听、没透出、没关闭，等于埋雷
Worker 线程出错默认不冒泡到主线程，self.onerror 不设，错误就吞掉；主线程不监听 worker.onerror，连加载失败都发现不了；任务完不关，Worker 一直驻留，内存持续增长。
- 主线程创建后立即加
worker.onerror = e => console.error('Worker error:', e.message) - Worker 脚本开头就写
self.onerror = e => self.postMessage({ error: e.message })，把错误带出来 - 计算型任务结束后主动
self.close()；需复用的 Worker，加定时器：收到消息后重置超时，5 分钟无新消息则self.close() - 不用时主线程调用
worker.terminate()强制销毁，尤其在组件卸载、路由跳转时清理
误用 DOM 相关 API：不是语法错，是根本不可用
Worker 运行在 WorkerGlobalScope 下，没有 window、document、alert、localStorage、parent，也不能调用任何 DOM 方法。但 location 和 navigator 存在且只读，fetch、setTimeout、crypto、importScripts 都可用。
- 别在 Worker 里写
document.getElementById或localStorage.setItem，运行直接报ReferenceError - 需要读页面状态？由主线程判断后通过
postMessage传入，比如当前语言、用户权限、主题色 - 需要存临时数据？用
IndexedDB（支持 Worker）或内存变量；需持久化再交还主线程处理 - 调试时打印
self.constructor.name可确认当前是否在 Worker 环境（输出WorkerGlobalScope）
