Web workers | JavaScript | HTML API

Web workers | JavaScript | HTML API

• 1.
  Web Workers JAGADEESH PATTA(PJ )
• 2.
  Agenda  Introduction  Stepsto create service worker.
• 3.
  Introduction  Web workersare scripts that are runs in background threads.  Web worker thread perform tasks without interfering UI thread.  Web workers can perform I/O operations using XMLHttpRequest.
• 4.
  Introduction(cont…)  Web workerscan communicate with UI thread using event messages.
• 5.
  Steps to createweb worker  Create web worker file  Create object for web worker  Communication with Web Worker  Terminate web worker
• 6.
  Create web workerfile Step-1: Check weather the browser supports the web workers or not. If ( typeof Worker !== “undefined” ) { // Your browser supports web workers } else { // Your browser not supporting web workers. }
• 7.
  Create web workerfile(cont…) Step-2(web-worker-name.js): var count = 0; function getCount(){ count = count + 1; postMessage(count); setTimeout(“getCount()”, 1000); } getCount();
• 8.
  Create Object forweb worker  Web worker file and current JavaScript code must be comes under same origin.  Check existence of web worker object. If ( typeof workerObj == “undefined” ) { workerObj = new Worker(“web-worker-name.js”); }
• 9.
  Communication with WebWorker  The communication between web worker and UI thread done by event messages.  Send / Receive data using postMessage and onmessage methods. Step-1(send data from web worker): postMessage(“content needs to be send”);
• 10.
  Communication(cont…) Step-2(Receive data fromweb worker): workerObj.onmessage = function(event){ var element = document.getElementById(‘id’); element.innerHTML = event.data; }
• 11.
  Terminating web worker check weather the workerObj is undefined or not. if ( typeof workerObj !== “undefined” ) { workerObj.terminate(); }
• 12.
  Questions ?
• 13.
  Thank You