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?

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

UI Thread

The budget

Budget

Network (XHR)

JavaScript (misc logic)

UI Thread

Budget

Over budget

Network (XHR)

UI Thread

Over budget

Budget

Network (XHR)

UI Thread

UI Impact

Budget

Over budget

Network (XHR)

UI impact

UI Thread

Dev tools

Time spent

Impact on fps

So how do we fix that?

Web Workers

Support

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

UI Thread

In parallel

Rendering

Network

JavaScript6ms

UI Thread(Thread 1)

Web Worker(Thread 2)

JavaScript

In parallel

Rendering

Network

JavaScript6ms

16ms 28ms

JavaScript

UI Thread(Thread 1)

Network

In parallel

Rendering

Network

JavaScript6ms

16ms 44ms

JavaScript

UI Thread(Thread 1)

Network

In parallel

Rendering

Network

JavaScript6ms

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

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

Transfer of ownership

1 Web Worker == 1 core ?

Workers and cores

UI Thread(Thread 1)

Single CPU

Workers and cores

Multicore CPU

UI Thread(Thread 1)

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.

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

Data cloning

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

Data cloning

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

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

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

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...

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?

To summarize

@thibault_imbert

Blog: typedarray.org

obrigado!

Slides: http://bit.ly/13Lbk8d/More details: http://bit.ly/14IWKKj

Workers of the web - BrazilJS 2013

Technology

Transcript of Workers of the web - BrazilJS 2013

Desafios de Performance Web - BrazilJS

Responsible Electronics 2013: Student Workers

Michigan Workers Organizing Committee 2013 Form LM-2

Connect Show Temporary Foreign Workers seminar-October 2013

Foreign Workers Rights 2013 Israel

Older workers and generational differences May 2013

The Vanishing Middle: Job Polarization and Workers’ Response to …journalistsresource.org/wp-content/uploads/2013/05/... · 2013. 5. 29. · workers, in stride with labor demand,

TMA World Blog 2013 Managing Remote Workers - Some Tips

commercial construction workers Physical activity and loading …centerforworkhealth.sph.harvard.edu/sites/default/files/... · 2013. 4. 27. · commercial construction workers ...

Georgia Electric Membership Corporation Workers’ Compensation Fund November 5, 2013 GEMC Workers’ Compensation Fund Trustee Meeting.

School Social Workers Evaluation Process Training 2012-2013

Can we make es6 the baseline of the “modern web”? - BrazilJS 2105

SAM WORKERS' COMPENSATION CHAPTER 2500 INDEX · SAM—WORKERS' COMPENSATION Rev 424 DECEMBER 2013 STATE WORKERS' COMPENSATION 2580.1 (Revised 12/13) The State Workers' Compensation

The Workers’ Compensation Act, 2013, SS 2013, c W-17.11 · Workers’ Compensation Act, 2013 ... and have thereby been incorporated into the corresponding Acts. ... 29 Presumption

July 2013 Health Care Workers Unprotected

WORKERS’ COMPENSATION DATA BOOK 2003 - Department of Labor and Industrial Relations · 2013-03-02 · WORKERS' COMPENSATION DATA BOOK 2003 INTRODUCTION The WORKERS’ COMPENSATION

School Social Workers Evaluation Process Training 2012-2013.

Annual General Meeting 2013/14€¦ · Workers Certificated in Learnerships 844 Partially Achieved Workers Certificated in Bursary 171 Achieved Workers Certificated in Skills Programmes

BrazilJS MDN

AFF - Mexico Guest Workers-BHHM-SDI 2013-Paperless