postmessage是html5中主线程与worker间唯一安全的数据交换通道，通过结构化克隆实现数据隔离，支持transferable优化大体积数据传输，并需规范消息类型与错误处理。
在HTML5中，主线程与Worker之间不能共享内存或直接访问变量，postMessage是唯一标准、安全的数据交换通道。它的安全性不来自加密，而来自严格的隔离机制和可控的数据传递方式——只要避开常见误操作，就能兼顾效率与防护。
理解postMessage的本质：克隆而非引用
每次调用 postMessage(data)，浏览器都会对 data 执行结构化克隆（Structured Clone）：
- 支持传输的对象类型包括：普通对象、数组、Date、RegExp、Blob、File、ArrayBuffer、TypedArray 等
- 明确不支持的有：函数、DOM 节点、
undefined、Symbol、循环引用——这些会直接报错或被静默丢弃 - 接收方拿到的是全新副本，修改它不会影响发送方原始数据，天然防止意外污染
避免敏感数据明文暴露的关键做法
密钥、令牌、原始用户凭证等绝不能作为普通字段传入 postMessage。正确方式是：
- 密钥由主线程生成，用
crypto.subtle.generateKey()创建后，通过importKey()导入 Worker 上下文，不走 message 通道 - 若必须传递加密参数（如 IV、salt），应确保它们本身不携带可逆信息，并配合 Web Crypto API 在 Worker 内完成运算
- 禁止把密码、JWT token 字符串直接塞进
{ type: 'login', token: 'xxx' }这类消息体中
提升大体积数据交换效率：用 Transferable 实现零拷贝
处理图像、音频或加密后的二进制流时，结构化克隆会完整复制 ArrayBuffer，造成性能浪费。此时应启用 Transferable：
- 主线程发送前：调用
worker.postMessage({ type: 'encrypt', data: buffer }, [buffer]) - Worker 接收后，
buffer的所有权立即移交，原主线程中该 buffer 变为detached状态，不可再读写 - Worker 加密完成后，同样以
self.postMessage({ type: 'done', cipher: resultBuffer }, [resultBuffer])归还所有权
通信流程要带类型标识与错误兜底
裸发裸收容易导致逻辑错乱或静默失败。建议统一约定消息结构：
- 所有消息都包含
type字段（如'init'、'encrypt'、'decrypt'、'error'） - Worker 中用
self.onmessage监听，收到后先校验e.data.type，再解构处理 - 主线程监听
worker.onmessage，对非预期type或缺失字段主动忽略，避免崩溃 - Worker 内部出错时，用
self.postMessage({ type: 'error', code: 'KEY_MISSING', message: '...' })显式上报，不要抛未捕获异常
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
