Amitesh Madhur - Web workers, HTML 5

var worker = new Worker(‘MyWork.js');worker.addEventListener('message', function(e) {document.getElementById(‘heading').textContent(e.data);}, false);worker.postMessage(‘WEB WORKERS'); WEB WORKERS1Amitesh Madhur (amitesh@yahoo-inc.com)(Exceptional Performance, Bangalore)onmessage = function(e) {postMessage(e.data);}

for(;;;){ // Perceived performance of the UI}2Why Web Workers?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 ZakasUI Blocked for 100 milliseconds == Perceived performance page is slow50 milliseconds….

3What is Web Worker?serializeunserializeworker.postMessage(obj || str)HeavyComputationFormatDataMAIN PAGEMAIN PAGEself.postMessage(obj || str)MAIN PAGEserializeunserialize

Without Web WorkersWith Web WorkersWhat are Web WorkersWorker EnvironmentSubworkers/DelegationInline WorkerRestrictionsBrowser SupportUse casesDemoAGENDA4onmessage = fn{}setTimeout();worker.postMessage('Hello World');worker.postMessage(obj);self.postMessage(e.data);

Without Web Workers5ChromeInternet ExplorerFirefox

With Web Workers6ChromeInternet ExplorerFirefox

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

What are Web Workers?8myworker.js// create web workerworker.postMessage({‘cmd’:gen_num});self.onmessage = fn(e){}worker.onerror = fn(e){ // e.lineno // e.filename // e.message}// task completedself.postMessage(arrayOfRandomNum);worker.terminate();worker.onmessage = fn(e){ // update DOM with e.data}

Difference from other approach.How different from setTimeout?How different from AJAX?9

So what does Worker look like?10Main Page// 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 handlerworker.onmessage = function (event) { document.getElementById('result').textContent = event.data;} 12345

So what does Worker look like?11worker.jsself.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);12

Worker Environment12No BOMNo DOM!parentsetTimeout, setInterval

Spawning other web workersSubworker/Delegation13Ability to spawn child workersBreaks up huge task into smaller chunksSub workers should be in hosted in the same domainLocation of sub worker file is relative to parent worker (and not main page).

Subworker/Delegation14Parent Workerself.onmessage = function(event){varnum_workers = 4; // total sub workersvarpending_workers = num_workers; // loop though the sub-workers for (vari = 0; i < num_workers; i++) {var worker = new Worker('subworker.js');worker.postMessage(event.data);// on message worker.onmessage = function(event) {varstr += 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}1234

Subworker/Delegation15subworker.jsonmessage = function(event){postMessage(event.data + ‘ Sub Worker says: Yes I am here.’);}

Inline worker16Worker script on the fly Without creating separate worker fileBlobBuilder interface

Inline worker17Worker script on the fly Without creating separate worker fileBlobBuilder interfacevar bb = new BlobBuilder();bb.append("onmessage = function(e) { postMessage('msg from worker'); }");varblobURL = 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'};

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

Amitesh Madhur - Web workers, HTML 5

Recommended

More Related Content

What's hot (20)

Similar to Amitesh Madhur - Web workers, HTML 5 (20)

Recently uploaded (20)

Amitesh Madhur - Web workers, HTML 5

Editor's Notes