ES8 中加入 SharedArrayBuffer，团队可共享数据，让 WebAssembly 的并行计算更胜一筹
随着计算机技术的不断发展，Web 应用程序的性能需求也越来越高。WebAssembly 的出现满足了这一需求，它是一种低级编程语言，能够将 C、C++、Rust 等高级语言的代码编译成能够在浏览器中运行的二进制格式。WebAssembly 的并行计算能力，让它在解决复杂计算问题时表现非常突出。而 ES8 中加入的 SharedArrayBuffer，更是为 WebAssembly 的并行计算提供了更广阔的空间，能够让团队共享数据，提高运算效率。本文将详细介绍 ES8 中的 SharedArrayBuffer，并介绍如何在 WebAssembly 并行计算中使用它。
SharedArrayBuffer
SharedArrayBuffer 是一种 JavaScript 对象，它允许多个不同的 JavaScript 线程同时访问同一个 ArrayBuffer 对象。它可以被用于在 Web Workers，Service Workers 和 WebAssembly 模块中共享数据。SharedArrayBuffer 的目的是为了在共享数据时提高性能。由于 JavaScript 是单线程执行的语言，它的并发计算能力非常有限，SharedArrayBuffer 的出现使得并行计算成为可能。
使用 SharedArrayBuffer
在讲解 SharedArrayBuffer 的使用之前，我们需要先理解 ArrayBuffer。ArrayBuffer 是一种对象，用于表示通用的、固定长度的原始二进制数据缓冲区。类似于 C 语言的指针，我们可以在 ArrayBuffer 上创建 TypedArray，它们可以用于读写 ArrayBuffer 上的二进制数据。而 SharedArrayBuffer 和 ArrayBuffer 类似，也是一种对象，不同之处在于它是一个可共享的 ArrayBuffer。以下是一个简单的示例代码：
-- -- ----------------- -- ----- - - --- ------------------------ -- -- ---------- ------ ----------------- -- ----- -- - --- -------------- ----- - -- -- --- ------- --------- ----------------- --
在这个示例中，我们创建一个大小为 1024 字节的 SharedArrayBuffer 对象，并使用 Int32Array 进行关联。我们可以像操作普通数组一样地操作它，并且所有线程都可以同时对其进行访问。
WebAssembly 中的 SharedArrayBuffer
在 WebAssembly 中使用 SharedArrayBuffer 能够提高并行运算效率。我们可以将任务分别分配到不同的线程，并且让它们共享数据，以提高运算效率。下面是一个 WebAssembly 中并行计算的示例代码。
首先，我们需要编写一个 WebAssembly 模块，以用于并行计算。
-------
------- ---- ----- ------- ---
------- ---- ----- ----- ---- ------ --- -------
----- -------- ------ ------ ---- ------- ----
------ -- ----
------ -- ----
---------- -- -------- -------- ---------- --------- ---------- -------- ---------- ----
---------- -- -------- ---------- -------- ---------- ---------
-----
--- --------- ---------- --- ---------- ----------
----- ------- ---------- ------
----------- - --------- ----------- ----
---------- -- -------- ---------- --- ---------- ----
---------- -- -------- ---------- --- ---------- ----
-
----- --------------- ------ ------ ---- ------- ----
------ -- ----
------ -- ----
---------- -- -------- -------- ---------- --------- ---------- -------- ---------- ----
---------- -- -------- ---------- -------- ---------- ---------
-----
--- --------- ---------- --- ---------- ----------
----- ------- ---------- ------
----------- - --------- -------- ----------- -- ---------- ------
---------- -- -------- ---------- --- ---------- ----
----------- - ---------- -------- ----------- -- ---------- ---- ----------- ----
---------- -- -------- ---------- --- ---------- ----
-
----- -----
-- -----
----- -------- --
----- -------- --------
-- ------
----- --------------- --
----- --------------- --------
----- ---- ---------- -- ---------- -----------
-
------- ------- ------ --
------- - ---- ---- ---------- ---
------- ------------------ --- ---------- ---
-我们可以看到，这是一个非常简单的 WebAssembly 模块。它包含两个计算函数 compute 和 shared_compute，其中 shared_compute 使用了共享内存。compute 函数不使用共享内存，shared_compute 函数使用了共享内存。
接下来，我们创建一个 JavaScript 代码来加载 WebAssembly 并进行计算：
------ -- -- -
----- ------ - --- ------------------------------ ---------- ------- -------
----- -------- - ----- ---------------------
----- ---- - ----- -----------------------
----- - --------- --------- -------- - ----- ----------------------------- -
--- -
---------- ----- -
--------------- -------------------------------------- ----- - -------
--
---- -------------
-
---
-------
-----
在这个 JavaScript 代码中，我们首先创建了一个共享的内存，并将其传递给 WebAssembly，作为 WebAssembly 中的 SharedArrayBuffer。接下来，我们使用 WebAssembly.instantiate() 方法加载 WebAssembly 模块，并将 js 对象传递给 WebAssembly。在这里，我们将 js 对象里面包含一个 log 和 mem 属性，分别用于向 console 中打印结果，以及将共享内存传递给 WebAssembly。
最后，我们调用 WebAssembly 模块的主函数 main()，并开始进行计算。在计算中，我们可以看到，共享内存在处理数据时，比未使用共享内存的处理速度更快。
结论
通过使用 SharedArrayBuffer，我们可以在 WebAssembly 并行计算中大幅提高运算效率。在这里我们使用了一个简单的示例代码，并未展现出其真正的威力。在实际应用中，共享内存能够大幅提高 Web 应用程序的性能，减少资源占用。因此，在需要使用并行计算的场景下，我们应该合理使用 SharedArrayBuffer，并且加以改进，通过 WebAssembly 提供的并行计算能力，获取更好的并行计算效果。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/672199c82e7021665e082746