将 JSON.parse 委派给网络工作者是否值得（在 Chrome 扩展/FF 插件中）？

Question

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

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;
}

结果：

将 JSON '{"foo":"bar"}' 发布到工作人员 得到响应：typeof message.data: object message.data.for = bar

Answer 2

只有字符串，而不是对象，可以传入和传出 WebWorkers。如果您将字符串解析为 WebWorker 中的 JSON 对象，则需要将该对象字符串化，然后在将其从 worker 传递到主脚本时重新解析它。显然，这会导致 JSON 不必要地被双重解析，因此是个坏主意。

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