Web workers in JS

Web workers

Web workers are designed to let me do any time-consuming job in the background. Javascript is single thread, so if a browser takes something long to get data, user can’t do anything on the web page such as unable to click other functions.

Web workers are ideal for offloading heavy tasks from the main thread. They run independently and don’t block the UI. However, they can’t directly access the DOM of certain browser APIs.

Don’t manipulate DOM !!

I can run some code inside of workers with some exception.

Common examples of web workers

• Dashboard pages that display real-time data such as stock prices, real-time active users
• Fetching huge files from the server
• Autosave functionality
• Processing multimedia (audio and video)
• Filtering images in a canvas

How to implement workers

const worker = new Worker("workers.js");

Worker is an API interface that you can create a thread in the background. workers.js will be executed by API. I can call the Worker() constructor to create a new worker.

Sending message to and from a worker

postMessage() can be used sending message to main thread or workers(vice versa)

// main.js
worker.postMessage("start");

In the main script, I can use addEventListener method to listen to message from worker. I can get data from worker. I also can use onmessage method to listen to message. self.addEventListener("message", ...) is more flexible when you need to set up multiple event listeners for different types of messages in a worker, while self.onmessage is a simpler approach when you only need one message handler in the worker. The choice between them depends on your specific use case and how you want to structure your worker’s message handling logic.

// main.js
worker.addEventListener(
  "message",
  function (e) {
    console.log("Worker said: ", e.data);
  },
  false
);

worker.onmessage = function (e) {
  console.log("Worker said: ", e.data);
};

In the worker script, I can send message to main script by using postMessage().

// worker.js
self.addEventListener(
  "message",
  function (e) {
    self.postMessage(e.data);
  },
  false
);

self.onmessage = function (e) {
  self.postMessage(e.data);
};

Terminate workers

If I need to terminate the worker, I can use terminate method to terminate a running worker from the main thread.

worker.terminate();