JavaScript内核与高级编程之：`JavaScript`的`SharedArrayBuffer`：其在 `Web Worker` 之间共享内存的底层实现。 - 智猿学院-前后端，数据库，人工智能，云计算等领域前沿技术讲座

各位观众老爷，大家好！我是你们的老朋友，今天咱们来聊聊 JavaScript 里一个挺有意思的东西—— SharedArrayBuffer。这玩意儿，说白了，就是让 JavaScript 在多线程环境下也能玩转共享内存的利器。

一、啥是 SharedArrayBuffer？（别被名字吓到，其实很简单）

话说，咱们平时写的 JavaScript 代码，都是在单线程里跑的。啥叫单线程？就是说，同一时间只能干一件事儿。就好比你一边吃饭一边刷手机，虽然看起来是同时进行的，但实际上你的大脑在不停地切换注意力，一会儿关注食物，一会儿关注手机。

但是，在 Web 应用里，有些事情特别耗时，比如处理复杂的图像、进行大量的计算等等。如果这些事情都放在主线程里做，就会导致页面卡顿，用户体验极差。

这时候，Web Worker 就派上用场了。Web Worker 允许我们在浏览器里创建独立的线程，让这些线程去执行耗时的任务，而不会阻塞主线程。

但是，问题来了！Web Worker 和主线程之间是隔离的，它们之间不能直接共享数据。之前，它们只能通过 postMessage 来传递数据，这种方式效率比较低，就像邮递员送信一样，速度慢，而且每次都要复制一份数据。

SharedArrayBuffer 的出现，就解决了这个问题。它可以让主线程和 Web Worker 之间共享一块内存区域。这样，它们就可以直接读写这块内存，而不需要通过消息传递了。

简单来说，SharedArrayBuffer 就是一块公共的黑板，主线程和 Web Worker 都可以往上面写字、擦字。

二、SharedArrayBuffer 怎么用？（代码伺候！）

创建 SharedArrayBuffer

首先，咱们得先创建一个 SharedArrayBuffer 对象。这个对象代表一块共享内存区域。

const buffer = new SharedArrayBuffer(1024); // 创建一个 1024 字节的共享内存

这行代码就像在银行开户，申请了一块 1024 字节大小的存储空间。

创建视图

有了共享内存，咱们还得创建一个视图，才能读写这块内存。视图就像一个望远镜，你可以通过它来观察共享内存里的数据。JavaScript 提供了多种视图类型，比如 Int8Array、Uint32Array、Float64Array 等等，可以根据需要选择合适的类型。

const view = new Int32Array(buffer); // 创建一个 Int32Array 视图

这行代码相当于给你的银行账户配了一张银行卡，你可以通过这张卡来存取钱。

在 Web Worker 中使用 SharedArrayBuffer

接下来，咱们创建一个 Web Worker，并在其中使用 SharedArrayBuffer。

main.js (主线程)

const worker = new Worker('worker.js');
const buffer = new SharedArrayBuffer(1024);
const view = new Int32Array(buffer);

view[0] = 123; // 在共享内存中写入数据

worker.postMessage(buffer); // 将 SharedArrayBuffer 传递给 Web Worker

worker.onmessage = function(event) {
  console.log('主线程收到消息：', event.data);
  console.log('共享内存中的值：', view[0]);
};

worker.js (Web Worker)

onmessage = function(event) {
  const buffer = event.data;
  const view = new Int32Array(buffer);

  console.log('Web Worker 收到 SharedArrayBuffer');
  console.log('共享内存中的初始值：', view[0]);

  view[0] = 456; // 在共享内存中写入数据

  postMessage('Web Worker 已修改共享内存');
};

运行这段代码，你会看到：

主线程将 SharedArrayBuffer 传递给 Web Worker。
Web Worker 读取 SharedArrayBuffer 中的初始值，并将其修改为 456。
主线程收到 Web Worker 的消息，并读取 SharedArrayBuffer 中的值，发现已经被修改为 456。

三、Atomics：线程安全的守护神

SharedArrayBuffer 虽然好用，但也带来了一个新的问题：并发访问。如果多个线程同时读写同一块内存，就可能会出现数据竞争，导致程序出错。

举个例子，假设有两个线程，线程 A 要将 view[0] 的值加 1，线程 B 也要将 view[0] 的值加 1。如果它们同时执行，可能会出现以下情况：

线程 A 读取 view[0] 的值（假设是 10）。
线程 B 读取 view[0] 的值（也是 10）。
线程 A 将 view[0] 的值加 1，并写回内存（view[0] 变为 11）。
线程 B 将 view[0] 的值加 1，并写回内存（view[0] 也变为 11）。

最终，view[0] 的值变成了 11，而不是我们期望的 12。

为了解决这个问题，JavaScript 引入了 Atomics 对象。Atomics 对象提供了一组原子操作，可以确保在多线程环境下对共享内存的访问是安全的。

常用的 Atomics 方法包括：

方法	描述
`load(typedArray, index)`	原子地读取 `typedArray` 中指定索引位置的值。
`store(typedArray, index, value)`	原子地将 `value` 写入 `typedArray` 中指定索引位置。
`add(typedArray, index, value)`	原子地将 `value` 加到 `typedArray` 中指定索引位置的值，并返回修改前的值。
`sub(typedArray, index, value)`	原子地将 `value` 从 `typedArray` 中指定索引位置的值减去，并返回修改前的值。
`compareExchange(typedArray, index, expectedValue, replacementValue)`	原子地比较 `typedArray` 中指定索引位置的值与 `expectedValue`，如果相等，则将该位置的值替换为 `replacementValue`，并返回原始值。
`exchange(typedArray, index, value)`	原子地将 `typedArray` 中指定索引位置的值替换为 `value`，并返回原始值。
`wait(typedArray, index, value, timeout)`	原子地检查 `typedArray` 中指定索引位置的值是否等于 `value`。如果相等，则使当前线程休眠，直到另一个线程调用 `wake()` 或 `wakeAll()` 方法唤醒它，或者超时。
`wake(typedArray, index, count)`	唤醒等待在 `typedArray` 中指定索引位置的最多 `count` 个线程。
`wakeAll(typedArray)`	唤醒所有等待在 `typedArray` 中的线程。
`or(typedArray, index, value)`	原子地对 `typedArray` 中指定索引位置的值进行按位或操作，并返回修改前的值。
`and(typedArray, index, value)`	原子地对 `typedArray` 中指定索引位置的值进行按位与操作，并返回修改前的值。
`xor(typedArray, index, value)`	原子地对 `typedArray` 中指定索引位置的值进行按位异或操作，并返回修改前的值。

使用 Atomics 对象，我们可以安全地实现线程 A 和线程 B 的加 1 操作：

// 线程 A
Atomics.add(view, 0, 1);

// 线程 B
Atomics.add(view, 0, 1);

这样，无论线程 A 和线程 B 如何并发执行，view[0] 的值最终都会变成 12。

四、Atomics.wait 和 Atomics.wake：线程间的信号灯

除了原子操作，Atomics 对象还提供了 wait 和 wake 方法，用于实现线程间的同步。

Atomics.wait 方法可以让一个线程进入休眠状态，直到另一个线程调用 Atomics.wake 方法唤醒它。这就像一个信号灯，线程可以在等待某个条件满足时进入休眠状态，直到另一个线程发出信号，通知它可以继续执行。

// 线程 A
console.log("线程 A: 等待 view[0] 变为 10");
Atomics.wait(view, 0, 0); // 如果 view[0] 的值不等于 0，则线程 A 进入休眠状态
console.log("线程 A: view[0] 已经变为 10，继续执行");

// 线程 B
console.log("线程 B: 修改 view[0] 的值为 10");
Atomics.store(view, 0, 10);
Atomics.wake(view, 0, 1); // 唤醒等待在 view[0] 上的一个线程
console.log("线程 B: 已唤醒线程 A");

运行这段代码，你会看到：

线程 A 首先输出 "线程 A: 等待 view[0] 变为 10"，然后进入休眠状态。
线程 B 输出 "线程 B: 修改 view[0] 的值为 10"，然后修改 view[0] 的值为 10，并唤醒等待在 view[0] 上的一个线程（线程 A）。
线程 A 被唤醒，输出 "线程 A: view[0] 已经变为 10，继续执行"。

五、SharedArrayBuffer 的应用场景

SharedArrayBuffer 在 Web 应用中有很多应用场景，例如：

图像处理： 可以让 Web Worker 并行处理图像的不同部分，提高图像处理的速度。
物理引擎： 可以让 Web Worker 模拟复杂的物理场景，提高物理引擎的性能。
音频处理： 可以让 Web Worker 并行处理音频数据，提高音频处理的速度。
加密解密： 可以让 Web Worker 执行加密解密操作，保护用户数据的安全。
游戏开发： 可以让 Web Worker 处理游戏逻辑，提高游戏的流畅度。

六、SharedArrayBuffer 的安全性问题

SharedArrayBuffer 虽然强大，但也存在一些安全性问题。由于它可以让不同的线程共享内存，因此可能会被恶意代码利用，进行跨域攻击。

为了解决这个问题，浏览器引入了以下安全机制：

跨域隔离： 只有在启用了跨域隔离的情况下，才能使用 SharedArrayBuffer。跨域隔离可以通过设置 Cross-Origin-Opener-Policy 和 Cross-Origin-Embedder-Policy HTTP 响应头来实现。
Spectre 漏洞缓解： 浏览器会采取一些措施来缓解 Spectre 漏洞，防止恶意代码利用 SharedArrayBuffer 泄露敏感信息。

七、总结

SharedArrayBuffer 是 JavaScript 中一个强大的工具，可以让我们在多线程环境下共享内存，提高 Web 应用的性能。但是，在使用 SharedArrayBuffer 时，也要注意安全性问题，确保我们的代码是安全的。

总的来说，SharedArrayBuffer 就像一把双刃剑，用好了可以提升性能，用不好可能会伤到自己。

八、补充：一个小小的例子

下面是一个简单的例子，演示了如何使用 SharedArrayBuffer 和 Atomics 来实现一个简单的计数器：

main.js (主线程)

const worker = new Worker('worker.js');
const buffer = new SharedArrayBuffer(4); // 4 字节，用于存储一个整数
const view = new Int32Array(buffer);

worker.postMessage(buffer);

setInterval(() => {
  console.log('主线程读取计数器：', Atomics.load(view, 0));
}, 1000);

worker.js (Web Worker)

onmessage = function(event) {
  const buffer = event.data;
  const view = new Int32Array(buffer);

  setInterval(() => {
    Atomics.add(view, 0, 1); // 原子地将计数器加 1
  }, 100);
};

运行这段代码，你会看到主线程每隔 1 秒钟读取一次计数器的值，而 Web Worker 每隔 0.1 秒钟将计数器加 1。由于使用了 Atomics.add 方法，因此计数器的值始终是正确的，不会出现数据竞争的问题。

好了，今天的讲座就到这里。希望大家能够对 SharedArrayBuffer 有更深入的了解。记住，技术是工具，关键在于如何使用它。祝大家编程愉快！

发表回复 取消回复

发表回复取消回复