workers of the web - braziljs 2013

Thibault ImbertGroup Product Manager | Web Platform

Workers of the WebThibault Imbert@thibault_imbert

Friday, August 23, 13

Records


Brazilian disco-funk


Brazil’s food


Brazil


Estou me mudando para o Brasil


Adobe & the web?


Adobe & the web?

http://html.adobe.com/webplatform/




JavaScript concurrency


JavaScript concurrencyMultithreading


A single threaded world


Examples


Your budget

1000ms / 60fps = 16.67ms


A frame

Rendering (repaint, reflow, 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 fix that?


Web Workers


Support


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)


Network


In parallel

Rendering

Network

JavaScript6ms

2ms

8ms

16ms 44ms

JavaScript

UI Thread(Thread 1)


Network


In parallel

Rendering

Network

JavaScript6ms

2ms

8ms

16ms 44ms

UI Thread(Thread 1)


Loading remote data

Parsing of XHR dataEncoding/DecodingPhysicsAI (pathfinding, etc.)


Life as a worker

What is available:

XMLHttpRequestThe Application Cache

Spawning other web workersThe navigator object

The location object (read-only)setTimeout()/clearTimeout() and setInterval()/clearInterval()

Importing external scripts using the importScripts() method

What is not:

The DOMThe window object

The document objectThe parent object


Web Workers == Threads ?

Workers and threads


1. Workers are higher-level than threads and safe

First difference


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

JS VM Impact on memorySlow instantiation time

Thread

Higher-level than threads

Own heap and stack


2. Data passing

Second difference


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)


Tim

e

Single CPU


Workers and cores

Tim

e

Multicore CPU

UI Thread(Thread 1)



Workers and cores


Workers and cores

1. It is not possible to specify if a Web Worker should run on a specific 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 workervar worker = new Worker("background.js");


Background logic

self.postMessage('Hello from Web Worker!');


Current worker


Background logic



Current worker Send data


Background logic



// listen to the response from the Workerworker.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);


// listen to the response from the Workerworker.addEventListener('error', receiveMessage); // callback handling the error// outputs: Uncaught ReferenceError: document is not definedfunction receiveMessage (e){ console.log (e.data);}

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


// listen to the response from the Workerworker.addEventListener('message', receiveMessage); // callback handling the response, data is available in the event object// outputs: 400000000function receiveMessage (e){ console.log (e.data);}

var slowSquare = function (n) { var i = 0; while (++i < n * n) {} return i;};

self.postMessage ( slowSquare( 20000 ) );


Examples


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



[1, 13, 34, 50]clone


Data cloning



[1, 13, 34, 50]clone

data[2] = 100;


Data cloning



[1, 13, 34, 50]clone

var incomingArray = e.data;

data[2] = 100;


Data cloning



[1, 13, 34, 50]clone

var incomingArray = e.data;// outputs: [1, 2, 3, 4] console.log (incomingArray);data[2] = 100;


Data cloning



[1, 13, 34, 50]clone

var incomingArray = e.data;// outputs: [1, 2, 3, 4] console.log (incomingArray);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 workerworker.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



// 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 workerworker.postMessage(uInt8View.buffer, [uInt8View.buffer]);




reference transferred to Web Worker B



var data = [1, 2, 3, 4]





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





var data = [1, 2, 3, 4]self.postMessage(uInt8View.buffer, [uInt8View.buffer]);








// triggers runtime exceptionuInt8View.buffer = 12;






var incomingArray = e.data;







var incomingArray = e.data;// outputs: [1, 2, 3, 4] console.log (incomingArray);



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

specific task.


Parallelization


Parallelization

Worker 1 Worker 2

Worker 4Worker 3


But...


But...

1. Cloning overhead is high and limits parallelization opportunities.


But...


2. Transfer of ownership does not work for parallelization.


But...



3. A more efficient communication model has to be designed for Web Workers to allow faster

communication.


But...



3. A more efficient 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


http://bit.ly/13Lbk8d/

http://bit.ly/13Lbk8d/

http://bit.ly/14IWKKj

http://bit.ly/14IWKKj

workers of the web - braziljs 2013

Technology

ms ui thread thread

ms javascript ui thread

ms web worker thread

ms rendering

ms budget

cores ui thread thread

ms ui thread ui impact

web workers