ES8 中新增的 SharedArrayBuffer 和 Atomics
在前端领域，JavaScript 扮演着越来越重要的角色。在 ES8 中，新增加了 SharedArrayBuffer 和 Atomics 函数，其中 SharedArrayBuffer 用于在多个线程之间共享数据，而 Atomics 则提供了一种安全的方式来操作这些共享的数据。这两个功能一起构成了 JavaScript 并发编程的基础。本文将详细讲解它们的原理，并提供一些示例代码，帮助读者更好地理解和运用这些特性。
SharedArrayBuffer
在 JavaScript 中，由于浏览器环境和 Node.js 环境都只支持单线程操作，这就导致了一些问题。例如，当我们需要在浏览器中进行非阻塞的网络请求时，我们需要使用回调函数或 Promise 来实现异步操作。但是，这种方式有时候会导致回调地狱，增加代码的复杂度和难度。
另一种解决并发编程问题的方式是使用 Web Worker。Web Worker 可以让我们在后台创建一个线程，用于执行一些计算密集型的任务。但是，由于数据不能被共享，我们需要通过复杂的消息传递机制来传递数据。
这正是 SharedArrayBuffer 的作用所在。这个特性为多个线程提供了共享内存的能力，从而使线程之间的通信变得更加简单和高效。具体的使用方式如下：
-- -------------------- ---- ------- -- ----- ------ ------ - ---- ------ ----- ------ - --- --------------------- -- ------- ------ -- --- --------------------- - --- -- ---- ------ --- ------ -- ----- ------ - --- -------------------- ---------------------------
我们可以看出，与普通的 ArrayBuffer 一样，我们可以通过新建一个 Int32Array 实例来访问这个缓冲区（buffer）。但与普通的 ArrayBuffer 不同的是，我们在新建缓冲区时调用的是 SharedArrayBuffer 的构造函数，而不是普通的 ArrayBuffer，这表明缓冲区可以被多个线程访问和修改。
Atomics
虽然 SharedArrayBuffer 为我们提供了共享内存的能力，但我们有时候需要使用一个更加安全和可预测的方式来实现并发编程。这正是 Atomics 函数出现的原因。这个对象提供了一些原子操作，包括读写缓冲区、增减、交换等方法，可以保证操作的原子性，避免了竞争条件（race condition）的出现。
例如，可以使用以下代码安全地增加一个缓冲区中的元素值：
const buffer = new SharedArrayBuffer(4); const view = new Int32Array(buffer); Atomics.add(view, 0, 1);
在这里，我们使用了 Atomics.add() 函数来增加缓冲区中的第一个元素的值。如果有多个线程同时调用这个函数，那么该操作的执行顺序是不可预测的。然而，由于这个函数的原子性，最终值是可预测的。
除了add函数，Atomics 还提供了其他一些函数，包括：
load：读取缓冲区中指定位置的元素值；store：将指定值存储到缓冲区的指定位置；exchange：将缓冲区中指定位置的元素值更改为指定的新值，并返回该位置原来的值；compareExchange：当缓冲区中指定位置的元素值符合给定的期望值时，将该值更改为指定的新值，并返回更改前的值。
这些函数可以很好地保证并发编程时的安全性。
示例
让我们看一个更加复杂的示例。该程序使用五个 Worker 来执行数值计算。每个 Worker 读取缓冲区中的一个元素的值，进行一些计算，然后将结果写回到另一个缓冲区中的相应位置。
-- -------------------- ---- -------
----- ----------- - --
----- ------- - --- ----------------------------- - ---
----- ------- - --- ----------------------------- - ---
----- ------ - ---
----- ------ - ---
----- ------- - ---
-- ---------------
--- ---- - - -- - - ------------ ---- -
--------------- ------------------- - - -- ----
--------------- ------------------- - - -- ----
-- - ------- ---- - - -----------
------------ - --
-
-- ---- ------
--- ---- - - -- - - ------------ ---- -
----- ------ - --- ----------------------
---------------------
-- --- ------ ---------
--------------------
--------
--------
------ --
------- ------------
---
-
-- ---- ------ ----
-------------------------------- -- --- ----------------- -- -
---------------- - ------- -- -
-- ----------- --- ------- -
----------
-
--
------------ -- -
---------------- ------- --------
--------------- ---------------------
---在这个示例中，我们使用了两个缓冲区 bufferA 和 bufferB，这两个缓冲区都包含了 NUM_WORKERS 个整数。其中，bufferA 被初始化为顺序的 NUM_WORKERS 个整数，而 bufferB 则是默认初始化为 0。我们使用了一个 Promise 解决了 Worker 执行完成的事件，并等待所有 Worker 执行完成后输出bufferB 的值。
worker.js 文件中的代码如下所示：
-- -------------------- ---- -------
-------------- - ----- ------- -- -
----- --------- -------- ------ ------- - -----------
--- ---- - - -- - - ------- ---- -
----- ----- - --------------------- -------
-- ------
----- ------ - -----------------
-- ----- -------
---------------------- ------ --------
-- ---------------- ------ -------
----- --------------------- ------ -------
-- --------
-------------------- ------ ---
-- -- ------ ----------
-- -- --- ------ - -- -
-------------------------
-
-
--
-- -- --------- --
-------- ------------ -
-- -- -- -- -
------ --
-
------ ----------- - -- - ----------- - ---
-在 worker.js 中，我们使用了 Atomics.load 函数读取了缓冲区中 index 位置的元素值。然后，我们执行了一些计算，将结果写入了缓冲区的 index 位置。接着，我们使用 Atomics.wait 函数等待所有 Worker 在这个缓冲区的 index 位置完成写操作。最后，我们使用 Atomics.add 函数增加了缓冲区的 index 位置的元素值。
总结
在本文中，我们讲述了 ES8 中新增的两个特性 SharedArrayBuffer 和 Atomics。通过这两个特性，我们可以更加轻松地实现并发编程。我们提供了一些示例代码，帮助读者更好地理解和运用这些特性。随着 JavaScript 在多线程处理方面向前迈进，我们相信这种并发编程方式将在未来成为日常开发的一部分。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/649ead8748841e9894b39018