JavaScript内核与高级编程之：`Atomics`：如何实现`SharedArrayBuffer`的原子操作。

各位观众老爷们，大家好！我是你们的老朋友，代码界的段子手，今天咱们来聊聊JavaScript世界里一个有点神秘，又很关键的东西——Atomics，以及它如何跟SharedArrayBuffer狼狈为奸（哦不，是完美配合）实现原子操作。

开场白：多线程的诱惑与陷阱

在JavaScript的世界里，我们一直习惯了单线程的快乐生活。想象一下，你只有一个大脑，一次只能处理一件事情，简单而高效。但是，随着硬件的发展，多核CPU已经成了标配。如果你的大脑（JavaScript引擎）只能用一个核心，那岂不是浪费了其他几个大脑的潜能？

于是，Web Workers应运而生，它允许我们在浏览器中创建真正的并行线程。就像你拥有了多个大脑，可以同时处理不同的任务。但是，问题也随之而来：多个大脑怎么共享信息呢？如果两个大脑同时想修改同一个记忆（变量），那就会产生混乱，导致不可预测的结果。这就是多线程编程中著名的“竞争条件”（Race Condition）。

解决竞争条件的方法有很多，比如加锁。但是，传统的锁机制在JavaScript中实现起来比较麻烦，而且性能也不好。这时候，Atomics就闪亮登场了，它提供了一种更高效、更安全的方式来操作共享内存。

SharedArrayBuffer：共享的舞台

要理解Atomics，首先要了解SharedArrayBuffer。简单来说，SharedArrayBuffer就是一块可以在多个Web Worker之间共享的内存区域。你可以把它想象成一个公共黑板，所有的Web Worker都可以在上面写字和擦字。

ArrayBuffer 是一个表示原始二进制数据的通用固定长度容器。 你不能直接操作 ArrayBuffer的内容，而是要创建一个类型化数组对象或 DataView 对象，用它们来格式化缓冲区中的数据。

SharedArrayBuffer 和 ArrayBuffer 很相似， 关键的区别是 SharedArrayBuffer 实例可以被传递给 Web Worker (或者主线程) 并且可以在所有线程中访问。这意味着多个线程可以同时读取和写入 SharedArrayBuffer，从而实现数据共享。

Atomics：原子操作的守护神

Atomics对象提供了一组静态方法，用于执行原子操作。什么是原子操作呢？简单来说，原子操作就是不可分割的操作。在执行原子操作的过程中，不会被其他线程打断。就像一笔交易，要么完全成功，要么完全失败，不存在中间状态。

Atomics对象本身不是一个构造函数，你不能通过new Atomics()来创建实例。它只是一个包含静态方法的集合，提供了一系列原子操作函数。

Atomics API 详解 (以及代码示例!)

Atomics提供了一系列的函数，用于读取、写入和修改SharedArrayBuffer中的数据。下面我们来详细了解一下几个常用的API，并配上代码示例，让你更容易理解。

• Atomics.load(typedArray, index): 读取typedArray中指定索引位置的值。

  const sab = new SharedArrayBuffer(Int32Array.BYTES_PER_ELEMENT);
  const i32 = new Int32Array(sab);
  
  Atomics.store(i32, 0, 123); // 先设置一个值
  const value = Atomics.load(i32, 0); // 读取值
  console.log(value); // 输出：123

• Atomics.store(typedArray, index, value): 将value写入typedArray中指定索引位置。

  const sab = new SharedArrayBuffer(Int32Array.BYTES_PER_ELEMENT);
  const i32 = new Int32Array(sab);
  
  Atomics.store(i32, 0, 456); // 写入值
  console.log(i32[0]); // 输出：456 (可以直接通过数组访问，但非原子)

• Atomics.compareExchange(typedArray, index, expectedValue, replacementValue): 比较typedArray中指定索引位置的值是否等于expectedValue，如果相等，则将该位置的值更新为replacementValue，并返回原始值。

  const sab = new SharedArrayBuffer(Int32Array.BYTES_PER_ELEMENT);
  const i32 = new Int32Array(sab);
  
  Atomics.store(i32, 0, 789);
  
  const oldValue = Atomics.compareExchange(i32, 0, 789, 101112);
  console.log(oldValue); // 输出：789
  console.log(i32[0]); // 输出：101112
  
  const oldValue2 = Atomics.compareExchange(i32, 0, 999, 131415); // 比较失败
  console.log(oldValue2); // 输出：101112 (没有修改)
  console.log(i32[0]); // 输出：101112

• Atomics.exchange(typedArray, index, value): 将typedArray中指定索引位置的值更新为value，并返回原始值。

  const sab = new SharedArrayBuffer(Int32Array.BYTES_PER_ELEMENT);
  const i32 = new Int32Array(sab);
  
  Atomics.store(i32, 0, 161718);
  const oldValue = Atomics.exchange(i32, 0, 192021);
  console.log(oldValue); // 输出：161718
  console.log(i32[0]); // 输出：192021

• Atomics.add(typedArray, index, value): 将typedArray中指定索引位置的值加上value，并返回原始值。

  const sab = new SharedArrayBuffer(Int32Array.BYTES_PER_ELEMENT);
  const i32 = new Int32Array(sab);
  
  Atomics.store(i32, 0, 222324);
  const oldValue = Atomics.add(i32, 0, 10);
  console.log(oldValue); // 输出：222324
  console.log(i32[0]); // 输出：222334

• Atomics.sub(typedArray, index, value): 将typedArray中指定索引位置的值减去value，并返回原始值。

  const sab = new SharedArrayBuffer(Int32Array.BYTES_PER_ELEMENT);
  const i32 = new Int32Array(sab);
  
  Atomics.store(i32, 0, 252627);
  const oldValue = Atomics.sub(i32, 0, 5);
  console.log(oldValue); // 输出：252627
  console.log(i32[0]); // 输出：252622

• Atomics.and(typedArray, index, value): 将typedArray中指定索引位置的值与value进行按位与运算，并返回原始值。

  const sab = new SharedArrayBuffer(Int32Array.BYTES_PER_ELEMENT);
  const i32 = new Int32Array(sab);
  
  Atomics.store(i32, 0, 0b1100); // 12
  const oldValue = Atomics.and(i32, 0, 0b1010); // 10
  console.log(oldValue); // 输出：12
  console.log(i32[0]); // 输出：8 (0b1000)

• Atomics.or(typedArray, index, value): 将typedArray中指定索引位置的值与value进行按位或运算，并返回原始值。

  const sab = new SharedArrayBuffer(Int32Array.BYTES_PER_ELEMENT);
  const i32 = new Int32Array(sab);
  
  Atomics.store(i32, 0, 0b1100); // 12
  const oldValue = Atomics.or(i32, 0, 0b1010); // 10
  console.log(oldValue); // 输出：12
  console.log(i32[0]); // 输出：14 (0b1110)

• Atomics.xor(typedArray, index, value): 将typedArray中指定索引位置的值与value进行按位异或运算，并返回原始值。

  const sab = new SharedArrayBuffer(Int32Array.BYTES_PER_ELEMENT);
  const i32 = new Int32Array(sab);
  
  Atomics.store(i32, 0, 0b1100); // 12
  const oldValue = Atomics.xor(i32, 0, 0b1010); // 10
  console.log(oldValue); // 输出：12
  console.log(i32[0]); // 输出：6 (0b0110)

• Atomics.isLockFree(size): 检查当前系统是否支持指定大小的原子操作。

  console.log(Atomics.isLockFree(4)); // 输出：true (通常情况下，32位整数是无锁的)
  console.log(Atomics.isLockFree(8)); // 输出：true (通常情况下，64位整数也是无锁的)

• Atomics.wait(typedArray, index, value, timeout): 暂停当前线程，直到typedArray中指定索引位置的值不等于value，或者超时。

  • typedArray: 一个共享的类型化数组.
  • index: 要观察的typedArray中的索引.
  • value: 期望的值. 线程会阻塞直到 typedArray[index] 不等于 value。
  • timeout: 可选的，超时时间，单位是毫秒.
  • 返回值：
    • "ok": 值改变了。
    • "not-equal": 该值已经不等于value了，不需要等待.
    • "timed-out": 等待超时。

• Atomics.notify(typedArray, index, count): 唤醒等待在typedArray中指定索引位置上的线程。

  • typedArray: 一个共享的类型化数组。
  • index: 要唤醒线程的typedArray中的索引.
  • count: 要唤醒的线程数量.

Atomics.wait()和Atomics.notify()：线程同步的利器

Atomics.wait()和Atomics.notify()是Atomics API中比较高级的功能，它们可以用来实现线程之间的同步。Atomics.wait()可以让线程进入休眠状态，直到另一个线程通过Atomics.notify()唤醒它。

下面是一个简单的示例，演示了如何使用Atomics.wait()和Atomics.notify()实现一个简单的生产者-消费者模型。

// 主线程
const sab = new SharedArrayBuffer(Int32Array.BYTES_PER_ELEMENT * 2); // 两个元素：[0] 表示数据, [1] 表示状态 (0: 空, 1: 有数据)
const i32 = new Int32Array(sab);

// 生产者
function producer() {
  console.log("Producer started");
  for (let i = 1; i <= 5; i++) {
    // 等待消费者消费
    Atomics.wait(i32, 1, 1); // 等待状态变为0 (空)
    console.log("Producer producing: " + i);
    Atomics.store(i32, 0, i); // 生产数据
    Atomics.store(i32, 1, 1); // 设置状态为1 (有数据)
    Atomics.notify(i32, 1, 1); // 唤醒消费者
  }
  console.log("Producer finished");
}

// 消费者
function consumer() {
  console.log("Consumer started");
  for (let i = 1; i <= 5; i++) {
    // 等待生产者生产
    Atomics.wait(i32, 1, 0); // 等待状态变为1 (有数据)
    const data = Atomics.load(i32, 0); // 消费数据
    console.log("Consumer consuming: " + data);
    Atomics.store(i32, 1, 0); // 设置状态为0 (空)
    Atomics.notify(i32, 1, 1); // 唤醒生产者
  }
  console.log("Consumer finished");
}

// 创建 Web Worker
const worker1 = new Worker(URL.createObjectURL(new Blob([`
  onmessage = function(e) {
    const sab = e.data;
    const i32 = new Int32Array(sab);

    function producer() {
      console.log("Producer started in worker");
      for (let i = 1; i <= 5; i++) {
        // 等待消费者消费
        Atomics.wait(i32, 1, 1); // 等待状态变为0 (空)
        console.log("Producer producing in worker: " + i);
        Atomics.store(i32, 0, i); // 生产数据
        Atomics.store(i32, 1, 1); // 设置状态为1 (有数据)
        Atomics.notify(i32, 1, 1); // 唤醒消费者
      }
      console.log("Producer finished in worker");
    }

    producer();
  }
`])));

const worker2 = new Worker(URL.createObjectURL(new Blob([`
  onmessage = function(e) {
    const sab = e.data;
    const i32 = new Int32Array(sab);

    function consumer() {
      console.log("Consumer started in worker");
      for (let i = 1; i <= 5; i++) {
        // 等待生产者生产
        Atomics.wait(i32, 1, 0); // 等待状态变为1 (有数据)
        const data = Atomics.load(i32, 0); // 消费数据
        console.log("Consumer consuming in worker: " + data);
        Atomics.store(i32, 1, 0); // 设置状态为0 (空)
        Atomics.notify(i32, 1, 1); // 唤醒生产者
      }
      console.log("Consumer finished in worker");
    }

    consumer();
  }
`])));

// 启动生产者和消费者
worker1.postMessage(sab);
worker2.postMessage(sab);

// 初始化状态为 0 (空)
Atomics.store(i32, 1, 0);
Atomics.notify(i32, 1, 1); // 唤醒生产者 (让生产者先开始)

在这个例子中，我们使用SharedArrayBuffer来共享数据和状态。i32[0]用于存储数据，i32[1]用于存储状态（0表示空，1表示有数据）。生产者在生产数据之前，会先检查状态是否为空，如果不是，则进入休眠状态，等待消费者消费。消费者在消费数据之前，会先检查状态是否为有数据，如果不是，则进入休眠状态，等待生产者生产。

通过Atomics.wait()和Atomics.notify()，我们实现了生产者和消费者之间的同步，避免了竞争条件，保证了程序的正确性。

注意事项与最佳实践

• 类型化数组的选择： Atomics只能用于类型化数组（Int8Array, Uint8Array, Int16Array, Uint16Array, Int32Array, Uint32Array, Float32Array, Float64Array, BigInt64Array, BigUint64Array）。选择合适的类型化数组非常重要，它会影响程序的性能和内存占用。
• 错误处理： Atomics.wait()可能会因为超时或者其他原因而失败。因此，在使用Atomics.wait()时，一定要进行错误处理，避免程序崩溃。
• 过度同步： 过度使用Atomics.wait()和Atomics.notify()可能会导致性能下降。因此，在设计多线程程序时，要尽量减少线程之间的同步，避免不必要的等待。
• 安全性： SharedArrayBuffer和Atomics功能强大，但也带来了安全风险。恶意代码可能会利用这些API来攻击浏览器或者操作系统。因此，在使用SharedArrayBuffer和Atomics时，一定要注意安全问题，避免引入安全漏洞。

总结

Atomics和SharedArrayBuffer是JavaScript中实现多线程编程的重要工具。通过Atomics提供的原子操作，我们可以安全地操作共享内存，避免竞争条件，保证程序的正确性。虽然Atomics API比较复杂，但是只要理解了其基本原理，就可以灵活地运用它们来解决实际问题。

最后的忠告：谨慎使用，充分测试

多线程编程是一把双刃剑。用好了，可以提高程序的性能；用不好，可能会导致程序崩溃或者出现难以调试的bug。因此，在使用Atomics和SharedArrayBuffer时，一定要谨慎，充分测试，确保程序的正确性和稳定性。

好了，今天的讲座就到这里。希望大家有所收获！ 如果您觉得我的讲解还算有趣，请点个赞，如果觉得我讲的不好，请…也点个赞吧！ 毕竟，鼓励是创作的动力嘛！ 咱们下期再见！