I am trying to delegate the html rendering of a tree to a web worker. The tree is composed of nodes, each nodes has references to the next, previous and parent nodes.
The data that represents the tree is an array, containing all the root nodes. This array is post to the web worker as is, since the serializer of the web worker is supposed to support circular references.
When there's few nodes, everything goes well.
Using Chrome browser, when the number of nodes reaches a limit, the web worker do not receive anything ; its message's data is simply null. No error appears in the console.
With Firefox, IE and Edge, everything is OK. But I need Chrome to work to.
I tried to simplify my code and make a case test (see the jsFiddle below), and it appears that the problem comes from the circular reference to the next node. In this case test, with 100 elements everything goes well, with 1000 it doesn't work.
Is there any solution to this problem ? Is the only solution to change my code to remove circular references ?
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);
}
Link to jsFiddle : https://jsfiddle.net/jvr4a50r/
Google has recognized this issue to be a bug: https://bugs.chromium.org/p/chromium/issues/detail?id=825466
So far, to ensure having no problems, the only solution is to remove circular references in objects.
In this case I followed these steps: