javascript - 如何有效地连接 Uint8Array？

Question

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

目前，我正在将所有数据连接到一个简单的 Array 中，并在完成后将所有数据转换为 Uint8Array。我想使用 Uint8Array 在内存和效率方面会更好，但我没有想出如何在创建数据时连接数据。

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

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

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

Answer 1

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

uint8stream = new Uint8Array(stream.length + graphicsControlExtension.length + imageDescriptor.length);
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. 像this 那样编写自己的concat 方法文章