Web Workers JSON的可转移对象

Question

HTML5Web worker在大型JSON对象上使用worker.postMessage时非常慢。我正在试图弄清楚如何将JSON对象传输给web worker --使用Chrome中的“可传输对象”类型，以提高速度。

这就是我所指的，看起来应该会把速度提高很多：http://updates.html5rocks.com/2011/12/Transferable-Objects-Lightning-Fast

我很难找到一个很好的例子(我不相信我想使用ArrayBuffer)。任何帮助都将不胜感激。

我的想象是这样的：

worker = new Worker('workers.js');

var large_json = {};
for(var i = 0; i < 20000; ++i){
   large_json[i] = i;
   large_json["test" + i] = "string";
};

//How to make this call to use Transfer Objects? Takes approx 2 seconds to serialize this for me currently.
worker.webkitPostMessage(large_json);

Answer 1

如果您必须从现有的Json数组从头开始构建，那么使用可转移对象将没有任何帮助(这非常接近于克隆...)

Json数据从何而来？将所有繁重工作保留在工作线程上的一种可能方法是让它使用XmlHttpRequest获取数据，转换数据并将其发送到UI线程。这样，克隆的高成本发生在工作线程上，虽然它将花费与在UI线程中相同的时间，但它不会阻塞您的应用程序。

Answer 2

我这样做了，我不知道这样做是好是坏，是理想还是最糟糕的方式。我就这么做了。在worker文件中

var data = e.data;
var string = String.fromCharCode.apply(null, new Uint16Array(data));
var objnow = JSON.parse(string);

在html文件中

function str2ab(str) {
   var buf = new ArrayBuffer(str.length*2); // 2 bytes for each char
   var bufView = new Uint16Array(buf);
   for (var i=0, strLen=str.length; i<strLen; i++) {
     bufView[i] = str.charCodeAt(i);
   }
   return buf;
 }
function stop() {
 var obj = {'cmd': 'stop', 'msg': 'Bye'};
 var str= JSON.stringify(obj);
 var arbfr = str2ab(obj);
 worker.postMessage(arbfr,[arbfr]);
}

现在它可以工作了，我可以发送json对象，传输。

Answer 3

虽然不使用“可转移对象”，但这可能会解决您的问题。

您也可以尝试优化您的数据表示。例如，您的示例需要大约1350ms来为我打包/解包(Google Chrome 19)，但以下代码的执行速度要快约25倍(50ms)：

console.time('json');
var a = [], test = [];
for(var i = 0; i < 20000; ++i){
   a.push(i);
   test.push("string");
};
var large_json = {
  a: a.join(','),
  test: test.join(',')
};
large_json = JSON.parse(JSON.stringify(large_json));
large_json.a = large_json.a.split(",");
large_json.test = large_json.test.split(",");
console.timeEnd('json');