将Javascript 2d数组转换为ArrayBuffer

Question

我正在尝试使用Web Workers处理大量数据，并且在将数据传递回主线程进行显示时，我想使用可转移对象来减少对UI线程的影响。

该过程当前导致一个多维数组，该数组也可以包含对象。 例如：

[{foo: [{bar: "Alice",
         car: 23,
         dab: [2, 3, 5]}],
  faa: [{moo: {a: [2,3], b: [4,5]} },
        {moo: {a: [6,7], b: [8,9]} }]},
 {foo: [{bar: "John",
         car: 33,
         dab: [6, 7, 1]}],
  faa: [{moo: {a: [5,5], b: [9,2]} },
        {moo: {a: [7,7], b: [4,2]} }]},
 ...]

我已经看过此字符串转换文章，但是再次，我看不到如何直接将其应用于我的数组结构： 在字符串和ArrayBuffers之间进行转换

感谢帮助！

Answer 1

很多人在理解这一点上有困难。 因此，让我给您一个有关您的选择及其作用的图片：

（a）对数据使用普通的postMessage

var object = { ... };
worker.postMessage(object);

1. [主线程]创建结构化克隆对象
2. [主线程]以递归方式将数据从object复制到结构化克隆
3. [主线程]将对象发布到[工作者]
4. [工作者]从结构化克隆中创建新对象。
5. [工作者]使用对象作为参数发送新消息

请注意， 创建和解析结构化克隆是通过优化的本机代码完成的。

（b）将数据转换为可转让

var object = { ... };
var binary = CreateTypedArrayFromObject(object);
worker.postMessage(binary.buffer, [binary.buffer]);

1. [主线程]运行缓慢的javascript代码，将object转换为TypedArray
2. [主线程]涉及到首先计算对象大小，或者创建许多类型化数组并将它们连接在一起
3. [主线程]将TypedArray的ArrayBuffer TypedArray [Worker]
4. [工作者]接收ArrayBuffer
5. [工作者]使用对象作为参数发送新消息
6. [工作者]运行javascript代码创建新对象，丢弃接收到的数组缓冲区

---

我要指出的是，您想避免复制，但是您仍在复制，只是这次不是本机而是javascript。 如果要优化，则必须设计数据结构，以使其在类型数组上运行。 如果没有，甚至不要尝试使用它们-您只会在代码中添加额外的开销。