如何有效地连接 Uint8Array？答案

【问题标题】：How to effectively concat Uint8Array?如何有效地连接 Uint8Array？
【发布时间】：2020-03-18 14:55:55
【问题描述】：

我正在尝试在浏览器上从头开始创建 GIF 图像。这一切都有效，但它需要很多时间来构建感觉平淡无奇的小图像。（高端 proc 上 300x200 和 100 帧需要 2.6 秒）

目前，我将所有数据连接成一个简单的Array，并在完成后将所有数据转换成一个Uint8Array。我想使用Uint8Array 会更好地提高内存和效率，但我没有弄清楚如何在创建数据时连接我的数据。

我每次都尝试重新创建Uint8Array，但这显然会降低性能。我尝试使用Stream，但从未成功。

// kinda concat
stream = new Uint8Array([
    ...stream,
    ...graphicControlExtension,
    ...imageDescriptor,
]);

MDN Stream 的例子只是令人困惑，所以如果有人能指出我正确的方向，那就太棒了。 =D

【问题讨论】：

stream、graphicControlExtension 等是什么？字符串，其他数组？
这就是我的问题的重点。截至目前，他们是Array，但连接所有内容需要太长时间 IMO。应该有更好的办法。

标签： javascript performance memory gif typed-arrays

【解决方案1】：

如果您的所有变量都是 uint 8 数组（stream、graphicControlExtension、imageDescriptor），请使用 set 方法。

uint8stream = new Uint8Array([]);
uint8stream.set(stream);
uint8stream.set(graphicControlExtension, stream.length);
uint8stream.set(imageDescriptor, stream.length + graphicControlExtension.length);

否则你应该先转换它们

更新：要提高它，您可以：
1) 尝试使用 push 而不是 concat
2）尝试使用lodash.concat（比Array.prototype.concat更快）
3）编写自己的 concat 方法，如this 文章中

【讨论】：

这与我的示例代码相同。您只需创建一个新的Uint8Array 并用值填充它，否则我会遗漏一些东西。
我试过push，结果相同。我也只是尝试制作一个自定义的 concat 方法，结果相同。我的问题是（我认为）我正在处理很多值，而不是 push/concat/spread 不是高性能的。我想我应该使用Streams，但我不知道如何。