31. Most common use case
1. Responsive programming
When you have an expensive computation to perform
and don’t want to block the UI.
Friday, August 23, 13
32. By default, the UI thread
Rendering
Network
JavaScript6ms
2ms
8ms
16ms
UI Thread
Friday, August 23, 13
37. Life as a worker
What is available:
XMLHttpRequest
The Application Cache
Spawning other web workers
The navigator object
The location object (read-only)
setTimeout()/clearTimeout() and setInterval()/clearInterval()
Importing external scripts using the importScripts() method
What is not:
The DOM
The window object
The document object
The parent object
Friday, August 23, 13
38. Web Workers == Threads ?
Workers and threads
Friday, August 23, 13
39. 1. Workers are higher-level than threads and safe
First difference
Friday, August 23, 13
40. Why not threads?
Threads are hard to use.
Too low-level for web development.
We should not expose that level of complexity to web developers.
Locks, manual synchronization, race conditions, really?
Friday, August 23, 13
41. var worker = new Worker("background.js");
JSVM Impact on memory
Slow instantiation time
Thread
Higher-level than threads
Own heap
and stack
Friday, August 23, 13
46. With Web Workers, nothing is shared
var worker1 = new Worker("background-task-1.js");
var worker3 = new Worker("background-task-3.js");
var worker2 = new Worker("background-task-2.js");
Cloning
Cloning
Transfer of
ownership
Friday, August 23, 13
47. 1 Web Worker == 1 core ?
Workers and cores
Friday, August 23, 13
48. Workers and cores
UI Thread
(Thread 1)
Web Worker
(Thread 2)
Time
Single CPU
Friday, August 23, 13
51. Workers and cores
1. It is not possible to specify if a Web Worker
should run on a specific core.
Friday, August 23, 13
52. Workers and cores
1. It is not possible to specify if a Web Worker
should run on a specific core.
2. Web Workers on a single core CPU, will not run in
parallel but will still not block the UI.
Friday, August 23, 13
53. Workers and cores
1. It is not possible to specify if a Web Worker
should run on a specific core.
2. Web Workers on a single core CPU, will not run in
parallel but will still not block the UI.
3. On a multicore CPU, Web Workers can run truly in
parallel if the OS decides to.
Friday, August 23, 13
58. Background logic
self.postMessage('Hello from Web Worker!');
// create a new worker
var worker = new Worker("background.js");
// listen to the response from the Worker
worker.addEventListener('message', receiveMessage);
// callback handling the response, data is available in the event object
// outputs: Hello from Web Worker!
function receiveMessage (e)
{
console.log (e.data);
}
Current worker Send data
Friday, August 23, 13
59. Catching errors
var width = document.innerWidth;
self.postMessage(width);
// create a new worker
var worker = new Worker("background.js");
// listen to the response from the Worker
worker.addEventListener('error', receiveMessage);
// callback handling the error
// outputs: Uncaught ReferenceError: document is not defined
function receiveMessage (e)
{
console.log (e.data);
}
Trying to access an object not available from a Worker
Friday, August 23, 13
61. Data types supported for communication
Primitive types: Number, String, Boolean.
Friday, August 23, 13
62. Data types supported for communication
Primitive types: Number, String, Boolean.
Composite data types: plain JSON objects,
ImageData and TypedArray types.
Friday, August 23, 13
63. Running expensive computation
// create a new worker
var worker = new Worker("background.js");
// listen to the response from the Worker
worker.addEventListener('message', receiveMessage);
// callback handling the response, data is available in the event object
// outputs: 400000000
function receiveMessage (e)
{
console.log (e.data);
}
var slowSquare = function (n) {
var i = 0;
while (++i < n * n) {}
return i;
};
self.postMessage ( slowSquare( 20000 ) );
Friday, August 23, 13
65. Data cloning
self.postMessage('Hello from Web Worker!');
self.postMessage([1, 13, 34, 50]);
self.postMessage({name: Bob, age: 30});
self.postMessage([{name: Tom, age: 20}]);
Friday, August 23, 13
67. Data cloning
var data = [1, 2, 3, 4]
Web Worker A Web Worker B
clone
Friday, August 23, 13
68. Data cloning
var data = [1, 2, 3, 4]
self.postMessage(data);
Web Worker A Web Worker B
clone
Friday, August 23, 13
69. Data cloning
var data = [1, 2, 3, 4]
self.postMessage(data);
Web Worker A Web Worker B
[1, 13, 34, 50]
clone
Friday, August 23, 13
70. Data cloning
var data = [1, 2, 3, 4]
self.postMessage(data);
Web Worker A Web Worker B
[1, 13, 34, 50]
clone
data[2] = 100;
Friday, August 23, 13
71. Data cloning
var data = [1, 2, 3, 4]
self.postMessage(data);
Web Worker A Web Worker B
[1, 13, 34, 50]
clone
var incomingArray = e.data;
data[2] = 100;
Friday, August 23, 13
72. Data cloning
var data = [1, 2, 3, 4]
self.postMessage(data);
Web Worker A Web Worker B
[1, 13, 34, 50]
clone
var incomingArray = e.data;
// outputs: [1, 2, 3, 4]
console.log (incomingArray);
data[2] = 100;
Friday, August 23, 13
73. Data cloning
var data = [1, 2, 3, 4]
self.postMessage(data);
Web Worker A Web Worker B
[1, 13, 34, 50]
clone
var incomingArray = e.data;
// outputs: [1, 2, 3, 4]
console.log (incomingArray);
data[2] = 100;
Overhead
Friday, August 23, 13
74. Sending a 16mb typedarray with cloning
// Create a 16MB "file" and fill it.
var uInt8View = new Uint8Array(1024*1024*16);
for (var i = 0; i < uInt8View.length; ++i) {
uInt8View[i] = i;
}
// transfer ownership to the worker
worker.postMessage(uInt8View.buffer);
Friday, August 23, 13
75. Platform Time (ms)
iOS7 (Safari/iPhone 5) 214
iOS6 (Safari/iPhone 4S) 524
MacBook Pro (Chrome/10.8.4) 75
Sending a 16mb typedarray
Friday, August 23, 13
76. Transfer of ownership
// Create a 16MB "file" and fill it.
var uInt8View = new Uint8Array(1024*1024*16);
for (var i = 0; i < uInt8View.length; ++i) {
uInt8View[i] = i;
}
// transfer ownership to the worker
worker.postMessage(uInt8View.buffer, [uInt8View.buffer]);
Friday, August 23, 13
77. Transfer of ownership
Web Worker A Web Worker B
reference transferred
to Web Worker B
Friday, August 23, 13
78. Transfer of ownership
var data = [1, 2, 3, 4]
Web Worker A Web Worker B
reference transferred
to Web Worker B
Friday, August 23, 13
79. Transfer of ownership
var data = [1, 2, 3, 4]
self.postMessage(uInt8View.buffer,
Web Worker A Web Worker B
reference transferred
to Web Worker B
Friday, August 23, 13
80. Transfer of ownership
var data = [1, 2, 3, 4]
self.postMessage(uInt8View.buffer,
[uInt8View.buffer]);
Web Worker A Web Worker B
reference transferred
to Web Worker B
Friday, August 23, 13
81. Transfer of ownership
var data = [1, 2, 3, 4]
self.postMessage(uInt8View.buffer,
[uInt8View.buffer]);
Web Worker A Web Worker B
reference transferred
to Web Worker B
// triggers runtime exception
uInt8View.buffer = 12;
Friday, August 23, 13
82. Transfer of ownership
var data = [1, 2, 3, 4]
self.postMessage(uInt8View.buffer,
[uInt8View.buffer]);
Web Worker A Web Worker B
reference transferred
to Web Worker B
var incomingArray = e.data;
// triggers runtime exception
uInt8View.buffer = 12;
Friday, August 23, 13
83. Transfer of ownership
var data = [1, 2, 3, 4]
self.postMessage(uInt8View.buffer,
[uInt8View.buffer]);
Web Worker A Web Worker B
reference transferred
to Web Worker B
var incomingArray = e.data;
// outputs: [1, 2, 3, 4]
console.log (incomingArray);
// triggers runtime exception
uInt8View.buffer = 12;
Friday, August 23, 13
84. Transfer of ownership, almost a 3x boost
Platform Time (ms)
iOS7 (Safari/iPhone 5) 80 (was 214)
iOS6 (Safari/iPhone 4S) 162 (was 524)
MacBook Pro (Chrome/10.8.4) 37 (was 75)
Friday, August 23, 13
87. Exciting use case
2. Parallel programming
When you want to leverage multiple CPU cores by
having computations running concurrently to solve a
specific task.
Friday, August 23, 13
93. But...
1. Cloning overhead is high and limits
parallelization opportunities.
2. Transfer of ownership does not work for
parallelization.
Friday, August 23, 13
94. But...
1. Cloning overhead is high and limits
parallelization opportunities.
2. Transfer of ownership does not work for
parallelization.
3. A more efficient communication model has to
be designed for Web Workers to allow faster
communication.
Friday, August 23, 13
95. But...
1. Cloning overhead is high and limits
parallelization opportunities.
2. Transfer of ownership does not work for
parallelization.
3. A more efficient communication model has to
be designed for Web Workers to allow faster
communication.
Software transactional memory?
Friday, August 23, 13
97. OK, let’s see if you remember the main points.
Friday, August 23, 13
98. To summarize
1. Leverage Web Workers if you don’t want your UI
to lock: true or false?
2. Web Workers are available pretty much
everywhere on desktop and mobile: true or false?
3. Web Workers are as low-level as threads: true
or false?
4. Message cloning is faster than transfer of
ownership: true or false?
5. Web Workers work great to keep the UI
responsive: true or false?
6. Parallel programming and responsive
programming are the same things: true or false?
Friday, August 23, 13
99. To summarize
1. Leverage Web Workers if you don’t want your UI
to lock: true or false?
2. Web Workers are available pretty much
everywhere on desktop and mobile: true or false?
3. Web Workers are as low-level as threads: true
or false?
4. Message cloning is faster than transfer of
ownership: true or false?
5. Web Workers work great to keep the UI
responsive: true or false?
6. Parallel programming and responsive
programming are the same things: true or false?
Friday, August 23, 13
100. To summarize
1. Leverage Web Workers if you don’t want your UI
to lock: true or false?
2. Web Workers are available pretty much
everywhere on desktop and mobile: true or false?
3. Web Workers are as low-level as threads: true
or false?
4. Message cloning is faster than transfer of
ownership: true or false?
5. Web Workers work great to keep the UI
responsive: true or false?
6. Parallel programming and responsive
programming are the same things: true or false?
Friday, August 23, 13
101. To summarize
1. Leverage Web Workers if you don’t want your UI
to lock: true or false?
2. Web Workers are available pretty much
everywhere on desktop and mobile: true or false?
3. Web Workers are as low-level as threads: true
or false?
4. Message cloning is faster than transfer of
ownership: true or false?
5. Web Workers work great to keep the UI
responsive: true or false?
6. Parallel programming and responsive
programming are the same things: true or false?
Friday, August 23, 13
102. To summarize
1. Leverage Web Workers if you don’t want your UI
to lock: true or false?
2. Web Workers are available pretty much
everywhere on desktop and mobile: true or false?
3. Web Workers are as low-level as threads: true
or false?
4. Message cloning is faster than transfer of
ownership: true or false?
5. Web Workers work great to keep the UI
responsive: true or false?
6. Parallel programming and responsive
programming are the same things: true or false?
Friday, August 23, 13
103. To summarize
1. Leverage Web Workers if you don’t want your UI
to lock: true or false?
2. Web Workers are available pretty much
everywhere on desktop and mobile: true or false?
3. Web Workers are as low-level as threads: true
or false?
4. Message cloning is faster than transfer of
ownership: true or false?
5. Web Workers work great to keep the UI
responsive: true or false?
6. Parallel programming and responsive
programming are the same things: true or false?
Friday, August 23, 13
104. To summarize
1. Leverage Web Workers if you don’t want your UI
to lock: true or false?
2. Web Workers are available pretty much
everywhere on desktop and mobile: true or false?
3. Web Workers are as low-level as threads: true
or false?
4. Message cloning is faster than transfer of
ownership: true or false?
5. Web Workers work great to keep the UI
responsive: true or false?
6. Parallel programming and responsive
programming are the same things: true or false?
Friday, August 23, 13