json - 将 JSON.parse 委派给网络 worker 是否值得(在 Chrome 扩展/FF 插件中)？

Question

我正在编写一个 Chrome 扩展程序，它将大量数据存储在浏览器的 localStorage 中，并在每次页面加载时对其进行解析。现在随着数据大小的增加，页面加载时间/性能开始下降。所以我想将解析委托(delegate)给网络 worker 。但我怀疑它是否值得。我能做的就是将我的字符串传递给这样的 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 字符串上，如果浏览器的 native 序列化机制比 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