30

在大型 JSON 对象上使用 worker.postMessage 时，HTML 5 Web 工作者非常慢。我试图弄清楚如何将 JSON 对象传输到网络工作者 - 使用 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);
4

3 回答 3

2

如果您必须从现有的 Json 数组从头开始构建它，那么使用可转移对象将无济于事（这非常接近克隆......）

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

于 2013-07-07T15:06:39.357 回答
1

好的，我这样做了，我不知道这是好还是坏，理想还是最坏的方法。我刚刚做完。在工人档案中

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 对象，传输。

于 2013-06-17T19:37:21.607 回答
0

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

您也可以尝试优化您的数据表示。例如，您的示例需要 ~1350 毫秒为我打包/解包（Google Chrome 19），但以下代码的执行速度快了 ~25 倍（50 毫秒）：

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');
于 2012-08-01T07:10:10.543 回答