JS `SharedArrayBuffer` 与 `Atomics`：多线程共享内存与原子操作

大家好，我是你们今天的“并发问题终结者”——阿汤哥。今天咱们来聊聊JavaScript里听起来有点吓人，但其实没那么难的SharedArrayBuffer和Atomics。保证让各位听完之后，也能像我一样，对着并发问题嘿嘿一笑，轻松搞定！

开场白：单线程的无奈与多线程的诱惑

JavaScript一直以来都被认为是单线程语言。啥意思？简单说，就是你让它同时做两件事，它其实是左顾右盼，快速切换着做，看起来像同时，但本质上还是排队进行。

这样做的好处是简单，避免了多线程带来的各种复杂问题，比如数据竞争、死锁等等。但是，随着Web应用越来越复杂，单线程的瓶颈也日益凸显。想象一下，你用JS处理一个巨大的图像，浏览器卡成PPT，用户只能干瞪眼，是不是很尴尬？

于是，英雄（们）出现了！SharedArrayBuffer和Atomics的引入，让JavaScript也能玩转多线程，开启了并发编程的新纪元。

第一幕：SharedArrayBuffer——共享内存的钥匙

SharedArrayBuffer，顾名思义，就是一个可以在多个线程（通常是通过Web Workers创建的）之间共享的内存区域。你可以把它想象成一个公共的黑板，每个线程都可以读取和修改黑板上的内容。

代码示例：创建并共享SharedArrayBuffer

// 主线程 (main.js)
const buffer = new SharedArrayBuffer(1024); // 创建一个1KB的共享内存区域
const worker = new Worker('worker.js'); // 创建一个Web Worker

worker.postMessage({ buffer: buffer }); // 将SharedArrayBuffer传递给Worker

// Worker线程 (worker.js)
self.addEventListener('message', (event) => {
  const buffer = event.data.buffer; // 接收SharedArrayBuffer
  const array = new Int32Array(buffer); // 创建一个Int32Array视图，方便操作

  // 在共享内存中写入一些数据
  array[0] = 42;
  array[1] = 100;
  console.log('Worker: 写入数据完成');
});

在这个例子中，主线程创建了一个SharedArrayBuffer，然后通过postMessage将其传递给Worker线程。Worker线程接收到SharedArrayBuffer后，创建了一个Int32Array视图。

什么是Array视图？

SharedArrayBuffer本身只是一块原始的内存区域，我们需要使用Array视图来解释这块内存，并方便地读写数据。常见的Array视图包括：

Array视图类型	描述	字节大小
Int8Array	8位有符号整数数组	1
Uint8Array	8位无符号整数数组	1
Int16Array	16位有符号整数数组	2
Uint16Array	16位无符号整数数组	2
Int32Array	32位有符号整数数组	4
Uint32Array	32位无符号整数数组	4
Float32Array	32位浮点数数组	4
Float64Array	64位浮点数数组	8
BigInt64Array	64位有符号大整数数组 (ES2020)	8
BigUint64Array	64位无符号大整数数组 (ES2020)	8

第二幕：数据竞争的幽灵

有了共享内存，多个线程就可以同时访问和修改同一块数据。问题来了，如果两个线程同时修改array[0]，会发生什么？这就是著名的“数据竞争”。

// 线程A
array[0] = 42;

// 线程B
array[0] = 100;

结果是未知的！array[0]的值可能是42，也可能是100，甚至可能是其他奇怪的值。这种不确定性在并发编程中是大忌，会导致程序出现难以调试的Bug。

第三幕：Atomics——原子操作的守护神

为了解决数据竞争问题，Atomics对象应运而生。Atomics提供了一组原子操作，可以确保对共享内存的读写操作是原子性的。

什么是原子性？

原子性是指一个操作不可分割，要么全部执行，要么完全不执行。在多线程环境下，原子操作可以防止多个线程同时修改同一块数据，从而避免数据竞争。

Atomics常用方法：

方法	描述
`Atomics.load()`	原子性地读取共享内存中的值。
`Atomics.store()`	原子性地写入值到共享内存。
`Atomics.add()`	原子性地将指定值添加到共享内存中的值。
`Atomics.sub()`	原子性地从共享内存中的值减去指定值。
`Atomics.exchange()`	原子性地将共享内存中的值替换为指定值，并返回原始值。
`Atomics.compareExchange()`	原子性地比较共享内存中的值与预期值，如果相等，则替换为指定值，并返回原始值。否则，不进行任何操作，并返回原始值。
`Atomics.wait()`	使当前线程进入休眠状态，直到共享内存中的值发生变化。
`Atomics.notify()`	唤醒等待共享内存值变化的线程。

代码示例：使用Atomics避免数据竞争

// Worker线程 (worker.js)
self.addEventListener('message', (event) => {
  const buffer = event.data.buffer;
  const array = new Int32Array(buffer);

  // 原子性地增加array[0]的值
  Atomics.add(array, 0, 1);

  console.log('Worker: array[0] =', array[0]);
});

// 主线程 (main.js)
const buffer = new SharedArrayBuffer(1024);
const array = new Int32Array(buffer);
array[0] = 0; // 初始化array[0]

const worker1 = new Worker('worker.js');
const worker2 = new Worker('worker.js');

worker1.postMessage({ buffer: buffer });
worker2.postMessage({ buffer: buffer });

// 预期结果：array[0]最终的值是2

在这个例子中，我们使用Atomics.add()原子性地增加array[0]的值。即使两个Worker线程同时执行Atomics.add()，也不会发生数据竞争，array[0]最终的值一定是2。

第四幕：锁与等待/唤醒机制

Atomics还提供了一些更高级的操作，比如Atomics.wait()和Atomics.notify()，可以用来实现锁和等待/唤醒机制。

什么是锁？

锁是一种同步机制，用于保护共享资源，防止多个线程同时访问。只有获得锁的线程才能访问共享资源，其他线程必须等待锁被释放。

什么是等待/唤醒机制？

等待/唤醒机制是一种线程间通信机制，一个线程可以等待某个条件成立，另一个线程可以在条件成立时唤醒等待的线程。

代码示例：使用Atomics实现简单的锁

// lock.js (同时用于主线程和Worker线程)
const LOCK_FREE = 0;
const LOCK_LOCKED = 1;

function createLock(buffer, index) {
  const array = new Int32Array(buffer);

  return {
    lock: () => {
      while (Atomics.compareExchange(array, index, LOCK_FREE, LOCK_LOCKED) !== LOCK_FREE) {
        Atomics.wait(array, index, LOCK_LOCKED);
      }
    },
    unlock: () => {
      Atomics.store(array, index, LOCK_FREE);
      Atomics.notify(array, index, 1); // 唤醒一个等待的线程
    }
  };
}

// 使用示例
// 主线程 (main.js)
const buffer = new SharedArrayBuffer(4); // 只需要一个整数的空间来表示锁
const lock = createLock(buffer, 0);

const worker = new Worker('worker.js');
worker.postMessage({ buffer: buffer });

lock.lock();
console.log('Main thread: 获得锁');
// 模拟一些需要保护的操作
setTimeout(() => {
  console.log('Main thread: 释放锁');
  lock.unlock();
}, 2000);

// Worker线程 (worker.js)
self.addEventListener('message', (event) => {
  const buffer = event.data.buffer;
  const lock = createLock(buffer, 0);

  lock.lock();
  console.log('Worker thread: 获得锁');
  // 模拟一些需要保护的操作
  setTimeout(() => {
    console.log('Worker thread: 释放锁');
    lock.unlock();
  }, 1000);
});

在这个例子中，我们使用Atomics.compareExchange()和Atomics.wait()/Atomics.notify()实现了一个简单的锁。主线程和Worker线程都尝试获取锁，只有一个线程能够成功，另一个线程必须等待锁被释放。

第五幕：注意事项与最佳实践

安全性： SharedArrayBuffer在设计之初就考虑到了安全性问题。为了防止恶意代码利用SharedArrayBuffer进行攻击，浏览器需要启用一些安全策略，比如跨域隔离。
性能： 虽然SharedArrayBuffer可以提高程序的性能，但是也需要注意避免过度使用。频繁的线程切换和同步操作会带来额外的开销。
调试： 多线程程序的调试比单线程程序要复杂得多。建议使用Chrome DevTools等工具进行调试，并充分利用日志和断点。
兼容性： SharedArrayBuffer和Atomics的兼容性在不断提高，但仍然需要注意目标浏览器的支持情况。

总结：并发编程的未来

SharedArrayBuffer和Atomics为JavaScript带来了并发编程的可能性，开启了Web应用的新时代。虽然并发编程有一定的难度，但是只要掌握了基本概念和技巧，就可以充分利用多核CPU的优势，提高程序的性能和响应速度。

最后，送给大家一句并发编程箴言：

“多线程一时爽，Debug火葬场。Atomics用得好，Bug绕道跑！”

希望今天的讲座对大家有所帮助。记住，并发编程不是洪水猛兽，只要我们掌握了正确的方法，就能驯服它，让它为我们所用！

现在，大家有什么问题吗？

发表回复 取消回复

发表回复取消回复