什么是 ArrayBuffer？
ArrayBuffer 是一种二进制数据缓冲区，它允许在内存中创建固定长度的数据缓冲区。可以使用它来存储和操作二进制数据，例如音频、视频和图像文件。
如何创建 ArrayBuffer？
使用 new ArrayBuffer(length) 可以创建一个指定长度为 length 字节的 ArrayBuffer：
const buffer = new ArrayBuffer(16);
上面的代码创建了一个 16 字节长的 ArrayBuffer。
如何读写 ArrayBuffer 中的数据？
可以通过 DataView 对象对 ArrayBuffer 中的数据进行读写。DataView 对象提供了对 ArrayBuffer 中数据的底层访问，包括读取和写入。
const buffer = new ArrayBuffer(16); const view = new DataView(buffer); view.setInt8(0, 10); // 在第 0 个字节设置一个有符号 8 位整数值为 10 console.log(view.getInt8(0)); // 输出：10
上面的代码创建了一个新的 ArrayBuffer，并使用 DataView 对象将值 10 写入到其第一个字节中。然后，它将这个值从 DataView 对象中读取并打印出来。
什么是 SharedArrayBuffer？
SharedArrayBuffer 是一个多线程共享的 ArrayBuffer。它可用于在多个 Web Worker 之间或在同一线程的不同函数之间共享数据。
如何使用 SharedArrayBuffer？
创建一个 SharedArrayBuffer 和创建一个 ArrayBuffer 的方式相同：
const sharedBuffer = new SharedArrayBuffer(16);
SharedArrayBuffer 的读写方式与 ArrayBuffer 相同，使用 DataView 对象进行访问。
如何确保多线程访问的数据安全？
由于 SharedArrayBuffer 可能被多个线程同时访问，因此必须确保对其访问的同步和互斥。可以使用 Atomics 对象来实现这一点。
Atomics 对象提供了一组原子操作，它们可以确保对共享内存的操作是原子性的。这些原子操作包括添加、交换、比较和设置等操作。
以下代码演示了如何使用 Atomics 对象在两个线程之间共享一个计数器：
-- -------------------- ---- ------- ----- ------------ - --- --------------------- ----- ---------- - --- ------------------------- ------------- - -- -------- -------- - --- ---- - - -- - - ------ ---- - ----------------------- -- --- - - --- --------------- ------------- -- - --------------------------- -- -------- -- -----展开代码
上面的代码创建了一个长度为 4 字节的 SharedArrayBuffer，并将其作为一个整数数组视图进行访问。然后，它创建了一个新的 Web Worker，该 Worker 在循环中执行了 10000 次原子加操作。最后，它在主线程中打印出计数器的值，以验证所有的原子加操作都被正确地执行了。
结论
ArrayBuffer 和 SharedArrayBuffer 是在 Web 平台上处理二进制数据的重要机制。了解它们的使用和工作原理可以帮助我们更好地利用这些机制，提高代码效率和安全性。同时，在多线程应用程序中，Atomics 对象可以确保对共享内存的访问是同步和互斥的，这是实现正确的多线程应用程序的关键。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/46774
