在 JavaScript 中哪里使用 ArrayBuffer 和类型化数组？

Posted 2023-02-22

【中文标题】在 JavaScript 中哪里使用 ArrayBuffer 和类型化数组？

【英文标题】：Where to use ArrayBuffer vs typed array in JavaScript?

【发布时间】：2017-07-13 23:53:21

【问题描述】：

我正在从 Node.js 迁移到浏览器环境，但我仍然对 ArrayBuffer 与类型化数组（例如 Uint8Array）感到困惑。

我对在哪里使用类型化数组以及在哪里直接使用 ArrayBuffer 感到困惑。将一个转换为另一个并不难，反之亦然，但是什么时候使用呢？

例如，当我在我的代码中创建一个表示一大块数据的对象时，它应该是 ArrayBuffer 还是 Uint8Array？这取决于什么？

或者：我应该从我的函数（例如，对于外部 API）还是类型化数组中返回 ArrayBuffer？

请注意，我可以在谷歌上搜索如何将元素等添加到这些类型化的数组中；我缺少的是一些简短的通用指南，在哪里使用什么。尤其是从节点的缓冲区移动时。

【问题讨论】：

我知道这个问题可能过于宽泛，但我不知道如何更好地提问:(

Have you read the documentation? 你永远不会“直接使用 ArrayBuffer”。它是一种抽象，表示类型化数组背后的存储。

但是您可以创建一个 ArrayBuffer...var buffer = new ArrayBuffer(8)，如链接文档中所述。

我应该从我的函数（例如，对于外部 API）还是类型化数组中返回 ArrayBuffer？

嗯，非常具体的情况...例如：当您使用 webgl 时，在绘制索引数据时需要类型化数组，此处需要 Float32Array 和 Uint16Array：developer.mozilla.org/en-US/docs/Web/API/WebGL_API/Tutorial/…

【参考方案1】：

概念

ArrayBuffers 表示物理内存中的字节数组。 ArrayBuffer 是字节的实际存储，但很少直接使用 - 事实上，您无权直接读取 ArrayBuffer 的内容，只能为其传递引用。另一方面，它们用于服务器和客户端之间的二进制数据传输，或通过 Blob 从用户的文件系统传输。

^{ArrayBuffer 内存中的字节数组 - 每个索引等于一个字节。 ArrayBuffer 在内存中对齐。}

要读取 ArrayBuffer 的内容，您需要使用 view。它位于顶部并提供一个“api”来按不同宽度类型或任意访问字节。

与宽度相关的视图

根据您的需要使用不同的视图。如果您只需要读取字节值，即。 -128 和 127 之间的有符号值 - 或 - 0-255 之间的无符号值，您将使用 Int8Array 或 Uint8Array。请注意，它们的名称有点“误导”，因为它们是视图而不是数组，并且只引用底层的 ArrayBuffer。

同样，您对Int8Array、Uint8Array、Uint8ClampedArray、Int16Array、Uint16Array、Int32Array、Uint3Array、Float32Array 和 Float64Array 有意见。

除了 *int8Arrays 之外，其他的都对 ArrayBuffer 的大小有一些要求。例如，Uint32Array 视图必须位于可被 4 整除的 ArrayBuffer 之上，否则会引发错误。 *int 16 个视图需要两个字节的边界。

这通常不是问题，因为您可以直接使用视图的构造函数指定索引数量，并且会自动创建匹配的 ArrayBuffer 以满足这些要求。

由于 ArrayBuffer 是一个字节数组，*int16 视图从其中读取两个字节 - 或者，一个索引 = 两个字节，*int32 四个，或者一个索引 = 四个字节，等等。

Uint8Array 和 Uint8ClampedArray 的主要区别在于，超出范围的值与普通数组进行模数运算（例如 256 变为 0）。在钳位数组中，值按照建议钳位代替（256 变为 255）。

^{Int16/Uint16 视图 - 每个索引代表两个字节并且是内存对齐的。}

^{Int32/Uint32 和 Float32 视图 - 每个索引代表四个字节并且是内存对齐的。}

^{Float64 视图 - 每个索引代表 8 个字节并且是内存对齐的。}

DataView 的灵活性

然后是数据视图。这适用于您需要灵活的 ArrayBuffer 并需要从缓冲区中的位置读取可变宽度且不一定宽度或内存对齐的场景。

例如，*int32 索引将始终指向可被四整除的内存位置。另一方面，DataView 可以从例如位置 5 读取 Uint32，并会在内部处理所有需要的步骤（位移、屏蔽等），但代价是很小的开销。

另一个区别是，DataView 不使用索引，而是使用绝对字节位置来表示它所代表的数据，并且它具有自己的方法来从/向任何位置读取或写入各种宽度。

^{DataView - 可以从任何位置和任何宽度读取。}

在其他情况下，您可以使用多个不同的视图来引用相同的底层 ArrayBuffer。

目前没有整数的 64 位视图，但似乎是 proposed for ES8。

SharedArrayBuffers

提一下新的SharedArrayBuffers 也很有用，它可以跨网络工作者使用。

您过去可以（并且仍然可以）在某些浏览器中使用 transferable objects，但 SharedArrayBuffers 更有效，因为内存保持不变，仅传输有关它的信息。 SharedArrayBuffers 不能像 ArrayBuffers 那样分离。

用途和用途领域

类型化数组可以很好地存储特定的数值并且速度很快。位图是类型化数组的典型候选对象（例如 canvas 2D/WebGL）。

网络工作者内部数据的大量数据处理是另一种用途，依此类推。我已经提到了客户端和服务器或文件系统之间的二进制传输。

DataViews 非常适合解析或构建二进制文件和文件格式。

类型化数组是打包二进制数据以通过网络发送到服务器或通过 Web 套接字以及 WebRTC 的数据通道之类的东西的绝佳方式。

如果您处理音频、视频、画布或媒体录制，通常无法使用类型化数组。

使用类型化数组的关键是性能和内存。它们最常用于特殊场景，但在您只需要存储数值（或 utf-8 字符串、加密向量等）的普通情况下使用它们并没有错。它们速度快，内存占用少。

注意事项

有几个注意事项需要注意：

字节顺序

在字节顺序方面必须采取一些预防措施。类型化数组总是反映它们运行的​​ CPU 架构，即。小端或大端。大多数消费者系统都是 little-endian，但在使用 *int16 和 *int32 数组时，您必须特别注意字节顺序。 DataView 也可以在这部分提供帮助，但如果性能很重要，这并不总是一个好的选择。

从服务器接收数据时，字节顺序也很重要。它们通常始终采用大端格式（又名“网络顺序”）。对于解析文件格式，同样适用。

浮点数编码

Float32/Float64 将读写以IEEE-754 格式编码的数字。如果多个视图用于同一个缓冲区，这也是需要注意的。

跨浏览器支持

Most browsers supports typed arrays 现在。如果您必须处理旧浏览器，则必须返回 IE9 或更旧的移动浏览器才能使用它们。

Safari 在性能方面并没有特别优化，但还有其他好处。 5.1 版本不支持 Float64。

移动设备有其自身的硬件限制，但总的来说：类型化数组可以安全使用。对于特殊情况，存在polyfill。

【讨论】：

感谢您的精彩回答。所以，没有理由正确使用 ArrayBuffer ，对。太好了。

const memory = new ArrayBuffer(2); const view = new Uint8Array(memory); view[0] = 0xFF; console.log(new Uint8Array(memory)); // Uint8Array(2) [255, 0]。所以基本上ArrayBuffer 是实际内存，DataView 是它的包装器，用于以各种大小为单位访问内存，Typed array 与DataView 相同，只是它以固定大小的单位。谢谢。

周围有没有人对此一无所知并寻找其他资源.....（LIKE ME）

这根本没有回答 OP 的问题，即是否应该绕过并使用 ArrayBuffer 或像 Uint8Array 这样的观点；如果有使用其中一个的警告......

请注意，它们的名称有点“误导”，因为它们是视图而不是数组，并且仅引用底层 ArrayBuffer。 这只是一种观点，还是与此相关到一些旧版本的规范？我知道 一个 构造函数（即new UintXArray(buffer[, byteOffset[, length]])）创建了一个数组作为ArrayBuffer 的视图，但其他构造函数没有。我不知道UintXArray 类作为一个整体是严格遵守ArrayBuffer 概念的。