在以前的 JavaScript 版本中，由于没有多线程支持，JavaScript 开发者通常必须使用 web worker 模拟多线程应用程序的执行。但是，这种方法并不能处理大量数据并行执行的情况，而且这种模拟多线程的做法会导致更多的复杂性和性能问题。ES12 中的新特性（SharedArrayBuffer 和 Atomics）解决了这个问题，并且将 JavaScript 多线程支持提升到了一个新的水平。
SharedArrayBuffer
SharedArrayBuffer 实现了一种新的 JavaScript 对象类型，该类型表示一个用于多个线程共享的二进制数据缓冲区。它的特点是性能高，数据通信快，而且可以减少内存使用。多个线程可以同时读写这个缓存区，这是一个真正的多线程应用程序需要的。
以下是用 SharedArrayBuffer 创建的一个数组的示例：
-- -------------------- ---- ------- -- ---- ----------------- -- ----- ------ - --- ---------------------- -- ----------- ---------- ----- ----- - --- ------------------- ----- ----- - --- ----------------- --- -------- - --- -------- - -- ---------------------- -- -- ---------------------- -- -
在上面的示例中，我们创建了一个大小为 16 字节的缓冲区，然后使用两个不同类型的 TypedArray（Int32Array 和 Int8Array）来操作它。我们可以在不同的线程上使用这些 TypedArray。
Atomics
Atomics 是一个新的全局标准对象，它包含了一些用于原子操作的静态方法（Atomic Methods）。这些方法提供了一些常用的原子操作，例如更新缓存区的值、比较和交换缓存区的值、增加和减少缓存区的值等。Atomics 对象让我们在多线程应用程序中使用锁操作，从而避免了锁操作的竞争。
以下是使用 Atomics 对象的一个简单示例，我们实现的是一个原子计数器：
const buffer = new SharedArrayBuffer(4); const counter = new Int32Array(buffer); // 增加计数器 Atomics.add(counter, 0, 1); // 获取计数器值 console.log(Atomics.load(counter, 0));
在上面的示例中，我们创建了一个计数器，然后使用 Atomics 对象的 add 方法将计数器增加了 1。我们使用 Atomics 对象的 load 方法获取计数器当前的值。
性能提升
SharedArrayBuffer 和 Atomics 的引入，使得 JavaScript 可以更好地支持多线程程序，这对于一些需要编写高效的数据密集型应用程序（如图形渲染和机器学习）来说尤其重要。
需要注意的是，使用 SharedArrayBuffer 和 Atomics 时需要遵守一些规则，例如不允许直接访问 SharedArrayBuffer 数据缓冲区，只允许使用 TypedArray 来访问缓冲区。此外，一些浏览器可能不支持 SharedArrayBuffer 和 Atomics，需要在实际应用程序中进行检测和判断。
结论
在本文中，我们深入了解了 ES12 中的 SharedArrayBuffer 和 Atomics，它们的引入解决了 JavaScript 多线程执行的问题。我们示范了如何使用 SharedArrayBuffer 和 Atomics 创建原子操作和计数器，并在最后强调了使用这些新特性时需要遵循的规则。使用这些新特性可以提高多线程程序的性能和效率，让 JavaScript 开发者在应对数据密集型应用程序时更加得心应手。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6704d31cd91dce0dc8505ac2