Vivien's Notebook

ArrayBuffer

2024/1/31 JavaScript

# ArrayBuffer 对象

​ ArrayBuffer对象代表储存二进制数据的一段内存，它不能直接读写，只能通过视图(TypedArray视图和DataView视图)来读写，视图的作用是以指定格式解读二进制数据。ArrayBuffer也是一个构造函数，可以分配一段可存放数据的连续内存区域。

const buf = new ArrayBuffer(32); //生成一段32字节的内存区域
const dataView = new DataView(buf); //建立DataView视图
dataView.getUint8(0) // 0 以不带符号的8位整数格式从头读取8位二进制数据，结果得到0，因为原始内存的ArrayBuffer对象默认所有位都是0
1
2
3

​ DataView提供了更灵活的方式来读写二进制数据，DataView视图的创建需要提供ArrayBuffer对象实例作为参数。另一种TypedArray视图，它是一种特殊的数组类型，与DataView视图的一个区别是，它不是一个构造函数，而是一组构造函数，代表不同的数据格式。

const buffer = new ArrayBuffer(12);
const x1 = new Int32Array(buffer); //32位带符号整数（Int32Array构造函数）
x1[0] = 1;
const x2 = new Uint8Array(buffer); //8位不带符号整数（Uint8Array构造函数）
//由于两个视图对应的是同一段内存，一个视图修改底层内存，会影响到另一个视图。
x2[0]  = 2;
x1[0] // 2
1
2
3
4
5
6
7

​ TypedArray视图的构造函数，除了接受ArrayBuffer实例作为参数，还可以接受普通数组作为参数，直接分配内存生成底层的ArrayBuffer实例，并同时完成对这段内存的赋值。

const typedArray = new Uint8Array([0,1,2]); //新建一个不带符号的8位整数视图，直接使用普通数组作为参数，对底层内存的赋值同时完成
typedArray.length // 3
typedArray[0] = 5;
typedArray // [5, 1, 2]
1
2
3
4

TypedArray更适合处理大量同类型的数据，并且要求高性能的场景； DataView则更适合处理包含多种数据类型或者需要灵活控制字节顺序的复杂二进制数据。

*ArrayBuffer.prototype.byteLength*****

​ ArrayBuffer实例的byteLength属性返回所分配的内存区域的字节长度。如果要分配的内存区域很大，有可能分配失败(因为没有那么多的连续空余内存)，所以有必要检查是否分配成功。

const buffer = new ArrayBuffer(32);
buffer.byteLength // 32
if (buffer.byteLength === n) {
  // 成功
} else {
  // 失败
}
1
2
3
4
5
6
7

*ArrayBuffer.prototype.slice()*****

​ ArrayBuffer实例有一个slice方法，允许将内存区域的一部分拷贝生成一个新的ArrayBuffer对象。

const buffer = new ArrayBuffer(8);
const newBuffer = buffer.slice(0, 3); //拷贝buffer对象的前3个字节(从0开始到第3个字节前面结束)，生成一个新的ArrayBuffer对象
1
2

​ slice方法包含两步，第一步是先分配一段新内存，第二步是将原来那个ArrayBuffer对象拷贝过去。

​ slice方法接受两个参数，第一个参数表示拷贝开始的字节序号(含该字节)，第二个参数表示拷贝截止的字节序号(不含该字节)。如果省略第二个参数，则默认到原ArrayBuffer对象的结尾。

​ 除了slice方法，ArrayBuffer对象不提供任何直接读写内存的方法，只允许在其上方建立视图，然后通过视图读写。

*ArrayBuffer.isView()*****

​ ArrayBuffer有一个静态方法isView，返回一个布尔值，表示参数是否为ArrayBuffer的视图实例。这个方法大致相当于判断参数是否为TypedArray实例或DataView实例。

const buffer = new ArrayBuffer(8);
ArrayBuffer.isView(buffer) // false
const v = new Int32Array(buffer);
ArrayBuffer.isView(v) // true
1
2
3
4

# TypedArray 视图

​ ArrayBuffer对象作为内存区域，可以存放多种类型的数据。同一段内存，不同数据有不同的解读方式，这就叫做视图。ArrayBuffer有两种视图，一种是TypedArray视图，另一种是DataView视图。前者的数组成员都是同一个数据类型，后者的数组成员可以是不同的数据类型。

​ 目前，TypedArray视图一共包括9种类型，每一种视图都是一种构造函数：

  • Int8Array：8 位有符号整数，长度 1 个字节。
  • Uint8Array：8 位无符号整数，长度 1 个字节。
  • Uint8ClampedArray：8 位无符号整数，长度 1 个字节，溢出处理不同。
  • Int16Array：16 位有符号整数，长度 2 个字节。
  • Uint16Array：16 位无符号整数，长度 2 个字节。
  • Int32Array：32 位有符号整数，长度 4 个字节。
  • Uint32Array：32 位无符号整数，长度 4 个字节。
  • Float32Array：32 位浮点数，长度 4 个字节。
  • Float64Array：64 位浮点数，长度 8 个字节。

​ 这 9 个构造函数生成的数组统称为TypedArray视图。它们很像普通数组，都有length属性，都能用方括号运算符（[]）获取单个元素，所有数组的方法在它们上面都能使用。

​ 普通数组与 TypedArray 数组的差异主要在以下方面：

  • TypedArray 数组的所有成员都是同一种类型。
  • TypedArray 数组的成员是连续的，不会有空位。
  • TypedArray 数组成员的默认值为 0。比如，new Array(10)返回一个普通数组，里面没有任何成员，只是 10 个空位；new Uint8Array(10)返回一个 TypedArray 数组，里面 10 个成员都是 0。
  • TypedArray 数组只是一层视图，本身不储存数据，它的数据都储存在底层的ArrayBuffer对象之中，要获取底层对象必须使用buffer属性。

构造函数

​ TypedArray 数组提供 9 种构造函数，用来生成相应类型的数组实例。构造函数有多种用法。

  • TypedArray(buffer, byteOffset=0, length?)：同一个ArrayBuffer对象上可以根据不同的数据类型建立多个视图。注意，byteOffset必须与所要建立的数据类型一致，否则会报错。

​ 如果想从任意字节开始解读ArrayBuffer对象，必须使用DataView视图，因为TypedArray视图只提供9种固定的解读格式。

  • TypedArray(length)：视图还可以不通过ArrayBuffer对象，直接分配内存而生成。
  • TypedArray(typedArray)：TypedArray 数组的构造函数可以接受另一个TypedArray实例作为参数。注意，此时生成的新数组只是复制了参数数组的值，对应的底层内存是不一样的。新数组会开辟一段新的内存储存数据，不会在原数组的内存之上建立视图。
  • TypedArray(arrayLikeObject)：构造函数的参数也可以是一个普通数组，然后直接生成TypedArray实例。注意，这时TypedArray视图会重新开辟内存，不会在原数组的内存上建立视图。

​ TypedArray 数组也可以转换回普通数组。

数组方法：普通数组的操作方法和属性对 TypedArray 数组完全适用。TypedArray 数组与普通数组一样部署了Iterator接口，所以可以被遍历。

字节序：指的是数值在内存中的表示方式。与普通数组相比，TypedArray数组的最大优点就是可以直接操作内存，不需要数据类型转换，所以速度快得多。

BYTES_PER_ELEMENT 属性：每一种视图的构造函数都有一个BYTES_PER_ELEMENT属性，表示这种数据类型占据的字节数。

ArrayBuffer 与字符串的互相转换：使用原生TextEncoder和TextDecoder方法。

溢出：不同的视图类型所能容纳的数值范围是确定的。超出这个范围，就会出现溢出。TypedArray数组的溢出处理规则，简单来说，就是抛弃溢出的位，然后按照视图类型进行解释。

  • 正向溢出(overflow)：当输入值大于当前数据类型的最大值，结果等于当前数据类型的最小值加上余值，再减去 1。
  • 负向溢出(underflow)：当输入值小于当前数据类型的最小值，结果等于当前数据类型的最大值减去余值的绝对值，再加上 1。

TypedArray.prototype.buffer：返回整段内存区域对应的ArrayBuffer对象。只读。

TypedArray.prototype.byteLength：返回TypedArray数组占据的内存长度，单位为字节。只读。

TypedArray.prototype.byteOffset：返回TypedArray数组从底层ArrayBuffer对象的哪个字节开始。只读。

TypedArray.prototype.length：表示TypedArray数组含有多少个成员。注意将 length 属性和 byteLength 属性区分，前者是成员长度，后者是字节长度。

TypedArray.prototype.set()：用于复制数组(普通数组或TypedArray数组)，也就是将一段内容完全复制到另一段内存。

TypedArray.prototype.subarray()：对于TypedArray数组的一部分，再建立一个新的视图。

TypedArray.prototype.slice()：返回一个指定位置的新的TypedArray实例。

TypedArray.of()：用于将参数转为一个TypedArray实例。

TypedArray.from()：接受一个可遍历的数据结构（比如数组）作为参数，返回一个基于这个结构的TypedArray实例。还可以将一种TypedArray实例转为另一种。它会将第一个参数指定的TypedArray数组拷贝到另一段内存之中，处理之后再将结果转成指定的数组格式。

# 复合视图

​ 由于视图的构造函数可以指定起始位置和长度，所以在同一段内存中可以依次存放不同类型的数据，这叫做复合视图。

const buffer = new ArrayBuffer(24); //下面将一个24字节长度的ArrayBuffer对象分成三部分
const idView = new Uint32Array(buffer, 0, 1); //字节0到字节3：1个32位无符号整数
const usernameView = new Uint8Array(buffer, 4, 16); //字节4到字节19：16个8位整数
const amountDueView = new Float32Array(buffer, 20, 1); //字节20到字节23：1个32位浮点数
1
2
3
4

# DataView 视图

​ 如果一段数据包括多种类型(比如服务器传来的HTTP数据)，这时除了建立ArrayBuffer对象的复合视图以外，还可以通过DataView视图进行操作。

​ DataView视图提供更多操作选项，而且支持设定字节序。本来在设计目的上，ArrayBuffer对象的各种TypedArray视图是用来向网卡、声卡之类的本机设备传送数据，所以使用本机的字节序就可以了；而DataView视图是用来处理网络设备传来的数据，所以大端字节序或小端字节序是可以自行设定的。

​ DataView视图本身也是构造函数，接受一个ArrayBuffer对象作为参数，生成视图。

new DataView(ArrayBuffer buffer [, 字节起始位置 [, 长度]]);
1

​ DataView实例有以下属性，含义与TypedArray实例的同名方法相同。

  • DataView.prototype.buffer：返回对应的 ArrayBuffer 对象
  • DataView.prototype.byteLength：返回占据的内存字节长度
  • DataView.prototype.byteOffset：返回当前视图从对应的 ArrayBuffer 对象的哪个字节开始

​ DataView实例提供 8 个方法读取内存。

  • getInt8：读取 1 个字节，返回一个 8 位整数。
  • getUint8：读取 1 个字节，返回一个无符号的 8 位整数。
  • getInt16：读取 2 个字节，返回一个 16 位整数。
  • getUint16：读取 2 个字节，返回一个无符号的 16 位整数。
  • getInt32：读取 4 个字节，返回一个 32 位整数。
  • getUint32：读取 4 个字节，返回一个无符号的 32 位整数。
  • getFloat32：读取 4 个字节，返回一个 32 位浮点数。
  • getFloat64：读取 8 个字节，返回一个 64 位浮点数。

​ 这一系列get方法的参数都是一个字节序号(不能是负数，否则会报错)，表示从哪个字节开始读取。

​ 如果一次读取两个或两个以上字节，就必须明确数据的存储方式到底是小端字节序还是大端字节序。默认情况下，DataView的get方法使用大端字节序解读数据，如果要使用小端字节序解读，必须在get方法的第二个参数指定true。

dv.setInt32(0, 25, false); // 在第1个字节，以大端字节序写入值为25的32位整数
dv.setInt32(4, 25); // 在第5个字节，以大端字节序写入值为25的32位整数
dv.setFloat32(8, 2.5, true); // 在第9个字节，以小端字节序写入值为2.5的32位浮点数
1
2
3

# 二进制数组的应用

AJAX

​ XMLHttpRequest第二版XHR2允许服务器返回二进制数据，这时分成两种情况。如果明确知道返回的二进制数据类型，可以把返回类型(responseType)设为arraybuffer；如果不知道，就设为blob。

Canvas

​ 网页Canvas元素输出的二进制像素数据就是 TypedArray 数组。

WebSocket

​ WebSocket可以通过ArrayBuffer发送或接收二进制数据。

Fetch API

​ Fetch API 取回的数据就是ArrayBuffer对象。

File API

​ 如果知道一个文件的二进制数据类型，也可以将这个文件读取为ArrayBuffer对象。

# SharedArrayBuffer

​ JavaScript是单线程的，Web worker引入了多线程：主线程用来与用户互动，Worker线程用来承担计算任务。每个线程的数据都是隔离的，通过postMessage()通信。下面是一个例子。

// 主线程
const w = new Worker('myworker.js'); //主线程新建了一个Worker线程
// 主线程
w.postMessage('hi'); //主线程通过w.postMessage向Worker线程发消息
w.onmessage = function (ev) { //通过message事件监听Worker线程的回应
  console.log(ev.data);
}
// Worker 线程
onmessage = function (ev) { //Worker线程也通过监听message事件获取主线程发来的消息并作出反应
  console.log(ev.data);
  postMessage('ho');
}
1
2
3
4
5
6
7
8
9
10
11
12

​ 线程之间的数据交换可以是各种格式，不仅仅是字符串，也可以是二进制数据。这种交换采用的是复制机制，即一个进程将需要分享的数据复制一份，通过postMessage交给另一个进程。如果数据量比较大，这种通信的效率显然比较低。很容易想到，这时可以留出一块内存区域，由主线程与Worker线程共享，两方都可以读写，那么就会大大提高效率，协作起来也会比较简单(不像postMessage那么麻烦)。

​ ES2017引入SharedArrayBuffer，允许Worker线程与主线程共享同一块内存。SharedArrayBuffer的API与ArrayBuffer一模一样，唯一的区别是后者无法共享数据。共享内存也可以在Worker线程创建，发给主线程。

// 主线程
// 新建 1KB 共享内存
const sharedBuffer = new SharedArrayBuffer(1024);
// 主线程将共享内存的地址发送出去
w.postMessage(sharedBuffer); //postMessage方法的参数是SharedArrayBuffer对象
// 在共享内存上建立视图，供写入数据
const sharedArray = new Int32Array(sharedBuffer);
// Worker线程 
onmessage = function (ev) {
  // 主线程共享的数据，就是 1KB 的共享内存
  const sharedBuffer = ev.data; //Worker线程从事件的data属性上面取到数据
  // 在共享内存上建立视图，方便读写
  const sharedArray = new Int32Array(sharedBuffer);
  // ...
};
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

​ SharedArrayBuffer与ArrayBuffer一样，本身是无法读写的，必须在上面建立视图，然后通过视图读写。

# Atomics 对象

​ 多线程共享内存最大的问题就是如何防止两个线程同时修改某个地址，或者说，当一个线程修改共享内存以后，必须有一个机制让其他线程同步。SharedArrayBuffer API 提供Atomics对象，保证所有共享内存的操作都是原子性的，并且可以在所有线程内同步。

​ Atomics对象可以保证一个操作所对应的多条机器指令一定是作为一个整体运行的，中间不会被打断。也就是说，它所涉及的操作都可以看作是原子性的单操作，这可以避免线程竞争，提高多线程共享内存时的操作安全。Atomics对象提供多种方法。

  • Atomics.store()，Atomics.load()

​ store()方法用来向共享内存写入数据，load()方法用来从共享内存读出数据。比起直接的读写操作，它们的好处是保证了读写操作的原子性。编译器不会为了优化而打乱机器指令的执行顺序。

  • Atomics.exchange()

​ Worker线程要写入数据，可以使用上面的Atomics.store()方法，也可以使用Atomics.exchange()方法。它们的区别是，Atomics.store()返回写入的值，而Atomics.exchange()返回被替换的值。

  • Atomics.wait()，Atomics.wake()

​ 使用while循环等待主线程的通知不是很高效，如果用在主线程就会造成卡顿，Atomics对象提供了wait()和wake()方法用于等待通知。这两个方法相当于锁内存，即在一个线程进行操作时，让其他线程休眠(建立锁)，等到操作结束，再唤醒那些休眠的线程（解除锁）。

​ Atomics.wait()等同于告诉Worker线程，只要满足给定条件就在这一行Worker线程进入休眠。主线程一旦更改了指定位置的值，就可以唤醒Worker线程，就会让它继续往下运行。

​ 注意，浏览器的主线程不宜设置休眠，这会导致用户失去响应。而且主线程实际上会拒绝进入休眠。

  • 运算方法

​ 共享内存上面的某些运算是不能被打断的，即不能在运算过程中，让其他线程改写内存上面的值。Atomics 对象提供了一些运算方法，防止数据被改写。

  • 其他方法

​ Atomics对象还有以下方法。

  • Atomics.compareExchange(sharedArray, index, oldval, newval)：如果sharedArray[index]等于oldval，就写入newval，返回oldval。
  • Atomics.isLockFree(size)：返回一个布尔值，表示Atomics对象是否可以处理某个size的内存锁定。如果返回false，应用程序就需要自己来实现锁定。

​ Atomics.compareExchange的一个用途是，从 SharedArrayBuffer 读取一个值，然后对该值进行某个操作，操作结束以后，检查一下 SharedArrayBuffer 里面原来那个值是否发生变化（即被其他线程改写过）。如果没有改写过，就将它写回原来的位置，否则读取新的值，再重头进行一次操作。

上次更新: 2024/4/13 08:06:14

最新提案