ES8 新特性：Shared Memory 和 Atomics，了解一下-JavaScript中文网-JavaScript教程资源分享门户

介绍

ES8（也称为 ECMAScript 2017）是一种新的 ECMAScript 版本，带来了许多强大的功能和新特性。其中，Shared Memory和 Atomics 是两个最为优秀的新增特性之一。

Shared Memory和 Atomics API 是用于处理多线程编程的API，它们允许不同的代码运行在不同的线程中，在同一时刻对数据进行修改和访问。这在前端领域中非常有用，因为它减少了锁的使用，从而提高了性能和并行性。

在此文章中，我们将深入探讨 Shared Memory 和 Atomics 的实现方式，并使用一些示例代码来演示如何在前端中使用它们。

Shared Memory

Shared Memory 可以让多个线程共享同一块内存空间。这样，线程之间就可以直接读写该内存空间，而不需要任何形式的拷贝或传输。这样可以大大提升性能。

Shared Memory API 中最主要的是 SharedArrayBuffer，该 API 可以创建一个长度指定的共享内存区域，可以用于线程间的内存共享。例如，在以下代码示例中，我们将创建一个包含 10 个元素的共享数组缓冲区：

const sharedBuffer = new SharedArrayBuffer(40);

在这里，共享缓冲区的长度为 10 个元素，每个元素都将占用 4 字节的空间（因为 JavaScript 中的数字型为 32 位，也即 4 字节），因此，共享缓冲区的实际占用空间为 40 个字节。

除了 SharedArrayBuffer 之外，还有一些其他的 API 可以用于创建共享内存。例如，Int8Array、Uint8Array、Int16Array、Uint16Array、Int32Array、Uint32Array、Float32Array、Float64Array 可以用于创建对应类型的共享内存，如下所示：

const int8Array = new Int8Array(sharedBuffer);
const uint8Array = new Uint8Array(sharedBuffer);
const int16Array = new Int16Array(sharedBuffer);
const uint16Array = new Uint16Array(sharedBuffer);
const int32Array = new Int32Array(sharedBuffer);
const uint32Array = new Uint32Array(sharedBuffer);
const float32Array = new Float32Array(sharedBuffer);
const float64Array = new Float64Array(sharedBuffer);

在这里，你可以选择你想用的适当的 API 来创建相应类型的共享内存。

Atomics

Atomics API 用于执行原子操作，这些操作可以确保数据不会在多个线程中被同时修改。这是为了避免线程访问变量时出现的竞争条件，从而提高程序的正确性。

以下是 Atomics API 中可用的方法：

add()
and()
compareExchange()
exchange()
isLockFree()
load()
or()
store()
sub()
wait()
xadd()
xor()

这些方法的作用旨在使多线程的操作变得安全和可靠。

要使用 Atomics API 中的方法，需要先创建一个适当的共享内存区域。例如，假设我们创建了一个32位int型的共享内存区域，该区域将被作为add()方法的目标：

const sharedBuffer = new SharedArrayBuffer(4);
const sharedArray = new Int32Array(sharedBuffer);

现在，我们可以将add()方法应用于共享数组，如下所示：

Atomics.add(sharedArray, 0, 2);

在这里，add() 方法将一个整数值(2)加到共享数组的零位置上，并返回修改后的值。由于 Atomics API 中的所有方法都是原子操作，因此该操作是线程安全的。

同时，compareExchange() 方法则是用来比较并验证某个位置的新旧值是否相等，如果相等则进行修改并返回修改后的值。这一功能在多线程下控制数据的修改状态具有很大的便利性。

Atomics.compareExchange(sharedArray, 0, 0, 2);

在这里，compareExchange() 方法将共享数组的零位置上的值与 0 进行比较，如果相等将其修改为 2。

示例

下面是一个简单的示例，展示如何使用 Shared Memory 和 Atomics：

// javascriptcn.com 代码示例
const sharedBuffer = new SharedArrayBuffer(4);
const sharedArray = new Int32Array(sharedBuffer);

new Worker('./worker.js');

setTimeout(() => {
  Atomics.add(sharedArray, 0, 2);
  console.log(`sharedArray[0] is ${sharedArray[0]}`);
}, 1000);

运行该代码后，将会在1秒后输出：sharedArray[0] is 2。

该示例中，在主线程中创建了一个共享数组和一个新的线程。在共享数组中使用 Atomics.add() 方法将值 2 添加到数组索引 0 上。在之后的输出中，可以看到共享数组的值已经成功修改。

总结

在本篇文章中，我们介绍了 ES8 的特性——Shared Memory 和 Atomics。 Shared Memory 提供了多线程之间共享内存的功能，而 Atomics API 则可以确定修改操作的原子性，从而保证多线程操作的数据的安全与正确性。

这些特性在前端领域中很有用，可以提高并行性和性能。因此，了解和学习这些特性，可以帮助你更好地编写高效的多线程代码。

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/65461b4a7d4982a6ebfe4d01