SharedArrayBuffer 与 Atomics：实现 JavaScript 真正的共享内存并发

好的，各位观众老爷，各位程序媛、攻城狮们，欢迎来到今天的并发编程脱口秀！今天我们要聊点刺激的——JavaScript 的共享内存并发，主角就是 SharedArrayBuffer 和 Atomics 这对黄金搭档。

开场白：JavaScript 的并发困境——单身狗的呐喊

咱们都知道，JavaScript 一直以来都以单线程著称。这就像一个苦逼的单身狗，啥事都得自己扛，既要刷碗又要洗衣服，效率低到令人发指。以前，JavaScript 的并发只能靠 Web Workers 这种“异地恋”模式，主线程和 Worker 线程之间通过 postMessage 传递消息，就像异地恋的情侣只能靠短信和视频聊天维持感情，效率不高，还经常延迟卡顿。

但是！时代变了！自从 SharedArrayBuffer 和 Atomics 横空出世，JavaScript 终于可以光明正大地搞“同居”了！这意味着多个线程可以共享同一块内存，直接读写数据，无需再通过消息传递，效率提升 N 个数量级！

第一幕：SharedArrayBuffer——共享的秘密花园

SharedArrayBuffer，顾名思义，就是一个可以在多个执行上下文（比如主线程和 Web Workers）之间共享的 ArrayBuffer。你可以把它想象成一个共享的秘密花园，主线程和 Worker 线程都可以进去玩耍，种花、拔草、甚至偷偷埋点“宝藏”（数据）。

// 创建一个 1MB 的 SharedArrayBuffer
const sharedBuffer = new SharedArrayBuffer(1024 * 1024);

// 创建一个 Int32Array 视图，方便操作
const sharedArray = new Int32Array(sharedBuffer);

// 在主线程中写入数据
sharedArray[0] = 42;

// 在 Web Worker 中读取数据
// (假设 worker.js 中已经接收到了 sharedBuffer)
// const workerArray = new Int32Array(sharedBuffer);
// console.log(workerArray[0]); // 输出 42

重点来了：

• 共享！共享！共享！ 重要的事情说三遍。SharedArrayBuffer 最大的特点就是共享。
• ArrayBuffer 的亲戚。 它本质上还是一个 ArrayBuffer，只是可以共享而已。
• 需要显式传递。 虽然可以共享，但你需要显式地将 SharedArrayBuffer 传递给 Web Workers，比如通过 postMessage。

第二幕：Atomics——花园里的秩序维护者

有了共享的秘密花园，问题也来了。如果没有秩序，大家一拥而上，同时修改同一块数据，那就会乱成一锅粥，出现各种数据竞争问题，导致程序崩溃或者产生不可预测的结果。

这时候，我们的英雄 Atomics 就该登场了！Atomics 提供了一系列原子操作，可以确保在多个线程并发访问共享内存时，操作的原子性，就像花园里的秩序维护者，保证大家和谐共处。

Atomics 就像一把瑞士军刀，提供了各种原子操作：

• load(typedArray, index): 原子地读取指定索引处的值。
• store(typedArray, index, value): 原子地将指定值写入指定索引处。
• add(typedArray, index, value): 原子地将指定值加到指定索引处的值。
• sub(typedArray, index, value): 原子地将指定值从指定索引处的值减去。
• compareExchange(typedArray, index, expectedValue, newValue): 原子地比较指定索引处的值与期望值，如果相等，则将新值写入该索引处，并返回原始值。
• exchange(typedArray, index, value): 原子地将新值写入指定索引处，并返回原始值。
• wait(typedArray, index, value, timeout): 原子地检查指定索引处的值是否与期望值相等，如果相等，则阻塞当前线程，直到其他线程修改了该值。
• wake(typedArray, index, count): 唤醒等待在指定索引处的指定数量的线程。

举个栗子：简单的计数器

假设我们想用 SharedArrayBuffer 和 Atomics 实现一个简单的计数器，允许多个线程并发地增加计数器的值。

// 创建一个 SharedArrayBuffer
const sharedBuffer = new SharedArrayBuffer(4); // 4 bytes for an Int32
const counter = new Int32Array(sharedBuffer);

// 初始化计数器为 0
counter[0] = 0;

// 定义一个增加计数器的函数
function incrementCounter() {
  // 原子地增加计数器的值
  Atomics.add(counter, 0, 1);
}

// 创建多个 Web Workers，并发地增加计数器的值
const numWorkers = 4;
for (let i = 0; i < numWorkers; i++) {
  const worker = new Worker('worker.js');
  worker.postMessage(sharedBuffer);
}

// worker.js 的代码
// self.onmessage = function(event) {
//   const sharedBuffer = event.data;
//   const counter = new Int32Array(sharedBuffer);

//   // 增加计数器的值多次
//   for (let i = 0; i < 10000; i++) {
//     Atomics.add(counter, 0, 1);
//   }
// };

// 等待所有 Worker 完成
setTimeout(() => {
  console.log("Final Counter Value:", counter[0]); // 应该接近 40000
}, 2000);

在这个例子中，我们使用 Atomics.add 原子地增加计数器的值，保证了在多个线程并发访问时，计数器的值不会出现错误。

重点来了：

• 原子性！原子性！原子性！ 重要的事情说三遍。Atomics 保证操作的原子性，避免数据竞争。
• TypedArray 的好基友。 Atomics 只能操作 TypedArray，比如 Int32Array、Float64Array 等。
• 需要配合 SharedArrayBuffer 使用。 Atomics 只有在 SharedArrayBuffer 上才能发挥作用。

第三幕：更高级的应用——锁和信号量

除了简单的计数器，SharedArrayBuffer 和 Atomics 还可以用来实现更复杂的并发控制机制，比如锁和信号量。

1. 锁 (Lock)

锁是一种同步机制，用于保护共享资源，防止多个线程同时访问。我们可以使用 Atomics 实现一个简单的自旋锁。

// 创建一个 SharedArrayBuffer 用于存储锁的状态
const sharedBuffer = new SharedArrayBuffer(4);
const lock = new Int32Array(sharedBuffer);

// 初始化锁为 0 (解锁状态)
lock[0] = 0;

// 获取锁
function acquireLock() {
  while (Atomics.compareExchange(lock, 0, 0, 1) !== 0) {
    // 自旋等待锁释放
    //console.log("waiting for lock...");
  }
}

// 释放锁
function releaseLock() {
  Atomics.store(lock, 0, 0);
}

// 使用锁保护共享资源
function accessSharedResource() {
  acquireLock();
  try {
    // 访问共享资源
    console.log("Accessing shared resource...");
  } finally {
    releaseLock();
  }
}

// 在多个 Web Workers 中访问共享资源
// (假设 worker.js 中已经接收到了 sharedBuffer)
// self.onmessage = function(event) {
//   const sharedBuffer = event.data;
//   const lock = new Int32Array(sharedBuffer);
//   accessSharedResource(lock);
// };

2. 信号量 (Semaphore)

信号量是一种更通用的同步机制，用于控制对有限资源的访问。我们可以使用 Atomics 实现一个简单的信号量。

// 创建一个 SharedArrayBuffer 用于存储信号量的计数
const sharedBuffer = new SharedArrayBuffer(4);
const semaphore = new Int32Array(sharedBuffer);

// 初始化信号量的计数为指定的值
const initialCount = 2;
semaphore[0] = initialCount;

// 获取信号量
function acquireSemaphore() {
  while (true) {
    const currentCount = Atomics.load(semaphore, 0);
    if (currentCount > 0) {
      const newCount = currentCount - 1;
      if (Atomics.compareExchange(semaphore, 0, currentCount, newCount) === currentCount) {
        // 成功获取信号量
        return;
      }
    } else {
      // 信号量已用完，等待
      Atomics.wait(semaphore, 0, 0, Infinity); // 无限期等待
    }
  }
}

// 释放信号量
function releaseSemaphore() {
  const currentCount = Atomics.add(semaphore, 0, 1);
  if (currentCount <= 0) {
    // 唤醒等待的线程
    Atomics.wake(semaphore, 0, 1);
  }
}

// 使用信号量控制对有限资源的访问
function accessLimitedResource() {
  acquireSemaphore();
  try {
    // 访问有限资源
    console.log("Accessing limited resource...");
  } finally {
    releaseSemaphore();
  }
}

// 在多个 Web Workers 中访问有限资源
// (假设 worker.js 中已经接收到了 sharedBuffer)
// self.onmessage = function(event) {
//   const sharedBuffer = event.data;
//   const semaphore = new Int32Array(sharedBuffer);
//   accessLimitedResource(semaphore);
// };

第四幕：安全问题——花园里的安全隐患

SharedArrayBuffer 和 Atomics 带来了性能提升的同时，也引入了一些安全问题。最主要的就是 Spectre 漏洞。

Spectre 漏洞 是一种利用 CPU 的推测执行机制来窃取敏感数据的漏洞。由于 SharedArrayBuffer 允许 JavaScript 代码访问任意内存地址，攻击者可以利用 Spectre 漏洞来读取其他进程的内存，包括操作系统内核的内存，从而窃取敏感信息。

为了缓解 Spectre 漏洞，浏览器厂商采取了一些措施，比如禁用 SharedArrayBuffer，或者降低 JavaScript 的精度。但是，这些措施也会影响 JavaScript 的性能。

所以，使用 SharedArrayBuffer 和 Atomics 时，一定要注意安全问题，避免出现安全漏洞。

总结：拥抱并发，小心踩坑

SharedArrayBuffer 和 Atomics 为 JavaScript 带来了真正的共享内存并发，开启了 JavaScript 并发编程的新纪元。我们可以利用它们来构建高性能的 Web 应用，比如图像处理、音视频编辑、游戏引擎等。

但是，SharedArrayBuffer 和 Atomics 也不是万能的。它们引入了一些安全问题，增加了编程的复杂性。所以，在使用它们时，一定要谨慎小心，充分理解其原理和限制，避免出现错误。

最后，给大家一些建议：

• 充分理解 SharedArrayBuffer 和 Atomics 的原理。
• 注意数据竞争问题，使用 Atomics 保证操作的原子性。
• 注意安全问题，避免出现安全漏洞。
• 合理使用锁和信号量等同步机制。
• 进行充分的测试，确保程序的正确性和稳定性。

希望今天的并发编程脱口秀能给大家带来一些启发。记住，并发编程就像在刀尖上跳舞，既刺激又危险。但是，只要掌握了正确的姿势，就能舞出精彩的人生！

感谢各位的观看，下次再见！👋