必须将可转移对象本身（如arraybuffer实例）而非其视图（如uint8array）传入transfer数组且仅一次，transfer后原arraybuffer即被detach，bytelength变为0，不可再访问。
直接用 postMessage() 的第二个参数传 transfer 数组，就能触发零拷贝；不传或传错类型，就会退化成结构化克隆（深拷贝），大 ArrayBuffer 会卡住主线程。
怎么写 transfer 参数才有效
必须把可转移对象本身（不是它的视图）放进 transfer 数组，且只能传一次。常见错误是传了 Uint8Array 而不是它的 .buffer。
-
worker.postMessage(buffer, [buffer])✅ 正确：传的是ArrayBuffer实例 -
worker.postMessage(view, [view])❌ 报错：Uint8Array不可转移，会抛DataCloneError -
worker.postMessage(view, [view.buffer])✅ 正确：取视图底层 buffer 再转移 -
worker.postMessage({buf: buffer}, [buffer])✅ 可以，但注意 message 对象里字段值仍是原引用，转移只作用于transfer列表中的项
transfer 后原 ArrayBuffer 还能用吗
不能。转移完成瞬间，原 ArrayBuffer 就被 detach，buffer.byteLength 变成 0，任何读写操作（如 new Uint8Array(buffer)）都会静默失败或抛 TypeError。
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
- 别在
postMessage()后继续用该buffer，哪怕只是console.log(buffer.byteLength) - 如果需要保留原始数据，改用
structuredClone()，但仅限中小规模（≤2MB） - Worker 收到后，拿到的是同一块内存的合法引用，可直接构造
TypedArray使用
ImageBitmap 和 MessagePort 怎么转移
它们和 ArrayBuffer 一样走 transfer 流程，但兼容性更敏感，尤其 ImageBitmap 在 Firefox/Safari 中支持较晚。
-
createImageBitmap(blob).then(bitmap => worker.postMessage(bitmap, [bitmap]))✅ Chrome 稳定支持 -
const port = new MessageChannel().port1; worker.postMessage({port}, [port])✅ 常用于建立双向通信通道 - Firefox 115+、Safari 16.4+ 才完整支持
ImageBitmap转移，旧版本会回退为克隆（慢且占内存） -
OffscreenCanvas转移需开启crossOriginIsolated，否则直接报错
transfer 失败的典型报错和排查点
最常遇到的是 DataCloneError，但具体原因藏在细节里，不能只看错误名。
-
Failed to execute 'postMessage' on 'Worker': ArrayBuffer at index 0 is already detached→ 该buffer已被转移过，或曾被transfer过又试图重复使用 -
TypeError: Failed to execute 'postMessage' on 'Worker': function is not transferable→ 消息里混入了函数、Promise或 DOM 节点 -
DOMException: Failed to execute 'postMessage' on 'Worker': ImageBitmap object is not transferable→ 浏览器不支持或createImageBitmap()返回的 bitmap 未成功生成（比如跨域图片未加crossorigin） - 用
console.log(buffer.isView)或buffer.constructor.name快速确认对象类型，避免误判
Transferable 的核心约束很硬：转移即放弃所有权，不可逆，也不容错。真正容易被忽略的，是「转移后原引用是否还在其他地方被隐式持有」——比如某个闭包、缓存 Map 或 class 实例属性里还存着这个 buffer，那后续访问就会静默失效，debug 时很难定位。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
