Workers of the web - BrazilJS 2013

Thibault Imbert
Group Product Manager | Web Platform
Workers of
the Web
Thibault Imbert
@thibault_imbert
Friday, August 23, 13

Brazilian disco-funk

Brazil’s food

Estou me mudando para o Brasil

Adobe & the web?

Adobe & the web?
http://html.adobe.com/webplatform/

JavaScript concurrency

JavaScript concurrency
Multithreading

A single threaded world

Examples

Your budget
1000ms / 60fps = 16.67ms

A frame
Rendering (repaint, reﬂow, etc.)
Network (XHR)
JavaScript (misc logic)6ms
2ms
8ms
16ms
UI Thread

The budget
6ms
2ms
8ms
Budget
16ms
Network (XHR)
JavaScript (misc logic)
UI Thread

12ms
4ms
10ms
Budget
Over budget
26ms
Network (XHR)
UI Thread

Over budget
12ms
4ms
10ms
Budget
10ms
Network (XHR)
26ms
UI Thread
UI Impact

6ms
4ms
20ms
Budget
Over budget
30ms
Network (XHR)
UI impact
UI Thread

Dev tools
Time spent
Impact on fps

So how do we ﬁx that?

Web Workers

Detection

Detection
function supports_web_workers() {
return window.Worker != null;
}

Detection
function supports_web_workers() {
return window.Worker != null;
}
if (Modernizr.webworkers) {
// Workers are available
} else {
// fallback
}

Most common use case
1. Responsive programming
When you have an expensive computation to perform
and don’t want to block the UI.

By default, the UI thread
Rendering
Network
JavaScript6ms
2ms
8ms
16ms
UI Thread

In parallel
Rendering
Network
JavaScript6ms
2ms
8ms
16ms
UI Thread
(Thread 1)
10ms
Web Worker
(Thread 2)
JavaScript

In parallel
Rendering
Network
JavaScript6ms
2ms
8ms
16ms 28ms
JavaScript
UI Thread
(Thread 1)
Web Worker
(Thread 2)
Network

In parallel
Rendering
Network
JavaScript6ms
2ms
8ms
16ms 44ms
JavaScript
UI Thread
(Thread 1)
Web Worker
(Thread 2)
Network

In parallel
Rendering
Network
JavaScript6ms
2ms
8ms
16ms 44ms
UI Thread
(Thread 1)
Web Worker
(Thread 2)
Loading remote data
Parsing of XHR data
Encoding/Decoding
Physics
AI (pathﬁnding, etc.)

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

Web Workers == Threads ?
Workers and threads

1. Workers are higher-level than threads and safe
First diﬀerence

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?

var worker = new Worker("background.js");
JSVM Impact on memory
Slow instantiation time
Thread
Higher-level than threads
Own heap
and stack

2. Data passing
Second diﬀerence

Threads and memory
Shared memory
Thread 2
Thread 5
Thread 1
Thread 4
Thread 3

Threads and memory

With Web Workers, nothing is shared
var worker1 = new Worker("background-task-1.js");
Cloning
Cloning
Transfer of
ownership

1 Web Worker == 1 core ?
Workers and cores

Workers and cores
UI Thread
(Thread 1)
Web Worker
(Thread 2)
Time
Single CPU

Workers and cores
Time
Multicore
CPU
UI Thread
(Thread 1)
Web Worker
(Thread 2)

Workers and cores

Workers and cores
1. It is not possible to specify if a Web Worker
should run on a speciﬁc core.

Workers and cores
2. Web Workers on a single core CPU, will not run in
parallel but will still not block the UI.

Workers and cores
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.

mostra o código!

Creating a worker
// create a new worker

Background logic
self.postMessage('Hello from Web Worker!');
Current worker

Background logic
Current worker Send data

Background logic
// 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

Catching errors
var width = document.innerWidth;
self.postMessage(width);
worker.addEventListener('error', receiveMessage);

// callback handling the error
// outputs: Uncaught ReferenceError: document is not defined
{
}
Trying to access an object not available from a Worker

Data types supported for communication

Primitive types: Number, String, Boolean.

Primitive types: Number, String, Boolean.
Composite data types: plain JSON objects,
ImageData and TypedArray types.

Running expensive computation
worker.addEventListener('message', receiveMessage);

// callback handling the response, data is available in the event object
// outputs: 400000000
{
}
var slowSquare = function (n) {
var i = 0;
while (++i < n * n) {}
return i;
};
self.postMessage ( slowSquare( 20000 ) );

Data cloning
self.postMessage([1, 13, 34, 50]);
self.postMessage({name: Bob, age: 30});
self.postMessage([{name: Tom, age: 20}]);

Data cloning
Web Worker A Web Worker B
clone

Data cloning
var data = [1, 2, 3, 4]
clone

Data cloning
var data = [1, 2, 3, 4]
self.postMessage(data);
clone

Data cloning
var data = [1, 2, 3, 4]
[1, 13, 34, 50]
clone

Data cloning
var data = [1, 2, 3, 4]
[1, 13, 34, 50]
clone
data[2] = 100;

Data cloning
var data = [1, 2, 3, 4]
[1, 13, 34, 50]
clone
var incomingArray = e.data;
data[2] = 100;

Data cloning
var data = [1, 2, 3, 4]
[1, 13, 34, 50]
clone
// outputs: [1, 2, 3, 4]
console.log (incomingArray);
data[2] = 100;

Data cloning
var data = [1, 2, 3, 4]
[1, 13, 34, 50]
clone
// outputs: [1, 2, 3, 4]
data[2] = 100;
Overhead

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);

Platform Time (ms)
iOS7 (Safari/iPhone 5) 214
iOS6 (Safari/iPhone 4S) 524
MacBook Pro (Chrome/10.8.4) 75
Sending a 16mb typedarray

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]);

reference transferred
to Web Worker B

var data = [1, 2, 3, 4]
to Web Worker B

var data = [1, 2, 3, 4]
self.postMessage(uInt8View.buffer,
to Web Worker B

var data = [1, 2, 3, 4]
[uInt8View.buffer]);
to Web Worker B

var data = [1, 2, 3, 4]
to Web Worker B
// triggers runtime exception
uInt8View.buffer = 12;

var data = [1, 2, 3, 4]
to Web Worker B

var data = [1, 2, 3, 4]
to Web Worker B
// outputs: [1, 2, 3, 4]

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)

Exciting use case

Exciting use case
2. Parallel programming

Exciting use case
2. Parallel programming
When you want to leverage multiple CPU cores by
having computations running concurrently to solve a
speciﬁc task.

Parallelization

Parallelization
Worker 1 Worker 2
Worker 4Worker 3

But...
1. Cloning overhead is high and limits
parallelization opportunities.

But...
2. Transfer of ownership does not work for
parallelization.

But...
parallelization.
3. A more eﬃcient communication model has to
be designed for Web Workers to allow faster
communication.

But...
parallelization.
3. A more eﬃcient communication model has to
be designed for Web Workers to allow faster
communication.
Software transactional memory?

OK, let’s see if you remember the main points.

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?

@thibault_imbert
Blog: typedarray.org
obrigado!
Slides: http://bit.ly/13Lbk8d/
More details: http://bit.ly/14IWKKj

Workers of the web - BrazilJS 2013

More Related Content

Similar to Workers of the web - BrazilJS 2013 (20)

More from Thibault Imbert (7)

Recently uploaded (20)

Workers of the web - BrazilJS 2013