是否将JSON.parse委托给值得信赖的Web worker(在Chrome Extension/FF Addon中)？

Question

我正在编写一个Chrome扩展程序,它可以在浏览器的localStorage中存储大量数据,并在每次加载页面时对其进行解析.现在,随着数据大小的增加,页面加载时间/性能开始降低.所以我想把解析委托给一个web worker.但我怀疑它是否值得.我能做的就是将我的字符串传递给像这样的工人.

worker.postMessage(localStorage['myObj']);

我计划将此字符串解析为JSON并将其发送回主线程,就像这样

worker.onMessage(function(myObj){
    //Then Play around with my object here.
});

但是当我搜索这个方法的性能方面,包括消息发布和监听开销,以及某些浏览器不允许在消息中发送JSON对象以及一些在发送时自动序列化的事实时,我怀疑这种方法是否值得.

由于我的应用只是Chrome扩展程序和Firefox插件,我只关注这两种浏览器.如果这种方法适合这两种浏览器,有人可以建议我吗？

Answer 1

目前接受的答案是不正确的.完成你所询问的事情是完全可行的,例如下面的例子.

是否值得做的事情是您必须在真实场景中检查真实数据.将JSON文本发送给worker并将其发送回解析后的结果(这可能涉及一些不完整的序列化,尽管它可能不是JSON),并且现代浏览器非常快速地解析JSON会产生开销.

我怀疑开销是不值得的,但也许是在巨大的JSON字符串上,如果浏览器的本机序列化机制比JSON快得多,或者发生在主UI线程以外的线程上,也许可能就是这样.

使用worker解析JSON的示例:

// This stands in for 'worker.js':
var blob = new Blob([
  'this.onmessage = function(message) {\n' +
    'postMessage(JSON.parse(message.data));\n' +
  '};'
  ], { type: "text/javascript" });
var workerUrl = URL.createObjectURL(blob);

// Main script:
var w = new Worker(workerUrl/*"worker.js"*/);
w.onmessage = function(message) {
    display("Got response: typeof message.data: " + typeof message.data);
    display("message.data.for = " + message.data.foo);
};

display('Posting JSON \'{"foo":"bar"}\' to worker');
w.postMessage('{"foo":"bar"}');

function display(msg) {
    var p = document.createElement('p');
    p.innerHTML = String(msg);
    document.body.appendChild(p);
}

body {
  font-family: monospace;
}

结果:

Posting JSON '{"foo":"bar"}' to worker
Got response: typeof message.data: object
message.data.for = bar

Answer 2

只能在 WebWorkers 之间传递字符串，而不能传递对象。如果您在 WebWorker 中将字符串解析为 JSON 对象，则需要对该对象进行字符串化，然后在将其从工作线程传递到主脚本时重新解析它。显然，这会导致 JSON 不必要地进行双重解析，因此是一个坏主意。

2017 更新：现在不仅仅允许使用字符串。请参阅一些（较新的）答案和评论以供参考。