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
http://html5e.org/example/workers
, but the basic
worker1.js
file con‐
tains:
self
.
onmessage
=
function
(
event
)
{
var
myobj
=
event
.
data
;