JavaScript内核与高级编程之：`JavaScript`的`Atomics`：如何在 `SharedArrayBuffer` 上进行原子操作，避免竞态条件。

各位听众，早上好！今天我们来聊聊JavaScript里的“核武器”—— Atomics。这玩意儿听起来挺唬人，但实际上，它是解决并发编程中数据同步问题的利器。简单来说，就是让你在多个线程里安全地玩耍 SharedArrayBuffer，避免“你动我动，数据爆炸”的尴尬局面。

一、SharedArrayBuffer：共享内存的潘多拉魔盒

在过去，JavaScript是单线程的代名词。但随着Web Worker的出现，我们终于可以在浏览器里模拟多线程了。而SharedArrayBuffer，就是让这些线程共享同一块内存区域的关键。

想象一下，你和你的小伙伴共享一个白板（这就是SharedArrayBuffer），你们都可以在上面写写画画。如果没有约定规则，你刚画了个小人，他一笔下去就变成了“奥特曼”。这就是并发问题，也叫竞态条件（Race Condition）。

SharedArrayBuffer就像潘多拉的魔盒，打开了并发编程的可能性，但也释放了竞态条件的“妖魔”。

二、竞态条件：数据混乱的罪魁祸首

竞态条件，顾名思义，就是多个线程争夺资源，导致结果不确定的情况。

举个例子，假设我们有一个计数器，两个线程同时对其进行自增操作：

// 线程A
let currentValue = sab[0]; // 读取计数器值
let newValue = currentValue + 1; // 计算新值
sab[0] = newValue; // 写回新值

// 线程B
let currentValue = sab[0]; // 读取计数器值
let newValue = currentValue + 1; // 计算新值
sab[0] = newValue; // 写回新值

如果线程A和线程B“同时”执行，可能会出现以下情况：

线程A读取sab[0]的值，假设是0。
线程B读取sab[0]的值，也假设是0。
线程A将1写回sab[0]。
线程B将1写回sab[0]。

结果是，计数器只增加了1，而不是我们期望的2！这就是典型的竞态条件。

三、Atomics：原子操作的守护神

Atomics对象提供了一系列原子操作，可以确保在多线程环境中，对SharedArrayBuffer的读写操作是原子性的。也就是说，一个线程在执行原子操作时，其他线程无法干扰。

Atomics就像给白板加了一层保护膜。只有拥有“原子笔”的人才能在上面写字，而且写完之前，别人不能动。

四、Atomics API：原子操作全家桶

Atomics对象提供了一系列静态方法，用于执行各种原子操作。我们来逐一介绍：

Atomics.load(typedArray, index): 原子地读取typedArray指定索引的值。

const sab = new SharedArrayBuffer(4);
const int32Array = new Int32Array(sab);
int32Array[0] = 42;

const value = Atomics.load(int32Array, 0); // value 现在是 42
console.log(value);

Atomics.store(typedArray, index, value): 原子地将value写入typedArray指定索引。

const sab = new SharedArrayBuffer(4);
const int32Array = new Int32Array(sab);

Atomics.store(int32Array, 0, 123); // 将 123 写入 int32Array[0]
console.log(int32Array[0]); // 输出 123

Atomics.exchange(typedArray, index, value): 原子地将value写入typedArray指定索引，并返回原来的值。

const sab = new SharedArrayBuffer(4);
const int32Array = new Int32Array(sab);
int32Array[0] = 42;

const oldValue = Atomics.exchange(int32Array, 0, 123); // oldValue 是 42，int32Array[0] 现在是 123
console.log(oldValue); // 输出 42
console.log(int32Array[0]); // 输出 123

Atomics.compareExchange(typedArray, index, expectedValue, replacementValue): 原子地比较typedArray指定索引的值和expectedValue，如果相等，则将replacementValue写入该索引，并返回原来的值。如果不相等，则不进行任何操作，直接返回原来的值。

const sab = new SharedArrayBuffer(4);
const int32Array = new Int32Array(sab);
int32Array[0] = 42;

const oldValue = Atomics.compareExchange(int32Array, 0, 42, 123); // oldValue 是 42，int32Array[0] 现在是 123
console.log(oldValue); // 输出 42
console.log(int32Array[0]); // 输出 123

const oldValue2 = Atomics.compareExchange(int32Array, 0, 999, 456); // oldValue2 是 123，int32Array[0] 仍然是 123
console.log(oldValue2); // 输出 123
console.log(int32Array[0]); // 输出 123

Atomics.add(typedArray, index, value): 原子地将value加到typedArray指定索引的值上，并返回原来的值。

const sab = new SharedArrayBuffer(4);
const int32Array = new Int32Array(sab);
int32Array[0] = 42;

const oldValue = Atomics.add(int32Array, 0, 10); // oldValue 是 42，int32Array[0] 现在是 52
console.log(oldValue); // 输出 42
console.log(int32Array[0]); // 输出 52

Atomics.sub(typedArray, index, value): 原子地将value从typedArray指定索引的值上减去，并返回原来的值。

const sab = new SharedArrayBuffer(4);
const int32Array = new Int32Array(sab);
int32Array[0] = 42;

const oldValue = Atomics.sub(int32Array, 0, 10); // oldValue 是 42，int32Array[0] 现在是 32
console.log(oldValue); // 输出 42
console.log(int32Array[0]); // 输出 32

Atomics.and(typedArray, index, value): 原子地将typedArray指定索引的值和value进行按位与操作，并返回原来的值。

const sab = new SharedArrayBuffer(4);
const int32Array = new Int32Array(sab);
int32Array[0] = 42; // 00101010

const oldValue = Atomics.and(int32Array, 0, 15); // 15 是 00001111，结果是 00001010 = 10
console.log(oldValue); // 输出 42
console.log(int32Array[0]); // 输出 10

Atomics.or(typedArray, index, value): 原子地将typedArray指定索引的值和value进行按位或操作，并返回原来的值。

const sab = new SharedArrayBuffer(4);
const int32Array = new Int32Array(sab);
int32Array[0] = 42; // 00101010

const oldValue = Atomics.or(int32Array, 0, 15); // 15 是 00001111，结果是 00101111 = 47
console.log(oldValue); // 输出 42
console.log(int32Array[0]); // 输出 47

Atomics.xor(typedArray, index, value): 原子地将typedArray指定索引的值和value进行按位异或操作，并返回原来的值。

const sab = new SharedArrayBuffer(4);
const int32Array = new Int32Array(sab);
int32Array[0] = 42; // 00101010

const oldValue = Atomics.xor(int32Array, 0, 15); // 15 是 00001111，结果是 00100101 = 37
console.log(oldValue); // 输出 42
console.log(int32Array[0]); // 输出 37

Atomics.wait(typedArray, index, value, timeout): 原子地检查typedArray指定索引的值是否等于value。如果相等，则阻塞当前线程，直到另一个线程调用Atomics.wake()唤醒它，或者超时。返回值为 "ok", "not-equal", 或 "timed-out"。
Atomics.wake(typedArray, index, count): 唤醒等待在typedArray指定索引上的最多count个线程。

这些方法让你可以对SharedArrayBuffer进行各种原子操作，避免竞态条件。

五、用Atomics解决计数器问题

现在，我们用Atomics来解决前面提到的计数器问题：

// 线程A
const sab = new SharedArrayBuffer(4);
const int32Array = new Int32Array(sab);

function increment() {
  let oldValue;
  do {
    oldValue = Atomics.load(int32Array, 0);
  } while (Atomics.compareExchange(int32Array, 0, oldValue, oldValue + 1) !== oldValue);
}

// 线程B
const sab = new SharedArrayBuffer(4);
const int32Array = new Int32Array(sab);

function increment() {
  let oldValue;
  do {
    oldValue = Atomics.load(int32Array, 0);
  } while (Atomics.compareExchange(int32Array, 0, oldValue, oldValue + 1) !== oldValue);
}

//主线程
int32Array[0] = 0;
const worker1 = new Worker('worker.js');
const worker2 = new Worker('worker.js');

worker1.postMessage({ sab: sab, func: 'increment' });
worker2.postMessage({ sab: sab, func: 'increment' });

setTimeout(() => {
  console.log(int32Array[0]); // 输出 2
}, 100);

//worker.js
self.onmessage = function(event) {
  const sab = event.data.sab;
  const int32Array = new Int32Array(sab);
  const funcName = event.data.func;
  if (funcName === 'increment') {
    increment(int32Array);
  }
};

function increment(int32Array) {
  let oldValue;
  do {
    oldValue = Atomics.load(int32Array, 0);
  } while (Atomics.compareExchange(int32Array, 0, oldValue, oldValue + 1) !== oldValue);
}

在这个例子中，我们使用了Atomics.compareExchange方法。这个方法会原子地比较当前值和预期值，如果相等，则更新为新值。如果不相等，说明有其他线程修改了该值，我们就重试。

这个循环会一直执行，直到成功将计数器加1。这样就保证了计数器的原子性更新。

六、Atomics.wait() 和 Atomics.wake()：线程间的“暗号”

Atomics.wait() 和 Atomics.wake() 方法提供了一种线程间的同步机制。线程可以等待某个条件成立，然后被其他线程唤醒。

想象一下，你和你的小伙伴在玩捉迷藏。你藏起来了，然后告诉你的小伙伴：“我藏好了，你来找我吧！” 这就是 Atomics.wait()。当你的小伙伴找到你时，他会说：“我找到你了！” 这就是 Atomics.wake()。

我们来看一个例子：

const sab = new SharedArrayBuffer(4);
const int32Array = new Int32Array(sab);

// 线程A (等待)
function waiter() {
  console.log("Waiter: 等待 value 变为 1...");
  const result = Atomics.wait(int32Array, 0, 0, Infinity);
  console.log("Waiter: 被唤醒, result:", result, ", value:", int32Array[0]);
}

// 线程B (唤醒)
function signaler() {
  console.log("Signaler: 2秒后设置 value 为 1...");
  setTimeout(() => {
    Atomics.store(int32Array, 0, 1);
    Atomics.wake(int32Array, 0, 1); // 唤醒一个等待的线程
    console.log("Signaler: 已唤醒 waiter.");
  }, 2000);
}

//主线程启动
waiter();
signaler();

在这个例子中，线程A（waiter）会等待 int32Array[0] 的值变为 1。线程B（signaler）会在 2 秒后将 int32Array[0] 的值设置为 1，并唤醒一个等待的线程。

Atomics.wait() 和 Atomics.wake() 方法可以用于实现各种复杂的线程同步机制，例如生产者-消费者模式。

七、Atomics的限制与注意事项

虽然Atomics很强大，但也有一些限制和注意事项：

性能开销: 原子操作通常比非原子操作慢，因为它们需要额外的同步机制。因此，应该谨慎使用Atomics，只在必要的时候才使用。
类型限制: Atomics只能用于Int8Array, Uint8Array, Int16Array, Uint16Array, Int32Array, Uint32Array, BigInt64Array, 和 BigUint64Array 这些类型的TypedArray。
阻塞: Atomics.wait() 会阻塞当前线程。在主线程中使用 Atomics.wait() 会导致浏览器卡死。因此，Atomics.wait() 只能在 Web Worker 中使用。
内存对齐：Atomics 操作要求数据在内存中是对齐的。这意味着，如果你尝试对一个未对齐的内存地址进行原子操作，可能会导致错误或者性能下降。

八、总结：安全地玩转共享内存

Atomics是JavaScript并发编程的重要组成部分。它提供了一系列原子操作，可以确保在多线程环境中，对SharedArrayBuffer的读写操作是原子性的，避免竞态条件。

虽然Atomics有其限制和注意事项，但只要合理使用，就可以安全地玩转共享内存，构建高性能的并发应用程序。

特性	描述
原子性	保证操作的不可分割性，一个线程在执行原子操作时，其他线程无法干扰。
适用数据类型	只能用于 `Int8Array`, `Uint8Array`, `Int16Array`, `Uint16Array`, `Int32Array`, `Uint32Array`, `BigInt64Array`, 和 `BigUint64Array`。
线程同步	`Atomics.wait()` 和 `Atomics.wake()` 提供了一种线程间的同步机制，允许线程等待某个条件成立，然后被其他线程唤醒。
性能开销	原子操作通常比非原子操作慢，因为它们需要额外的同步机制。
使用场景	适用于需要多线程共享内存，并且需要保证数据一致性的场景，例如高性能计算、图像处理、游戏开发等。
注意事项	谨慎使用，只在必要的时候才使用。`Atomics.wait()` 只能在 Web Worker 中使用。确保数据在内存中是对齐的。

希望今天的讲解能帮助大家更好地理解和使用Atomics。感谢大家的聆听！下课!

发表回复 取消回复

发表回复取消回复