WebWorkers



Topics


  • Introduction
  • Getting Started
  • Advanced
  • Security

Introduction


  • JavaScript Concurrency
  • Bring Threading to JavaScript


    Introduction



    Introduction



    JavaScript Concurrency


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

    Bring Threading to JavaScript


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


    Getting Started


    • Creating Worker
    • Communicating with Worker
    • Transferring Objects

    Creating Worker

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


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

    Communicating with Worker

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

    • messages are copied

    Transferring Objects


    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

    Browser Support



    Advanced


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

    The Worker Environment


    • Worker Scope
    • Available Features
    • External Scripts
    • SubWorkers

    The Worker Environment

    - Worker Scope


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

    The Worker Environment

    - Available Features


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

    The Worker Environment

    - Available Features


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

    The Worker Environment

    - External Scripts


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

    • script tag
    <script src="someScript.js"></script>

    The Worker Environment

    - SubWorkers


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

    Inline Workers


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

    Shared Workers


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

    Shared Workers

    Main Script:
    var worker = new SharedWorker('sharedWorker.js');worker.port.addEventListener('message', function(e){    alert(e.data);}, false);worker.port.start();
    sharedWorker.js
    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);

    Shared Workers



    Handling Errors


    • 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);}

    Terminating & Closing


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

    Security


    • Thread Safety
    • Local Access Restrictions
    • Same Origin Considerations

    Thread Safety


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



    Local Access Restrictions


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

    Same Origin Considerations


    • Worker scripts MUST have same scheme

    Thanks


    Q&A

    WebWorkers

    By Oscar Tong

    WebWorkers

    • 2,780