javascript - webworker的postMessage如何传递大对象？

Question

我读到过使用 web worker 的 postmessage 可以非常快速地传输可传输对象。根据this可传输对象是 arraybuffer 或 messageport。

问题是，我如何将大型 (30 mb) 的任意对象转换为可传输对象并将其作为参数传递给 postmessage。据我了解，我可以将数组转换为 json 字符串，然后将 json 字符串转换为原始字节数据并将其存储在数组对象中。然而，这似乎违背了快速传输的目的。

有人可以启发我将对象作为可转移对象传递，或者是否可能？

提前致谢!

Answer 1

这种误解在这里反复出现。您想象可以编写一些快速 javascript 代码 将您的大对象转换为可转移对象。但确实，正如您所说，您编写的任何转换代码都违背了目的。数据越复杂，速度损失就越大。

对象通常(当不 传输时)由原生 structured clone algorithm 转换(它使用实现定义的格式并且肯定是最佳的)。您编写的任何 JavaScript 代码很可能都比结构化克隆慢，同时实现相同的目标 - 以二进制形式传输数据。

可传输对象的目的是允许传输二进制数据，例如图像(来自 Canvas )、音频或视频。这些数据无需经过结构化克隆算法的处理就可以进行传输，这就是为什么要增加transferable接口(interface)的原因。即使对这些影响也微不足道 - 请参阅 answer about transferable speed .

作为最后的说明，我编写了一个基于原型(prototype)的库，用于将 javascript 对象转换为 ArrayBuffer 并返回。它比较慢，尤其是对于像 JSON 这样的数据。它的优点(以及您编写的任何类似代码的优点)是:

1. 您可以定义自定义对象转换
2. 您可以使用继承(例如，发送您自己的类型，如 Foo)

传输JSON类对象的代码

如果您的数据类似于 JSON，请坚持使用结构化克隆并且不要传输。如果您不相信我，请使用此代码对其进行测试。你会发现它比正常的 postMessage 慢。

var object = {dd:"ddd", sub:{xx:"dd"}, num:666};
var string = JSON.stringify(object);
var uint8_array = new TextEncoder(document.characterSet.toLowerCase()).encode(string);
var array_buffer = uint8_array.buffer;
// now transfer array buffer
worker.postMessage(array_buffer, [array_buffer])

相反的转换，考虑到你有一些ArrayBuffer:

// Let me just generate some array buffer for the simulation
var array_buffer = new Uint8Array([123,34,100,100,34,58,34,100,100,100,34,44,34,115,117,98,34,58,123,34,120,120,34,58,34,100,100,34,125,44,34,110,117,109,34,58,54,54,54,125]).buffer;
// Now to the decoding
var decoder = new TextDecoder("utf-8");
var view = new DataView(array_buffer, 0, array_buffer.byteLength);
var string = decoder.decode(view);
var object = JSON.parse(string);