Web employee disables Chrome tab when transferring a large array of objects with array buffers

Question

I have an application that generates a lot of data. This data must be processed before using it (WebGL 3D application). So I created a web worker to handle so as not to block the rest of the user interface.

The problem is that when the data is large enough, the very first call to launch the web worker will cause the bookmark to fail in Chrome and display the message “Aw, Snap”. I set breakpoints at the very beginning of the web worker, and it does not even fall into the web worker. It seems to crash when trying to clone data to call postMessage ().

Here is the general data structure (trying to pass an array to a web worker):

function MyClass(id) { var count32 = getSize(); var count16 = count32 * 3; this.uint16 = new Uint16Array(count16); // array buffer 1 this.float32_a = new Float32Array(count32); // array buffer 2 this.float32_b = new Float32Array(count32); // array buffer 3 this.a = id; this.b = count32; this.c = new MyInnerClass(); this.d = true; this.e = 6; this.f = {a: 1, b: 2, c: 3, d: 4}; this.g = []; } function MyInnerClass() { this.a = -10; this.b = -20; this.c = -30; this.d = 10 this.e = 20 this.f = 30 } 

The problem is with the buffers of arrays 1, 2 and 3. I have an array of MyClass objects, about 15,000 and about 97% of the array buffers have less than 200 elements. But for the remaining 3%, the array buffers have from 1,000 to 40,000 elements.

Interestingly, if I comment on any 2 array buffers, postMessage () containing classes will work.

Another interesting point: if I clicked the "Pause at startup" checkbox in dev tools in Chrome, postMessage () will work even with all 3 array buffers. Otherwise, it will fail every time.

Does anyone know why this is happening? I could not find documents on data restrictions that I could inflict, or other strange internal oddities. Otherwise, I am going to finish refactoring my code quite a bit to get around this.

DEMO: I created jsfiddle to demonstrate this: http://jsfiddle.net/GmvyJ/11/

If you change the maximum data size in this script (up to 15,000), do not save it this way, otherwise you will never be able to get to the page again.

Answer 1

Have you tried transferring data to the Worker stream using Transfer of Ownership. This is especially useful when you pass large Array buffers, for which you need to modify the call to postMessage with one additional argument postMessage(ObjectToTransfer,[ObjectToTransfer.buffer,.....]);

That way you can clone the whole object, but pass Array Buffers to that object.

Checkout Using Web Worker Portable Objects