Web Workers - Transferable Objects for JSON

Question

HTML 5 Web workers are very slow when using worker.postMessage on a large JSON object. I'm trying to figure out how to transfer a JSON Object to a web worker - using the 'Transferable Objects' types in Chrome, in order to increase the speed of this.

Here is what I'm referring to and appears it should speed this up quite a bit: http://updates.html5rocks.com/2011/12/Transferable-Objects-Lightning-Fast

I'm having trouble finding a good example of this (and I don't believe I want to use an ArrayBuffer). Any help would be appreciated.

I'm imagining something like this:

worker = new Worker('workers.js');

var large_json = {};
for(var i = 0; i < 20000; ++i){
   large_json[i] = i;
   large_json["test" + i] = "string";
};

//How to make this call to use Transfer Objects? Takes approx 2 seconds to serialize this for me currently.
worker.webkitPostMessage(large_json);

Answer 1

Using a transferable object won't help if you have to build it from scratch from an existing Json array (That's very close to cloning...)

Where does the Json data comes from? One possible way to keep all the hard work on the worker thread is to have it fetch the data using XmlHttpRequest, transform it and send it to the UI thread. This way, the high cost of cloning occurs on the worker thread and while it will take the same time as it would in the UI thread, it won't block your app.