JavaScript SharedArrayBuffer 和 Atomics：实现线程安全的操作

JavaScript 传统上被认为是一种单线程语言，它通过 Web Workers 演进到支持并发。然而，真正的共享内存并发在历史上一直缺失，这限制了在浏览器内进行高性能并行计算的潜力。 随着 SharedArrayBuffer 和 Atomics 的引入，JavaScript 现在提供了用于管理共享内存和跨多个线程同步访问的机制，为对性能有要求的应用程序打开了新的可能性。

了解对共享内存和 Atomics 的需求

在深入研究具体细节之前，了解为什么共享内存和原子操作对于某些类型的应用程序至关重要至关重要。 想象一下一个在浏览器中运行的复杂图像处理应用程序。 如果没有共享内存，在 Web Workers 之间传递大型图像数据将成为一项昂贵的操作，涉及序列化和反序列化（复制整个数据结构）。 这种开销会严重影响性能。

共享内存允许 Web Workers 直接访问和修改相同的内存空间，从而无需复制数据。 但是，对共享内存的并发访问会带来竞争条件的风险——多个线程尝试同时读取或写入同一内存位置的情况，从而导致不可预测的、甚至可能不正确的结果。 这就是 Atomics 发挥作用的地方。

什么是 SharedArrayBuffer？

SharedArrayBuffer 是一个 JavaScript 对象，它表示原始的内存块，类似于 ArrayBuffer，但有一个关键的区别：它可以在不同的执行上下文（例如 Web Workers）之间共享。 这种共享是通过将 SharedArrayBuffer 对象传输到一个或多个 Web Workers 来实现的。 一旦共享，所有 worker 都可以直接访问和修改底层内存。

示例：创建和共享 SharedArrayBuffer

首先，在主线程中创建一个 SharedArrayBuffer：

const sharedBuffer = new SharedArrayBuffer(1024); // 1KB 缓冲区

然后，创建一个 Web Worker 并传输缓冲区：

const worker = new Worker('worker.js');
worker.postMessage(sharedBuffer);

在 worker.js 文件中，访问缓冲区：

self.onmessage = function(event) {
  const sharedBuffer = event.data; // 接收到的 SharedArrayBuffer
  const uint8Array = new Uint8Array(sharedBuffer); // 创建一个类型化数组视图
  // 现在您可以读取/写入 uint8Array，它会修改共享内存
  uint8Array[0] = 42; // 示例：写入第一个字节
};

重要注意事项：

• 类型化数组： 虽然 SharedArrayBuffer 代表原始内存，但您通常使用 类型化数组（例如 Uint8Array、Int32Array、Float64Array）与之交互。 类型化数组提供了底层内存的结构化视图，允许您读取和写入特定数据类型。
• 安全性： 共享内存会带来安全隐患。 确保您的代码正确验证从 Web Workers 接收的数据，并防止恶意行为者利用共享内存漏洞。 使用 Cross-Origin-Opener-Policy 和 Cross-Origin-Embedder-Policy 标头对于缓解 Spectre 和 Meltdown 漏洞至关重要。 这些标头将您的源与其他源隔离开来，防止它们访问您的进程的内存。

什么是 Atomics？

Atomics 是 JavaScript 中的一个静态类，它为在共享内存位置执行读-改-写操作提供了原子操作。 原子操作保证是不可分割的； 它们作为一个单一的、不可中断的步骤执行。 这确保了在操作进行时没有其他线程可以干扰该操作，从而防止了竞争条件。

关键原子操作：

• Atomics.load(typedArray, index)： 原子地从类型化数组中的指定索引读取一个值。
• Atomics.store(typedArray, index, value)： 原子地将一个值写入类型化数组中的指定索引。
• Atomics.compareExchange(typedArray, index, expectedValue, replacementValue)： 原子地将指定索引处的值与 expectedValue 进行比较。 如果它们相等，则将该值替换为 replacementValue。 返回索引处的原始值。
• Atomics.add(typedArray, index, value)： 原子地将 value 添加到指定索引处的值，并返回新值。
• Atomics.sub(typedArray, index, value)： 原子地从指定索引处的值中减去 value，并返回新值。
• Atomics.and(typedArray, index, value)： 原子地对指定索引处的值与 value 执行按位 AND 运算，并返回新值。
• Atomics.or(typedArray, index, value)： 原子地对指定索引处的值与 value 执行按位 OR 运算，并返回新值。
• Atomics.xor(typedArray, index, value)： 原子地对指定索引处的值与 value 执行按位 XOR 运算，并返回新值。
• Atomics.exchange(typedArray, index, value)： 原子地将指定索引处的值替换为 value，并返回旧值。
• Atomics.wait(typedArray, index, value, timeout)： 阻塞当前线程，直到指定索引处的值与 value 不同，或者直到超时。 这是等待/通知机制的一部分。
• Atomics.notify(typedArray, index, count)： 唤醒指定索引处等待的 count 个线程。

实际示例和用例

让我们探讨一些实际示例，以说明如何使用 SharedArrayBuffer 和 Atomics 来解决现实世界的问题：

1. 并行计算：图像处理

假设您需要在浏览器中将滤镜应用于大型图像。 您可以将图像分成块，并将每个块分配给不同的 Web Worker 进行处理。 使用 SharedArrayBuffer，整个图像可以存储在共享内存中，从而无需在 worker 之间复制图像数据。

实现草图：

1. 将图像数据加载到 SharedArrayBuffer 中。
2. 将图像分成矩形区域。
3. 创建 Web Workers 池。
4. 将每个区域分配给一个 worker 进行处理。 将该区域的坐标和尺寸传递给 worker。
5. 每个 worker 在共享的 SharedArrayBuffer 中将滤镜应用于其分配的区域。
6. 一旦所有 worker 完成，处理后的图像将在共享内存中可用。

使用 Atomics 进行同步：

为了确保主线程知道所有 worker 何时完成处理其区域，您可以使用原子计数器。 每个 worker 在完成其任务后，都会原子地递增计数器。 主线程会定期使用 Atomics.load 检查计数器。 当计数器达到预期值（等于区域数）时，主线程知道整个图像处理已完成。

// 在主线程中：
const numRegions = 4; // 示例：将图像分成 4 个区域
const completedRegions = new Int32Array(sharedBuffer, offset, 1); // 原子计数器
Atomics.store(completedRegions, 0, 0); // 将计数器初始化为 0

// 在每个 worker 中：
// ... 处理该区域 ...
Atomics.add(completedRegions, 0, 1); // 递增计数器

// 在主线程中（定期检查）：
let count = Atomics.load(completedRegions, 0);
if (count === numRegions) {
  // 所有区域都已处理
  console.log('图像处理完成！');
}

2. 并发数据结构：构建无锁队列

SharedArrayBuffer 和 Atomics 可用于实现无锁数据结构，例如队列。 无锁数据结构允许多个线程并发访问和修改数据结构，而无需传统锁的开销。

无锁队列的挑战：

• 竞争条件： 对队列的头指针和尾指针的并发访问可能导致竞争条件。
• 内存管理： 确保正确的内存管理，并在排队和出队元素时避免内存泄漏。

用于同步的原子操作：

原子操作用于确保原子地更新头指针和尾指针，从而防止竞争条件。 例如，可以使用 Atomics.compareExchange 来原子地更新尾指针，以便对元素进行排队。

3. 高性能数值计算

涉及密集数值计算的应用程序（例如科学模拟或金融建模）可以从使用 SharedArrayBuffer 和 Atomics 的并行处理中显着受益。 大型数值数据数组可以存储在共享内存中，并由多个 worker 并发处理。

常见陷阱和最佳实践

虽然 SharedArrayBuffer 和 Atomics 提供了强大的功能，但它们也引入了需要仔细考虑的复杂性。 以下是一些常见的陷阱和要遵循的最佳实践：

• 数据竞争： 始终使用原子操作来保护共享内存位置免受数据竞争。 仔细分析您的代码以识别潜在的竞争条件，并确保所有共享数据都得到正确同步。
• 假共享： 当多个线程访问同一缓存行中的不同内存位置时，就会发生假共享。 这可能会导致性能下降，因为缓存行会在线程之间不断失效和重新加载。 为了避免假共享，填充共享数据结构以确保每个线程访问其自己的缓存行。
• 内存排序： 了解原子操作提供的内存排序保证。 JavaScript 的内存模型相对宽松，因此您可能需要使用内存屏障（栅栏）来确保以所需的顺序执行操作。 但是，JavaScript 的 Atomics 已经提供了顺序一致的排序，这简化了对并发性的推理。
• 性能开销： 与非原子操作相比，原子操作可能会产生性能开销。 仅在保护共享数据时才谨慎使用它们。 考虑并发性和同步开销之间的权衡。
• 调试： 调试并发代码可能具有挑战性。 使用日志记录和调试工具来识别竞争条件和其他并发问题。 考虑使用专为并发编程设计的专用调试工具。
• 安全影响： 请注意在线程之间共享内存的安全影响。 适当地清理和验证所有输入，以防止恶意代码利用共享内存漏洞。 确保设置了正确的 Cross-Origin-Opener-Policy 和 Cross-Origin-Embedder-Policy 标头。
• 使用库： 考虑使用提供用于并发编程的更高级别抽象的现有库。 这些库可以帮助您避免常见的陷阱并简化并发应用程序的开发。 示例包括提供无锁数据结构或任务调度机制的库。

SharedArrayBuffer 和 Atomics 的替代方案

虽然 SharedArrayBuffer 和 Atomics 是强大的工具，但它们并非总是解决每个问题的最佳方案。 以下是一些需要考虑的替代方案：

• 消息传递： 使用 postMessage 在 Web Workers 之间发送数据。 这种方法避免了共享内存，并消除了竞争条件的风险。 但是，它涉及复制数据，对于大型数据结构而言可能效率低下。
• WebAssembly 线程： WebAssembly 支持线程和共享内存，为 SharedArrayBuffer 和 Atomics 提供了更底层的替代方案。 WebAssembly 允许您使用 C++ 或 Rust 等语言编写高性能并发代码。
• 卸载到服务器： 对于计算密集型任务，请考虑将工作卸载到服务器。 这可以释放浏览器的资源并改善用户体验。

浏览器支持和可用性

SharedArrayBuffer 和 Atomics 在现代浏览器中得到广泛支持，包括 Chrome、Firefox、Safari 和 Edge。 但是，务必检查浏览器兼容性表，以确保您的目标浏览器支持这些功能。 此外，出于安全原因，需要配置正确的 HTTP 标头 (COOP/COEP)。 如果缺少所需的标头，浏览器可能会禁用 SharedArrayBuffer。

结论

SharedArrayBuffer 和 Atomics 代表了 JavaScript 功能的重大进步，使开发人员能够构建以前不可能实现的高性能并发应用程序。 通过了解共享内存、原子操作以及并发编程的潜在陷阱，您可以利用这些功能来创建创新和高效的 Web 应用程序。 但是，在您的项目中采用 SharedArrayBuffer 和 Atomics 之前，请务必谨慎行事，优先考虑安全性并仔细考虑权衡。 随着 Web 平台不断发展，这些技术将在推动浏览器中可能实现的功能方面发挥越来越重要的作用。 在使用它们之前，请确保您已通过适当的 COOP/COEP 标头配置解决了它们可能引发的安全问题。