javascript - 将带有循环引用的数据传递给 Chrome 上的 javascript web worker

Question

我正在尝试将树的 html 呈现委托(delegate)给网络 worker 。树由节点组成，每个节点都有对下一个、上一个和父节点的引用。

表示树的数据是一个数组，包含所有的根节点。该数组按原样发送给 Web Worker，因为 Web Worker 的序列化器应该支持循环引用。

节点少的时候一切顺利。

使用 Chrome 浏览器，当节点数量达到限制时，web worker 不会接收到任何东西；它的消息数据只是空的。控制台中没有出现错误。

使用 Firefox、IE 和 Edge，一切正常。但我需要 Chrome 才能正常工作。

我试图简化我的代码并进行案例测试(参见下面的jsFiddle)，看来问题来自对下一个节点的循环引用。 在这个案例测试中，100 个元素一切顺利，1000 个元素不起作用。

这个问题有解决办法吗？ 更改我的代码以删除循环引用的唯一解决方案是什么？

HTML:

<p><button id='btn_100'>Test 100</button><button id='btn_1000'>Test 1000</button></p>

Javascript:

var workerCode = "self.onmessage = function(e) { self.postMessage(e.data ? 'ok ' + e.data.length : 'ko : null data'); };",
    blob = new Blob([workerCode], {type: 'text/javascript'}),
    blobUrl = URL.createObjectURL(blob),
    worker = new Worker(blobUrl);

var btn_100 = document.getElementById('btn_100'),
    btn_1000 = document.getElementById('btn_1000');

worker.onmessage = function(e) {
     var log = document.createElement('p');
     log.innerHTML = 'Response: <pre>' + e.data + '</pre>';
     document.body.appendChild(log);
 };

btn_100.onclick = function() { send(worker, 100); };
btn_1000.onclick = function() { send(worker, 1000); };

function send(w, n) {
    var a = [];
    for (var i = 0; i < n; i++) {
      a.push({});
      if (i > 0) a[i - 1].next = a[i];
    }
    w.postMessage(a);
}

jsFiddle 链接:https://jsfiddle.net/jvr4a50r/

Answer 1

Google 已将此问题识别为错误: https://bugs.chromium.org/p/chromium/issues/detail?id=825466

到目前为止，要确保没有问题，唯一的解决办法是去除对象中的循环引用。

在这种情况下，我遵循了以下步骤:

• 给每个节点一个唯一的id
• 通过将所有节点放在“hasmap”中来展平树，关键是唯一的 id
• 在节点中，用唯一id替换所有对其他节点的引用
• 当然还要更改所有使用引用通过 hashmap 间接访问对象的代码