SharedArrayBuffer和Atomics

ECMAScript 7 引入了 SharedArrayBuffer 和 Atomics 对象，为 JavaScript 提供了多线程编程的基础能力。这两个特性使得开发者能够在 Web Worker 之间共享内存，并通过原子操作实现线程安全的数据访问。

SharedArrayBuffer 的基本概念

SharedArrayBuffer 是一种特殊的 ArrayBuffer，它可以在多个 Web Worker 之间共享内存。与普通的 ArrayBuffer 不同，SharedArrayBuffer 允许不同的线程直接读写同一块内存区域，从而实现高效的数据共享。

// 主线程
const sharedBuffer = new SharedArrayBuffer(16);
const sharedArray = new Int32Array(sharedBuffer);

// 创建 Web Worker
const worker = new Worker('worker.js');
worker.postMessage({ buffer: sharedBuffer });

// worker.js
self.onmessage = function(e) {
  const sharedArray = new Int32Array(e.data.buffer);
  sharedArray[0] = 42; // 修改共享内存
};

Atomics 对象的作用

由于多线程环境下存在竞态条件问题，直接操作 SharedArrayBuffer 可能导致数据不一致。Atomics 对象提供了一组原子操作方法，确保操作的不可分割性：

// 线程安全的递增操作
Atomics.add(sharedArray, 0, 1);

// 线程安全的比较交换
Atomics.compareExchange(sharedArray, 0, 42, 100);

原子操作的典型场景

计数器同步

多个 Worker 需要安全地递增同一个计数器：

// Worker 1
Atomics.add(sharedArray, 0, 1);

// Worker 2
const oldValue = Atomics.load(sharedArray, 0);
Atomics.store(sharedArray, 0, oldValue + 1);

互斥锁实现

使用 Atomics.wait 和 Atomics.notify 可以实现简单的锁机制：

const LOCK = 0;
const UNLOCK = 1;

// 加锁
while (Atomics.compareExchange(sharedArray, 0, UNLOCK, LOCK) !== UNLOCK) {
  Atomics.wait(sharedArray, 0, LOCK);
}

// 临界区代码...

// 解锁
Atomics.store(sharedArray, 0, UNLOCK);
Atomics.notify(sharedArray, 0, 1);

内存模型与顺序保证

ECMAScript 定义了严格的内存模型，Atomics 操作提供了顺序保证：

// 普通写入可能被重排序
sharedArray[1] = 10;
sharedArray[2] = 20;

// 使用 Atomics 保证顺序
Atomics.store(sharedArray, 1, 10);
Atomics.store(sharedArray, 2, 20);

浏览器安全限制

由于 Spectre 等安全漏洞，现代浏览器对 SharedArrayBuffer 有严格限制：

1. 需要启用跨域隔离：

<!-- 响应头必须包含 -->
Cross-Origin-Opener-Policy: same-origin
Cross-Origin-Embedder-Policy: require-corp

2. 本地开发时需要特殊标志：

chrome --enable-features=SharedArrayBuffer

性能优化实践

合理使用 SharedArrayBuffer 可以显著提升计算密集型任务的性能：

// 并行计算示例
const WORKER_COUNT = 4;
const workers = [];

for (let i = 0; i < WORKER_COUNT; i++) {
  const worker = new Worker('compute.js');
  worker.postMessage({
    buffer: sharedBuffer,
    start: i * (sharedArray.length / WORKER_COUNT),
    end: (i + 1) * (sharedArray.length / WORKER_COUNT)
  });
  workers.push(worker);
}

实际应用案例

WebAssembly 多线程

SharedArrayBuffer 是 WebAssembly 多线程支持的基础：

const wasmBuffer = new SharedArrayBuffer(1024 * 1024);
WebAssembly.instantiateStreaming(fetch('module.wasm'), {
  env: { memory: new WebAssembly.Memory({ initial: 1, shared: true }) }
});

实时音视频处理

多个 Worker 可以并行处理音频数据块：

// 音频处理Worker
self.onmessage = (e) => {
  const audioData = new Float32Array(e.data.buffer);
  processAudio(audioData, e.data.offset, e.data.length);
  Atomics.notify(e.data.buffer, e.data.syncIndex);
};

调试与错误处理

多线程编程需要特别注意错误处理：

try {
  Atomics.add(sharedArray, 0, 1);
} catch (e) {
  if (e instanceof TypeError) {
    console.error('非SharedArrayBuffer操作');
  }
}

兼容性与替代方案

对于不支持的环境，可以考虑以下方案：

1. 使用 postMessage 进行数据传递
2. 降级到单线程模式
3. 使用 ServiceWorker 实现部分并行化

if (!window.SharedArrayBuffer) {
  console.warn('SharedArrayBuffer not supported');
  // 实现替代方案
}

未来发展方向

ECMAScript 可能会继续增强多线程支持：

1. 更高级的同步原语
2. 线程局部存储
3. 改进的内存模型
4. 与 WebGPU 的深度集成