Web Worker

Web Worker is a javascript script execute in the background of web pages without interfering with the user interface, also have been executed from the same HTML page.

Why Use Web Worker(Benefit of Web worker)–

Suppose you use the number of concurrency request using UI so after few second you see UI stops working or other words due to concurrency of request UI is not work until all request executed so avoid this issue we use the Web Workers is work without affecting the user interface.

Type of Web Worker —

Web Worker is Two type, Shared, and Dedicated Web worker.

Shared Web Worker —

Shared Web Worker each web Web Worker can have multiple connections that means you can use multiple pages of single Web Workers. Shared Web Worker constructor creates a new SharedWorker() object instance for representing

new SharedWorker();

Dedicated Web worker —

Dedicated Web Worker creating with URL to the javascript file. The Worker() constructor is invoked with the URL to that file as its only argument, a worker is then created and returned.

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

Limitations of Web Worker–

Web workers cannot access DOM elements.
Web workers cannot access global variables and JavaScript functions from the web page.
Web workers can’t call alert() or confirm() functions.
Window object cannot access inside the web worker.
Document object can’t be accessed inside the Web Worker.
Parent object can’t be accessed inside the Web Worker.
Cross-browser policy.

Example: In the example, we see how to send and receive data, we use two file first HTML file, and the second js file name is main.js.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8"  />
    <title>Web Workers</title>
  </head>
  <body>
  <div id="message"></div>

  <script language="javascript">

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

    worker.onmessage = function(event) {
      document.getElementById('message').textContent = event.data; // Use for get data from main.js and  show data
    };

    worker.postMessage('3');  // send value to the main.js

  </script>
  </body>
</html>

Now main.js file here we see the simple program for check given number is even or odd.

onmessage = function(event) {
    var number = event.data; // get data
    if (number % 2 === 0) {
       postMessage('Given Number(' + number + ') is even number');
     } else {
      postMessage('Given Number(' + number + ') is odd number');
    }
 };

Output:

The Web worker sets the property onmessage to a function which will receive messages sent when the worker object’s postMessage().