TypedArray 与 BufferJS TypedArray与Buffer技术教程

· 17MEMORY · 记忆碎片

技术

vanner

创建于：2 个月前

更新于：13 天前

0

0

0

0

下载文章

还不错，分享一下~

SharedArrayBuffer 与 Buffer

• 首先，需要明确的是，一个中文：大多数情况是占用3个字节。

js
// 获取每个字符的字节数
const str = "你好，世界！";
const bufferStr = new TextEncoder().encode(str);
console.log(bufferStr / str.length);

Uint8Array 与 TypedArray

• Uint8Array 可以简单理解为数组，这个数组的每一项是 8 位，在计算机中占用 1 个字节。

js
const uint8 = new Uint8Array(10);
unit8[0] = 255;
unit8.set([1, 2, 3], 1);
console.log(uint8); // Uint8Array(10) [255, 1, 2, 3, 0, 0, 0, 0, 0, 0]

// 当填写的数据超出了一个字节。则不会被添加到 Uint8Array 中（在不同场景下表现不一致。有可能也会直接报错。）
uint8[0] = 256;
console.log(uint8[0]); // 0

• Uint32Array 就很好理解了，它的每一项是 32 位，在计算机中占用 4 个字节。

js
const uint32 = new Uint32Array(10);
uint32[0] = 4294967295;
console.log(uint32); // Uint32Array(10) [4294967295, 0, 0, 0, 0, 0, 0, 0, 0, 0]

// 当填写的数据超出了一个字节。则不会被添加到 Uint32Array 中（在不同场景下表现不一致。有可能也会直接报错。）
uint32[0] = 4294967296;
console.log(uint32[0]); // 0

• Int32Array、Float32Array 等类型的数组也是类似的，只是每一项占用的字节数不同。

SharedArrayBuffer 与 TypedArray

• SharedArrayBuffer 就是一块共享内存区域，可以被多个线程访问和修改。 它本身并没有提供任何方法来操作数据，而是需要通过视图（如 Uint8Array）来访问和修改数据。

js
const sab = new SharedArrayBuffer(1024);
const uint8 = new Uint8Array(sab);
console.log(uint8.length); // 1024

• 对于多个 Uint8Array 操作同一块 SharedArrayBuffer 的情况，修改其中一个 Uint8Array 的数据会影响到其他 Uint8Array，因为它们共享同一块内存。

js
const sab = new SharedArrayBuffer(1024);
const uint8_1 = new Uint8Array(sab);
const uint8_2 = new Uint8Array(sab);

uint8_1[0] = 42;
console.log(uint8_2[0]); // 42

TextEncoder 与 TextDecoder

• 看懂了上面的示例，这个就很好理解了。 在前面讲到，TypedArray 是用来操作二进制数据的，而 TextEncoder 和 TextDecoder 则是用来在字符串和二进制数据之间进行转换的工具。 但 TypedArray 在定义是已经确定了buffer的长度以及每一项需的大小。以中文和 UInt8Array 为例： 每个中文占用 3 个字节，而 UInt8Array 的每一项只能存储 1 个字节，所以当我们将一个字符串转换为 Uint8Array 时，可能会出现数据丢失的情况。

js
// 错误的示例
const str = "你好，世界！";
const uint8 = new Uint8Array(str.length);
for (let i = 0; i < str.length; i++) {
  uint8[i] = str.charCodeAt(i);
}
console.log(uint8); // Uint8Array(6) [20320, 22909, 65292, 19990, 30028, 65281]

• 因此，正确的方式应该这么干。

js
// 转换
const str = "你好，世界！";
const coderStr = new TextEncoder().encode(str);

// 放入 Uint8Array 中
const arrayBuffer = new Uint8Array(coderStr.byteLength);
arrayBuffer.set(coderStr);

// 输出中文
console.log(new TextDecoder().decode(arrayBuffer)); // 你好，世界！

• 扩展点：前面提到，Uint8Array 每一项是1个字节，也就是说，UintArray 的每一项最多不能超过 255，如果超过了就会发生溢出。 以Unit8Array为例 ：那么TextEncoder 会不会输出超过 255 的值呢？答案是不会的。因为 TextEncoder 是以 utf-8 的方式编码字符串的， 而 utf-8 的编码规则是：对于 ASCII 字符（即 Unicode 码点在 U+0000 到 U+007F 之间的字符），使用一个字节进行编码；对于其他字符，使用多个字节进行编码。因此，TextEncoder 输出的值不会超过 255。
• 如：以 “中” 这个字来encoder，会输出三个无符号整数，且每个整数均不会超过 255：

js
const encoder = new TextEncoder();

console.log(encoder.encode('中'));  // Uint8Array(3) [ 228, 184, 173 ]
console.log(encoder.encode('中国')); // Uint8Array(6) [ 228, 184, 173, 229, 155, 189 ]

// 读者如果读到这里，可以回顾下最初前面提到的，一个中文三个字节
console.log(encoder.encode('一')); // Uint8Array(3) [ 228, 184, 128 ]

新的概念

• 掌握的上面的知识，就可以理解到，其实 SharedArrayBuffer 是可以被多种 byte array 操作的。如：一个 SharedArrayBuffer 可以被一个 Uint8Array 和一个 Uint32Array 等同时操作。 但是，要计算要其字节值，因为 Uint8Array 的每一项是 1 个字节，而 Uint32Array 的每一项是 4 个字节，所以当我们通过 Uint8Array 修改 SharedArrayBuffer 中的数据时，可能会影响到通过 Uint32Array 访问的数据，反之亦然。

js
const sab = new SharedArrayBuffer(1024);

// 1. 用 Int32Array 操作前 4 个字节 (存 ID)
const idView = new Int32Array(sab, 0, 1);
idView[0] = 999527;

// 2. 用 Uint8Array 操作剩下的 1020 个字节 (存数据)
const dataView = new Uint8Array(sab, 4);
dataView.set([0xff, 0xd8, 0xff]);

• 如果上面的示例看不懂，可以看下下面的 API

js
const sab = new SharedArrayBuffer(1024);

// 1. 用 Int32Array 操作前 4 个字节 (存 ID)
const idView = new Int32Array(sab, 0, 1);

// sab：SharedArrayBuffer
// 0：表示从 SharedArrayBuffer 的第 0 个字节开始创建视图
// 1：表示视图包含 1 个元素（即 4 个字节，因为 Int32Array 的每个元素占用 4 个字节）

// 2. 用 Uint8Array 操作剩下的 1020 个字节 (存数据)
const dataView = new Uint8Array(sab, 4);
dataView.set([0xff, 0xd8, 0xff]);

// sab：SharedArrayBuffer
// 4：表示从 SharedArrayBuffer 的第 4 个字节开始创建视图， 因为 Int32Array 一个格子占4个字节。
// undefined：表示后面的所有空间，都是自身的。

• 多 TypedArray 操作时，一定要计算好字节数，要不然会出现数据被覆盖的情况。

简单示例

Electron下的数据传输

常规模式下，我们在主进程中，可以直接使用IPC进行通讯。 不排除业务中需要把数据量较大的内容，传输给渲染进程进行渲染。此时，采用 TypedArray 和 MessageChannel 则是非常合适的。

js
const id = xxx;
const { port1, port2 } = new MessageChannelMain();
HelperWindow.helperWindow.webContents.postMessage(SendToRender.messageHistoryDetail, null, [port2]);

// 把 thread_id 转换为 buffer
const encoder = new TextEncoder();
const idBuffer = encoder.encode(id);

// 计算所需的字节长度
const totalBytes =
    rows.reduce((pre, next) => {
        return pre + 4 + idBuffer.byteLength + 4 + next.value.byteLength;
    }, 0) + 4;

// 分配物理内存
//  uint8 只能处理最大为 255 的数值。所以，补全前缀长度的大整数，必须使用 dataview, 因为 dataview 支持所有的基础数值类型（uint8, uint32, float8,32...）
const shareBuffer = new ArrayBuffer(totalBytes);
const view = new DataView(shareBuffer);
const uint8View = new Uint8Array(shareBuffer);
view.setUint32(0, rows.length, true); // 把数据的总条数添加到最前面

let offset = 4; // （unit32 占用4个字节、uint8占1个字节，考虑前四位的数据可能特别长），故前四位采用uint32写入了rows的长度，因此offset从4开始

// 下方的示例中，是如下类似的数据: [{ id: xxx, value: <Buffer>  }]
for (const line of rows) {
    view.setUint32(offset, idBuffer.byteLength, true);
    offset += 4;
    uint8View.set(idBuffer, offset);
    offset += idBuffer.byteLength;

    // value 本身即是buffer
    view.setUint32(offset, line.value.byteLength, true);
    offset += 4;
    uint8View.set(line.value, offset);
    offset += line.value.byteLength;
}

port1.start();

// 坑点：buffer的零拷贝，必须是在相同的进程下，才可以实现。因此，即使使用了buffef，在messageChannel通信时，也会在短时间内，内存中同样也会存储两份数据。
// 好的一点是，message Channel 本身是点对点的通信，资源耗费低。其次：在进程通信时，如果传递的是json，那么会走 struct clone，也就是json的key value 结构化克隆。是比较耗费资源的。
// buffer的好处是，在结构化克隆时，直接传递内存地址，不在需要 struct clone。因此会比较快。
port1.postMessage({ id, buffer: shareBuffer });
port1.close(); // 这里可以直接放心的close，port1.postMessage 本身是同步的把数据放入 ipc 管道。





// 渲染进程的解析(采用webworker，不阻塞主线程) 
import { AnswerType } from "@/type/answer";

self.onmessage = (e: MessageEvent<{ buffer: ArrayBuffer }>) => {
    const { buffer } = e.data;
    if (!buffer || !buffer.byteLength) return self.postMessage({ value: [] });

    const dataView = new DataView(buffer);
    const decoder = new TextDecoder();

    // 获取本次的消息total
    const total = dataView.getUint32(0, true); // 前四个字节表示当前的total

    const values = [];

    let offset = 4;
    for (let i = 0; i < total; i++) {
        const len = dataView.getInt32(offset, true);
        offset += 4;
        const tBuffer = new Uint8Array(buffer, offset, len);
        const tid = decoder.decode(tBuffer); // 还原 tid 数值
        offset += len;

        const vLen = dataView.getUint32(offset, true);
        offset += 4;
        const vBuffer = new Uint8Array(buffer, offset, vLen);
        let v = JSON.parse(decoder.decode(vBuffer)); // 还原 value 数据
        offset += vLen;

        const isArrayHistory = Array.isArray(v);
        if (isArrayHistory && v.length > 1) continue;

        if (isArrayHistory) v = v[0];

        values.push({
            id: tid,
            xxx: xxx,
            xxx: {
                value: v["kwargs"].content.at(-1).text,
                type: AnswerType.none,
            },
        });
    }
    self.postMessage({ value: values });
};

结语

以上的知识点，在流式响应与内存占用优化是非常重要的。

单击浏览区域，滑动鼠标查看更多内容哦~