web workers 1 amitesh madhur ([email protected]) (exceptional performance, bangalore)
TRANSCRIPT
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 ([email protected])(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);
}