Web-Workers

JavaScript Web Workers

by manoj_antony32

HTML

<script type="javascript/worker">
  onmessage = function(e) {
    if(e.data.addThis !== undefined) {
      postMessage({ result: e.data.addThis.num1 +  e.data.addThis.num2})
    }
  }
</script>

CSS

/* // -- Web Workers --
// single-threading
// unresponsive script block the page
// have to do multi-threading
// ajax is non blocking
// without disturbing UI
// postMessage, onMessage
//   */

/* //Web Worker has no access to
 * Window object
 * document object
 * parent object
 
 // Web Worker has access to 
 // The navigator object
 * useragent
 * geolocation
 * cookeyenabled
 * location object(read-only) (host, hostname, href, pathname...etc)
 * XMLHttpRequest
 * setTimeout()/clearTimeout()
 * setInterval()/clearInterval()
 * The Application Cache
* importScripts() method
* Spawning other web workers
* myWorker.terminate() */

JavaScript

function getInlineJS(){
  var blob = new Blob([
    document.querySelector('[type="javascript/worker"]').textContent
  ], { type: "text/javascript" })
  return URL.createObjectURL(blob);
}



if(window.Worker) {
  var myWorker = new Worker(getInlineJS());
  var message = { addThis: {num1: 1, num2: 3} };
  myWorker.postMessage(message)
  myWorker.onmessage = function(e) {
    console.dir(e.data.result);
  }
}