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

各位老铁，大家好！今天咱们来聊聊 JavaScript 里一个挺硬核的玩意儿：SharedArrayBuffer 和 Atomics。这俩家伙组合起来，能让 JS 玩转多线程共享内存，听起来是不是有点刺激？

一、单线程的烦恼：JS 的前世今生

话说当年 JS 出生的时候，就没打算搞什么多线程。为啥？因为浏览器环境太复杂了，多线程容易把事情搞砸，各种死锁、竞争条件，想想都头大。所以，JS 选择了单线程这条路，简单省事。

但是，单线程也有单线程的烦恼。如果你的 JS 代码里有个耗时的操作，比如计算 Pi 的小数点后 10000 位，那整个浏览器界面就卡死了，用户体验极差。

二、Web Workers：曲线救国，多线程初探

为了解决这个问题，Web Workers 横空出世。Web Workers 允许你在浏览器里创建独立的线程，执行 JS 代码，而且不会阻塞主线程。

Web Workers 和主线程之间的通信，是通过消息传递机制实现的。简单来说，就是你发一个消息给 Worker，Worker 执行完任务，再发个消息给主线程。

// 主线程
const worker = new Worker('worker.js');

worker.postMessage('开始计算 Pi');

worker.onmessage = (event) => {
  console.log('计算结果：', event.data);
};

// worker.js
onmessage = (event) => {
  console.log('收到消息：', event.data);
  const pi = calculatePi(); // 假设这是一个耗时的计算函数
  postMessage(pi);
};

function calculatePi() {
  // ... 耗时的计算逻辑
  return 3.14159265358979323846;
}

Web Workers 虽然解决了主线程阻塞的问题，但是通信方式比较麻烦，需要进行消息序列化和反序列化，效率不高。而且，Web Workers 之间的内存是独立的，不能直接共享数据，这就限制了 Web Workers 的应用场景。

三、SharedArrayBuffer：共享内存，天下大同

为了让 Web Workers 之间能够更高效地共享数据，ECMAScript 引入了 SharedArrayBuffer。SharedArrayBuffer 允许你在多个线程之间共享同一块内存区域。

// 创建一个 1KB 的共享内存区域
const buffer = new SharedArrayBuffer(1024);

// 创建一个 Int32Array 视图，方便操作共享内存
const intArray = new Int32Array(buffer);

// 在主线程中设置共享内存的值
intArray[0] = 42;

// 创建一个 Worker
const worker = new Worker('worker.js');

worker.postMessage(buffer);

// worker.js
onmessage = (event) => {
  const buffer = event.data;
  const intArray = new Int32Array(buffer);
  console.log('Worker 线程读取到的值：', intArray[0]); // 输出 42
};

上面的代码演示了如何在主线程和 Worker 线程之间共享一个 SharedArrayBuffer。主线程修改了 intArray[0] 的值，Worker 线程也能读取到这个值。

四、Atomics：原子操作，避免数据混乱

有了共享内存，多个线程可以同时读写同一块内存区域。但是，如果多个线程同时修改同一个值，就会出现数据竞争，导致数据混乱。

为了解决这个问题，ECMAScript 引入了 Atomics 对象。Atomics 提供了一组原子操作，可以保证在多线程环境下，对共享内存的读写操作是原子性的，不会被中断。

// 创建一个 1KB 的共享内存区域
const buffer = new SharedArrayBuffer(1024);

// 创建一个 Int32Array 视图，方便操作共享内存
const intArray = new Int32Array(buffer);

// 初始化共享内存的值
Atomics.store(intArray, 0, 0);

// 创建两个 Worker
const worker1 = new Worker('worker1.js');
const worker2 = new Worker('worker2.js');

worker1.postMessage(buffer);
worker2.postMessage(buffer);

// worker1.js
onmessage = (event) => {
  const buffer = event.data;
  const intArray = new Int32Array(buffer);

  for (let i = 0; i < 100000; i++) {
    Atomics.add(intArray, 0, 1); // 原子性地增加 intArray[0] 的值
  }

  postMessage('worker1 完成');
};

// worker2.js
onmessage = (event) => {
  const buffer = event.data;
  const intArray = new Int32Array(buffer);

  for (let i = 0; i < 100000; i++) {
    Atomics.add(intArray, 0, 1); // 原子性地增加 intArray[0] 的值
  }

  postMessage('worker2 完成');
};

// 主线程等待两个 Worker 完成
Promise.all([
  new Promise((resolve) => {
    worker1.onmessage = () => resolve();
  }),
  new Promise((resolve) => {
    worker2.onmessage = () => resolve();
  }),
]).then(() => {
  console.log('最终结果：', Atomics.load(intArray, 0)); // 输出 200000
});

上面的代码创建了两个 Worker 线程，每个线程都对共享内存中的 intArray[0] 进行 100000 次加 1 操作。由于使用了 Atomics.add 原子操作，最终的结果一定是 200000，不会出现数据竞争的情况。

五、Atomics 的常用方法：十八般武艺样样精通

Atomics 对象提供了很多原子操作方法，可以满足不同的需求。下面列出一些常用的方法：

方法	描述
`Atomics.load()`	原子性地读取共享内存中的值。
`Atomics.store()`	原子性地将一个值写入共享内存。
`Atomics.add()`	原子性地将一个值加到共享内存中的值上。
`Atomics.sub()`	原子性地从共享内存中的值中减去一个值。
`Atomics.and()`	原子性地对共享内存中的值进行按位与操作。
`Atomics.or()`	原子性地对共享内存中的值进行按位或操作。
`Atomics.xor()`	原子性地对共享内存中的值进行按位异或操作。
`Atomics.exchange()`	原子性地将共享内存中的值替换为一个新值，并返回旧值。
`Atomics.compareExchange()`	原子性地比较共享内存中的值和一个预期值，如果相等，则将共享内存中的值替换为一个新值，并返回旧值。
`Atomics.wait()`	原子性地检查共享内存中的值是否等于一个预期值，如果相等，则阻塞当前线程，直到共享内存中的值被修改为止。
`Atomics.notify()`	唤醒等待在共享内存上的线程。

六、实际应用场景：脑洞大开，无所不能

SharedArrayBuffer 和 Atomics 的应用场景非常广泛，只要涉及到多线程共享数据的场景，都可以考虑使用它们。

图像处理： 可以将一张图片分割成多个小块，让多个 Worker 线程同时处理，提高处理速度。
音视频处理： 可以将一段音视频数据分割成多个片段，让多个 Worker 线程同时编码或解码，提高处理效率。
科学计算： 可以将一个复杂的计算任务分解成多个子任务，让多个 Worker 线程同时计算，提高计算速度。
游戏开发： 可以将游戏中的物理引擎、AI 逻辑等放到 Worker 线程中执行，提高游戏的流畅度。
并行排序： 快速排序，归并排序都可以并行化
数据分析： 大量数据并行计算

七、安全问题：潘多拉的魔盒

SharedArrayBuffer 是一把双刃剑，它在提高性能的同时，也带来了安全风险。

Spectre 和 Meltdown 漏洞： 这两个漏洞利用了 CPU 的推测执行特性，可以读取到其他进程的内存数据。SharedArrayBuffer 使得攻击者更容易利用这两个漏洞，因为攻击者可以通过 SharedArrayBuffer 将恶意代码注入到其他进程的内存中。
侧信道攻击： 攻击者可以通过测量程序执行的时间、功耗等信息，来推断出程序的内部状态。SharedArrayBuffer 使得攻击者更容易进行侧信道攻击，因为攻击者可以通过 SharedArrayBuffer 共享数据，并测量其他线程的操作时间。

为了缓解这些安全风险，浏览器厂商采取了一些措施：

Site Isolation： 将不同的网站放在不同的进程中运行，防止跨站攻击。
COOP/COEP： 通过设置 HTTP 头部，限制跨域资源的访问，防止跨站攻击。
禁用高精度计时器： 降低计时器的精度，防止侧信道攻击。

八、注意事项：小心驶得万年船

在使用 SharedArrayBuffer 和 Atomics 时，需要注意以下几点：

必须使用 HTTPS： 为了防止中间人攻击，SharedArrayBuffer 只能在 HTTPS 环境下使用。
需要设置 COOP 和 COEP 头部： 为了防止跨站攻击，需要设置 Cross-Origin-Opener-Policy 和 Cross-Origin-Embedder-Policy 头部。
避免死锁和竞争条件： 在多线程环境下，需要特别注意死锁和竞争条件，可以使用锁、信号量等同步机制来避免这些问题。
谨慎使用 Atomics.wait()： Atomics.wait() 会阻塞当前线程，如果使用不当，可能会导致性能问题。

九、总结：拥抱未来，迎接挑战

SharedArrayBuffer 和 Atomics 是 JavaScript 中非常重要的特性，它们使得 JS 能够更好地利用多核 CPU 的性能，实现更复杂的应用。虽然 SharedArrayBuffer 带来了一些安全风险，但是通过浏览器厂商和开发者的共同努力，这些风险是可以被控制的。

希望今天的讲座能帮助大家更好地理解 SharedArrayBuffer 和 Atomics，并在实际项目中灵活运用它们。记住，技术是工具，用对了就能事半功倍！

就这样，祝大家编码愉快！

发表回复 取消回复

发表回复取消回复