Amitesh Madhur - Web workers, HTML 5

1

WEB WORKERS

var worker = new Worker(‘MyWork.js');

worker.addEventListener('message', function(e) { document.getElementById(‘heading').textContent (e.data);}, false);worker.postMessage(‘WEB WORKERS');

onmessage = function(e) {

postMessage(e.data);

}

Amitesh Madhur (amitesh@yahoo-inc.com)(Exceptional Performance, Bangalore)

2

for(;;;){

// Perceived performance of the UI}

UI Blocked for 100 milliseconds == Perceived

performance

page is slow

50 milliseconds….

JavaScript should not execute for longer than 100 milliseconds to ensure responsive UI. My recommendation, though, is to keep JavaScript under 50 milliseconds at a time, because why even try to get close to that?

- Nicholas Zakas

Why Web Workers?

3

What is Web Worker?

worker.p

ostMessa

ge(obj |

| str)

MAIN

PAGE

MAIN

PAGE

MAIN

PAGE

serialize

unserializ

e

Heavy

Computatio

n

Format

Data

self.postMessage(obj || str)

serialize

unserializ

e

4

• Without Web Workers• With Web Workers• What are Web Workers• Worker Environment• Subworkers/Delegation• Inline Worker• Restrictions• Browser Support• Use cases• Demo

AGENDA

onmessage = fn{}

setTimeout();

worker.postMessage('Hello

World');worker.postMessage(obj);

self.postMessage(e.data);

5

Without Web Workers

Chrome Internet Explorer

Firefox

6

With Web Workers

Chrome Internet Explorer

Firefox

7

What are Web Workers?• Scripts running in background.• Heavy Weight Scripts.

8

What are Web Workers?// create web worker

self.postMessage(arrayOfRandomNum);

worker.postMessage({‘cmd’:gen_num});self.onmessage = fn(e){}

worker.onerror = fn(e){

// e.lineno // e.filename // e.message}

// task completed

worker.onmessage = fn(e){ // update DOM with e.data}

myworker.js

worker.terminate();

9

Difference from other approach.

• How different from setTimeout?• How different from AJAX?

10

So what does Worker look like?// Check if workers are supported. if (typeof(Worker) == "undefined") {

    document.getElementById(‘support’).textContent = ‘Your browser does not  support Web Workers’; return false;

}

// worker object var worker = new Worker('worker.js');             

// post message to workerworker.postMessage(‘Are you there?’);

// error handling worker.onerror = function(event){

    console.log(event.message + ‘ in file = ’ + event.filename + ‘ at line #’  + event.lineno );

};

// on message handler worker.onmessage = function (event)  { 

    document.getElementById('result').textContent = event.data;}

Main Page

1

2

3

4

5

11

So what does Worker look like?

self.onmessage = function(event){postMessage(event.data + ‘ Worker says: Yes I am here.’);

}

ORself.addEventListener('message', function(e) {

self.postMessage(event.data +‘ Worker says: Yes I am here.’);}, false);

worker.js

2

1

12

Worker Environment

• No BOM• No DOM• !parentsetTimeout, setInterval navigator objectlocation object (read-only) XMLHttpRequestSpawning other web workers

13

Subworker/Delegation

• Ability to spawn child workers– Breaks up huge task into smaller chunks

• Sub workers should be in hosted in the same domain

• Location of sub worker file is relative to parent worker (and not main page).

14

Subworker/Delegation

self.onmessage = function(event){ var num_workers = 4; // total sub workers

var pending_workers = num_workers;

// loop though the sub-workersfor (var i = 0; i < num_workers; i++) { var worker = new Worker('subworker.js');

worker.postMessage(event.data);

// on message worker.onmessage = function(event) {

var str += event.data; // collect data pending_workers -= 1; // workers pending

// case: all response collected then post to main page

if (pending_workers == 0) self.postMessage(str); } // on message sub-worker end

} // loop end}

Parent Worker

12

3

4

15

Subworker/Delegation

onmessage = function(event){postMessage(event.data + ‘ Sub Worker says: Yes I am here.’);

}

subworker.js

16

Inline worker

• Worker script on the fly – Without creating separate worker file

• BlobBuilder interface

17

Inline worker

• Worker script on the fly – Without creating separate worker file

• BlobBuilder interface

var bb = new BlobBuilder();bb.append("onmessage = function(e) { postMessage('msg

from worker'); }");var blobURL = window.URL.createObjectURL(bb.getBlob());var worker = new Worker(blobURL);worker.postMessage('Hello'); // post message to start worker

// on messageworker.onmessage = function(e) { // e.data == 'msg from worker'};

18

Restrictions

• !file:// (chrome)• http: | https: && data: | javascript:

19

Browser Support

3.5+ 4.0+ 4.0+ 10.6+✔ ✔ ✔ ✔

X

20

Use Cases

• Prefetching and/or caching data for later use• Code syntax highlighting or other real-time text

formatting• Spell checker• Background I/O or polling of webservices• Processing large arrays or JSON responses

21

DEMO

var worker = new Worker(‘MyWork.js');

worker.addEventListener('message', function(e) { document.getElementById(‘heading').textContent (e.data);}, false);worker.postMessage(‘DEMO');

onmessage = function(e) {

postMessage(e.data);

}