web worker传参报data_clone_err错误是因为结构化克隆不支持function、undefined、regexp、date（部分）、error、dom节点及循环引用对象；应只传plain object、array、string、number、boolean、null、arraybuffer等可克隆类型，复杂类型需转换为可序列化形式。
Web Worker 传参时报 DATA_CLONE_ERR 错误
这是因为你试图传递了无法被结构化克隆（structured clone）算法处理的对象，比如 function、undefined、RegExp、Date（部分环境）、Error、DOM 节点，或者含有循环引用的对象。
浏览器在主线程和 Worker 线程之间传输数据时，不是共享内存，而是复制——走的是结构化克隆协议，不支持深拷贝所有 JS 类型。
- 常见错误现象：
Uncaught DataCloneError: Failed to execute 'postMessage' on 'Worker': function() { ... } could not be cloned. - 别传
this、class 实例、带方法的对象，哪怕只用其中几个字段 - 如果必须传复杂状态，先用
JSON.stringify()+JSON.parse()过一遍（但会丢掉函数、undefined、Date 等） - 更稳妥的做法是只传 plain object、array、string、number、boolean、null，以及
ArrayBuffer、TypedArray、Map、Set（注意兼容性）
想传 Date 或 RegExp 怎么办
它们不能直接跨线程传递，但可以转成可序列化的形式再还原。
-
Date→ 传date.getTime()（number），Worker 里用new Date(ms)构造 -
RegExp→ 传{ source: re.source, flags: re.flags }，Worker 里用new RegExp(source, flags) - 自定义类？别传实例。改用「纯数据对象 + 工厂函数」模式：主线程传
{ type: 'user', id: 123, name: 'Alice' }，Worker 里调用createUser(data) - 注意
Map和Set在 Chrome/Firefox 支持结构化克隆，但 Safari 旧版本不支持，生产环境建议降级为数组对[ [k1,v1], [k2,v2] ]
传大数组或图像数据太慢，怎么优化
默认 postMessage() 是深拷贝，大数据量会卡顿甚至 OOM。要用 transferable 对象零拷贝传输。
立即学习“前端免费学习笔记（深入）”；
- 只适用于
ArrayBuffer、MessagePort、ImageBitmap等少数类型 - 传
ArrayBuffer时加第二参数：worker.postMessage(data, [data.buffer])—— 注意传的是.buffer，且传完主线程不能再访问该 buffer - 图像处理常用组合：
canvas.transferToImageBitmap()→ 得到ImageBitmap→postMessage(bitmap, [bitmap]) - 别误传
Uint8Array.buffer后还继续读写该Uint8Array，会报Detached ArrayBuffer
Worker 内部抛错没反应，怎么调试
Worker 的错误不会冒泡到主线程控制台，除非你显式监听 onerror 或 onmessageerror。
- 主线程要加：
worker.onerror = e => console.error('Worker error:', e.message) - Worker 自身也应加：
self.onerror = e => self.postMessage({ type: 'error', msg: e.message }) - 别依赖
console.log查看 Worker 日志——它输出在 DevTools 的「Console」标签页，但过滤器默认可能关掉了「Worker」上下文，需手动勾选 - Chrome 中可在 DevTools > Application > Service Workers 页面点击「Open dedicated DevTools for worker」，获得独立调试窗口
结构化克隆的边界比直觉窄，尤其在混合使用现代 API（如 Map、Promise、AbortSignal）时，很容易踩进“看起来能传、实际报错”的坑。最稳的通信契约，还是以 JSON-safe 数据为准，其余靠约定转换。
