在 JavaScript 中,在何处使用 ArrayBuffer 与类型化数组?

Where to use ArrayBuffer vs typed array in JavaScript?

我正在从 Node.js 转向浏览器环境,但我仍然对 ArrayBuffer 与类型化数组(例如 Uint8Array)感到困惑。

我对在哪里使用类型化数组以及在哪里直接使用 ArrayBuffer 感到困惑。将一种转换为另一种并不难,反之亦然,但何时使用哪种?

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

或者:我应该 return ArrayBuffer 从我的函数(例如,对于外部 API)还是类型数组?

请注意,我可以 google 如何将元素等添加到这些类型化数组中;我缺少的是一些简短的一般指南,在哪里使用什么。特别是从节点的缓冲区移动时。

概念

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


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

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

宽度相关的视图

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

同样,您对 Int8Array, Uint8Array, Uint8ClampedArray, Int16Array, Uint16Array, Int32Array, Uint3Array, Float32Array and Float64Array 有意见。

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

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

并且由于 ArrayBuffer 是一个字节数组,*int16 视图从中读取两个字节 - 或者,一个索引 = 两个字节,*int32 四个,或者一个索引 = 四个字节,依此类推。

Uint8Array 和Uint8ClampedArray 的主要区别在于范围外的值与普通数组取模(例如256 变为0)。在 clamped 数组中,值按照建议的 clamped 代替(256 变为 255)。


Int16/Uint16 views - 每个索引代表两个字节并且是内存对齐的。


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


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

DataView 的灵活性

然后是DataView。这适用于需要灵活的 ArrayBuffer 并需要读取可变宽度以及缓冲区中不一定宽度或内存对齐的位置的场景。

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

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


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

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

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

SharedArrayBuffers

提及可跨 Web Worker 使用的新 SharedArrayBuffers 也很有用。

您过去可以(现在仍然可以)在某些浏览器中使用 transferable objects,但 SharedArrayBuffers 在内存保持不变的意义上更高效,仅传输有关它的信息。 SharedArrayBuffers 不能像 ArrayBuffers 那样分离。

用途和使用领域

类型化数组非常适合存储特定数值并且速度很快。位图是类型数组的典型候选对象(例如 canvas 2D/WebGL)。

web workers内部数据的重数据处理是另一种用途等等。我已经提到了客户端和服务器或文件系统之间的二进制传输。

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

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

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

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

注意事项

需要注意一些预防措施:

字节顺序

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

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

浮点数编码

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

跨浏览器支持

Most browsers supports typed arrays 如今。如果您必须处理旧版浏览器,则必须返回到 IE9 或旧版移动浏览器才能使用它们。

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

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