如何运用 SharedArrayBuffer 在多个 Web Worker 之间直接共享海量原始数据缓冲区

SharedArrayBuffer支持多线程零拷贝共享内存，但需跨域隔离、Atomics同步及transfer list传递。

SharedArrayBuffer 允许多个 Web Worker（以及主线程）直接访问同一块内存，无需序列化/复制，是处理海量原始数据（如音频采样、图像像素、科学计算数组）时实现零拷贝共享的关键机制。但需注意：它不提供自动同步，必须配合 Atomics 手动协调读写，且现代浏览器默认要求跨域隔离（Cross-Origin Isolation）才能启用。

启用 SharedArrayBuffer 的前提条件

Chrome 92+、Firefox 93+ 等主流浏览器已默认禁用 SharedArrayBuffer，除非页面满足跨域隔离要求，否则会抛出 SharedArrayBuffer is not defined 或静默失败。

• 服务器需返回两个关键响应头：
  Cross-Origin-Embedder-Policy: require-corp
  Cross-Origin-Opener-Policy: same-origin
• 若资源（如 iframe、脚本）来自不同源，需显式添加 crossorigin 属性，例如：
  <script src="worker.js" type="module" crossorigin></script>
• 可通过 self.crossOriginIsolated 在 Worker 或主线程中检查是否就绪：
  if (crossOriginIsolated) { /* 可安全使用 SharedArrayBuffer */ }

创建与分发 SharedArrayBuffer

通常由主线程创建缓冲区，再通过 postMessage 传给各 Worker。注意：传递的是引用，不是副本。

• 主线程示例（分配 1GB 的 Int32 数组）：
  const sab = new SharedArrayBuffer(1024 * 1024 * 1024); // 1GB
const int32View = new Int32Array(sab);
worker.postMessage({ buffer: sab }, [sab]); // 必须在 transfer list 中列出
• Worker 接收：
  self.onmessage = ({ data }) => {
  const { buffer } = data;
  if (buffer instanceof SharedArrayBuffer) {
    const view = new Float64Array(buffer); // 按需创建视图
  }
};
• ⚠️ 关键：必须把 sab 放入 postMessage 的第二个参数（transfer list），否则会报错或仅传递普通 ArrayBuffer。

使用 Atomics 实现线程安全访问

SharedArrayBuffer 本身不保证操作原子性。多个 Worker 同时写同一位置会导致竞态；同时读写可能读到撕裂值。必须用 Atomics 显式同步。

• 基础原子操作示例：
  Atomics.add(int32View, 0, 1); // 原子加法，返回旧值
Atomics.load(int32View, 0); // 原子读取
Atomics.store(int32View, 0, 42); // 原子写入
• 等待/通知协作（适合生产者-消费者模式）：
  Atomics.wait(int32View, 0, 0); // 阻塞直到位置 0 不等于 0
Atomics.notify(int32View, 0, 1); // 唤醒最多 1 个等待者
• 避免轮询：用 Atomics.wait() 替代 while (true) { ... }，节省 CPU。

实用模式与注意事项

直接裸用 SharedArrayBuffer + Atomics 较底层，实际项目中常封装为更高级的结构。

• 环形缓冲区（Ring Buffer）：适合流式数据（如实时音频处理）。用两个原子变量分别记录读/写指针，Worker A 写入、Worker B 读取，通过 Atomics.compareExchange 协调边界。
• 分块工作区：将大缓冲区分成固定大小块（如每块 64KB），用一个 Int32Array 管理状态（0=空闲，1=正在写，2=就绪），Worker 按需申请/释放块。
• 避免 false sharing：不同 Worker 频繁访问相邻内存地址（如连续的 int32）可能导致缓存行争用。可在关键字段间插入 padding（如 64 字节对齐）。
• 调试提示：Chrome DevTools 的 Memory 面板可查看 SharedArrayBuffer 分配；用 console.time() 对比 SAB 与普通 postMessage 传输大数组的耗时差异明显。