• JavaScript Concurrency
• Bring Threading to JavaScript

• Single-threaded environment
• handle ui events
• query and process data
• manipulate dom
• ...
• Fake 'concurrency'
• setTimeout()
• setInterval()
• event handlers
• ...

• Background scripts
• Does not block UI thread
• Long running scripts
• Computationally intensive tasks

• Creating Worker
• Communicating with Worker
• Transferring Objects

var worker = new Worker('task.js');

• download and run the script in worker thread
• fail silently if 404

var worker = new Worker('task.js');worker.addEventListener('message', function(e){    console.log('worker said: ', e.data);}, false);

self.addEventListener('message', function(e){    self.postMessage(e.data);}, false);

• messages are copied

worker.postMessage(arrayBuffer, [arrayBuffer]);worker.postMessage(arrayBuffer, targetOrigin, [arrayBuffer]);

• File, Blob, ArrayBuffer, JSON objects
• zero-copy (pass-by-reference)
• no longer available for the calling context

• The Worker Environment
• Inline Workers
• Shared Workers
• Handling Errors
• Terminting & Closing

• Worker Scope
• Available Features
• External Scripts
• SubWorkers

• self = this

self.addEventListener('message', function(e){    self.postMessage(...);});
addEventListener('message', function(e){    postMessage(...);});

• !DOM
• !window
• !document
• !parent

• navigator
• location (read-only)
• XMLHttpRequest
• setTimeout() / clearTimeout()
• setInterval() / clearInterval()
• Application Cache
• importScripts()
• spawn other web workers

• importScript

importScript('script1.js');importScript('script1.js', 'script2.js');

• MUST be hosted within the same origin as parent page
• URIs are resolved relative to parent worker's location

var blob = new Blob([    'onmessage = function(e){ postMessage("hello from worker"); }']);
var blobURL = window.URL.createObjectURL(blob);var worker = new Worker(blobURL);...

• Same rules as dedicated workers
• Shared between multiple pages (same origin)

var worker = new SharedWorker('sharedWorker.js');worker.port.addEventListener('message', function(e){    alert(e.data);}, false);worker.port.start();

self.addEventListener('connect', function(e){    var port = e.ports[0];    port.addEventListener('message', function(e){        port.postMessage('response from shared worker');    }, false);    port.start();}, false);

• ErrorEvent
• filename
• lineno
• message

var worker = new Worker('workerWithError.js');worker.addEventListener('message', onMessage, false);worker.addEventListener('error', onError, flase);
function onError(event){    console.log(event.filename, event.lineno, event.message);}

• worker.terminate();
• self.close();

• Thread Safety
• Local Access Restrictions
• Same Origin Considerations

• Real OS-level thread
• No shared data
• No non-thread-safe component
• Communicate only by message

• Workers will not run locally (file://...)
• --allow-file-access-from-files

• Worker scripts MUST have same scheme