Concepts
数组缓冲区 https://devdocs.io/javascript/global_objects/arraybuffers 表示物理内存中的字节数组。 ArrayBuffer 是字节的实际存储,但很少直接使用 - 事实上,您无权直接读取 ArrayBuffer 的内容,只能传递它的引用。另一方面,它们用于服务器和客户端之间的二进制数据传输,或者通过 Blob 从用户的文件系统传输二进制数据。
ArrayBuffer byte array in memory - each index equals one byte. ArrayBuffer is aligned in memory.
要读取 ArrayBuffer 的内容,您需要使用view。它位于顶部并提供一个“api”来通过不同宽度类型或任意访问字节。
宽度相关的视图
根据您的需要使用不同的视图。如果您只需要读取字节值,即。 -128 到 127 之间的有符号值 - 或 0-255 之间的无符号值,您将使用 Int8Array 或 Uint8Array。请注意,它们的名称有点“误导”,因为它们是视图而不是数组,并且仅引用底层 ArrayBuffer。
同样,您有以下观点:整型8数组 https://devdocs.io/javascript/global_objects/int8array, Uint8Array https://devdocs.io/javascript/global_objects/uint8array, Uint8ClampedArray https://devdocs.io/javascript/global_objects/uint8clampedarray, Int16数组 https://devdocs.io/javascript/global_objects/int16array, Uint16数组 https://devdocs.io/javascript/global_objects/uint16array, Int32数组 https://devdocs.io/javascript/global_objects/int32array, Uint32Array https://devdocs.io/javascript/global_objects/uint32array, 浮点32数组 https://devdocs.io/javascript/global_objects/float32array and Float64数组 https://devdocs.io/javascript/global_objects/float64array.
除了 *int8Arrays 之外,其他数组都对 ArrayBuffer 大小有一些要求。例如,Uint32Array 视图必须位于可被 4 整除的 ArrayBuffer 之上,否则会引发错误。 *int 16 视图需要两字节边界。
这通常不是问题,因为您可以直接使用视图的构造函数指定索引数量,并且将自动创建匹配的 ArrayBuffer 来满足这些要求。
由于 ArrayBuffer 是一个字节数组,*int16 视图从中读取两个字节 - 或者,一个索引 = 两个字节,*int32 四个,或一个索引 = 四个字节,依此类推。
Uint8Array 和 Uint8ClampedArray 之间的主要区别在于,超出范围的值会与普通数组进行模运算(例如 256 变为 0)。在钳位数组中,值按照建议进行钳位(256 变为 255)。
Int16/Uint16 views - each index represents two bytes and is memory aligned.
Int32/Uint32 and Float32 views - each index represents four bytes and is memory aligned.
Float64 view - each index represents eight bytes and is memory aligned.
DataView 的灵活性
然后是数据视图。这适用于需要灵活的 ArrayBuffer 并需要从缓冲区中不一定是宽度或内存对齐的位置读取可变宽度和位置的情况。
例如,*int32 索引将始终指向可被四整除的内存位置。另一方面,DataView 可以从位置 5 读取 Uint32,并将在内部处理所有需要的步骤(移位、屏蔽等),但代价是微小的开销。
另一个区别是 DataView 不使用索引,而是使用其表示的数据的绝对字节位置,并且它具有自己的方法来从任何位置读取或向任何位置写入各种宽度。
DataView - can read from any position and any width.
在其他情况下,您可以使用引用相同底层 ArrayBuffer 的多个不同视图。
目前没有整数的 64 位视图,但似乎有提议用于 ES8 https://github.com/sirisian/ecmascript-types.
共享数组缓冲区
提及新功能也很有用共享数组缓冲区 https://devdocs.io/javascript/global_objects/sharedarraybuffer可以在网络工作者之间使用。
你可以(并且仍然可以)使用可转让物品 https://devdocs.io/dom/transferable过去在某些浏览器中,但 SharedArrayBuffers 的效率更高,因为内存保持不变,只传输有关它的信息。 SharedArrayBuffers 不能像 ArrayBuffers 那样分离。
目的和使用领域
类型化数组适合存储特定的数值并且速度很快。位图是类型化数组的典型候选者(例如 canvas 2D/WebGL)。
网络工作者内部的数据的大量数据处理是另一种用途,等等。我已经提到了客户端和服务器或文件系统之间的二进制传输。
DataView 非常适合解析或构建二进制文件和文件格式。
类型化数组是打包二进制数据的绝佳方法,以便通过网络发送到服务器或通过 Web 套接字以及 WebRTC 数据通道等方式发送。
如果您处理音频、视频、画布或媒体记录,通常无法绕过使用类型化数组。
使用类型化数组的关键是性能和内存。它们最常用于特殊场景,但是当您只需要存储数值(或 utf-8 字符串、加密向量等)时,在普通情况下使用它们并没有什么问题。它们速度快且内存占用少。
防范措施
有一些预防措施需要注意:
字节顺序
必须对字节顺序采取一些预防措施。类型化数组始终反映它们运行的 CPU 架构,即。小端或大端。大多数消费者系统都是小端字节序,但在使用 *int16 和 *int32 数组时,必须特别注意字节顺序。 DataView 也可以帮助完成这部分,但如果性能很重要的话,它并不总是一个好的选择。
从服务器接收数据时,字节顺序也很重要。它们通常始终采用大端格式(也称为“网络顺序”)。对于解析文件格式同样适用。
浮点数编码
Float32/Float64 将读取和写入编码在IEEE-754 https://en.wikipedia.org/wiki/IEEE_floating_point格式。如果多个视图用于同一个缓冲区,这也是需要注意的事情。
跨浏览器支持
大多数浏览器支持类型化数组 http://caniuse.com/#search=typed%20arrays如今。如果您必须使用较旧的浏览器,则必须返回 IE9 或较旧的移动浏览器,否则将无法使用它们。
Safari 在性能方面并没有特别优化,但其他好处还是有的。 5.1 版本不支持 Float64。
移动设备有其自身的硬件限制,但总的来说:类型化数组可以安全使用。对于特殊情况,存在一个polyfill https://github.com/inexorabletash/polyfill/blob/master/typedarray.js.