Web workers | JavaScript | HTML API
Download as PPTX, PDF1 like203 views
The document outlines the concept of web workers, which are scripts that run in background threads without disrupting the main UI thread. It provides detailed steps to create a web worker, including creating the worker file, handling communication using message events, and terminating the worker when necessary. Additionally, the document includes code snippets for implementation and checking browser compatibility.
Web workers | JavaScript | HTML API
- 1. Web Workers JAGADEESH PATTA( PJ )
- 2. Agenda Introduction Steps to create service worker.
- 3. Introduction Web workers are 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 workers can communicate with UI thread using event messages.
- 5. Steps to create web worker Create web worker file Create object for web worker Communication with Web Worker Terminate web worker
- 6. Create web worker file 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 worker file(cont…) Step-2(web-worker-name.js): var count = 0; function getCount(){ count = count + 1; postMessage(count); setTimeout(“getCount()”, 1000); } getCount();
- 8. Create Object for web 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 Web Worker 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 from web 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