HTML and CSS Reference
In-Depth Information
In newer browsers (like Chrome), you can take your data types a step further and pass
binary data between workers. With transferable objects, data is transferred from one
context to another. It is zero-copy, which vastly improves the performance of sending
data to a worker.
When you transfer an ArrayBuffer from your main app to a worker, the original Ar
rayBuffer is cleared and is made no longer usable by the browser. Its contents are
transferred to the worker context.
Chrome version 8 and above also includes a new version of postMessage() that supports
transferable objects:
var uInt8Array = new Uint8Array ( new ArrayBuffer ( 10 ));
for ( var i = 0 ; i < uInt8Array . length ; ++ i ) {
uInt8Array [ i ] = i * 2 ; // [0, 2, 4, 6, 8,...]
worker . webkitPostMessage ( uInt8View . buffer , [ uInt8View . buffer ]);
Figure 9-1 shows how much faster data can travel between threads using transferable
objects. For example, 32MB of data makes a round trip from the worker back to the
parent in 2ms. Using previous methods, such as structured cloning, took upward of
300ms to copy the data between threads. To try this test for yourself, visit http://html5- .
Figure 9-1. Using Web Workers with transferable objects
A Practical Use Case: Pooling and Parallelizing Jobs
The following example, originally inspired by Jos Dirksen's thread pool example, gives
you a way to specify the number of concurrent workers (or threads). With this method,
browsers like Chrome can use multiple CPU cores when processing data concurrently,
and you can significantly increase your rendering time by up to 300%. You can view the
full demo here at , but the basic worker1.js file con‐
self . onmessage = function ( event ) {
var myobj = event . data ;
Search WWH ::

Custom Search