What is Web Worker

Web Workers makes it possible to run a script operation in a background thread separate from the main execution thread of a web application.

• allows the main (usually the UI) thread to run without being blocked/slowed down

You can run almost any code you like inside a worker thread.

Some exceptions:

• can't directly manipulate the DOM from inside a worker
• can't access certain methods from Window object

const myWorker = new Worker("/worker.js");

const first = document.querySelector("input#number1");

const second = document.querySelector("input#number2");

first.onchange = () => {
  myWorker.postMessage([first.value, second.value]);

  console.log("Message posted to worker");
};

Data between the main thread and the Worker is sent via a system of messages — both sides send their messages using the postMessage() method, and respond to messages via the onmessage event handler

• the message is contained within the message event's data property.