DEV Community

Cover image for How To Use Web Worker
Bibek
Bibek

Posted on • Edited on • Originally published at blog.bibekkakati.me

19 6

How To Use Web Worker

Hello everyone👋

In this article, we will see how can we use Web Worker API on our website to avoid blocking thread while doing CPU intensive task.

Web Worker

A web worker is a JavaScript that runs in the background, independently of other scripts, without affecting the performance of the page.

What does that mean?

As we all know, JavaScript is a single-threaded language so when executing scripts the site becomes unresponsive until the scripts are finished.

To avoid blocking the interaction of the site we can spawn a worker that will execute the scripts in the background. Thus, we can improve the performance of our website.

Web Workers uses a background thread separate from the main execution thread of a web application.

Implementation

Let's explore the Web Worker API.

Check For Browser Support

if (typeof(Worker) !== "undefined") {
  // It support
  ...
}
Enter fullscreen mode Exit fullscreen mode

We will understand the implementation with a basic example. The parent script will pass a number to the worker script and it will calculate the square root of that number and return to the parent script.

Worker object and worker script have some event listeners with the help of which we can communicate and handle errors.

web-workers.jpg

Parent Script

This javascript file will be running in the main thread.

Create Worker

// Creates a new worker object
var worker = new Worker("./worker.js");
Enter fullscreen mode Exit fullscreen mode

Receive Data

// Listen for data from the worker script
worker.onmessage = function(e) {
  // Access the data from event object
  let data = e.data;
  ...
}
Enter fullscreen mode Exit fullscreen mode

On Error

// Listen for error
worker.onerror= function(err) {
  // Access the message from error object
  let error = err.message;
  ...
}
Enter fullscreen mode Exit fullscreen mode

Send Data

// Send data to the worker script
worker.postMessage(data);

Enter fullscreen mode Exit fullscreen mode

Terminate Worker

// Immediately terminates the worker
worker.terminate();
Enter fullscreen mode Exit fullscreen mode

Worker Script

Now we will create the javascript file worker.js.

// Listen for data from the parent script
self.onmessage = function (e) {
  // Access the data from event object
  const value = Math.sqrt(e.data);

  // Sending data to the parent script
  self.postMessage(value);
};

// It fires when message can't be deserialized
self.onmessageerror = function (e) {
  ...
};
Enter fullscreen mode Exit fullscreen mode

Web Worker Access

Web Workers do not have access to the following JavaScript objects.

  • window
  • document
  • parent

Web Workers are used for more CPU intensive or heavy task like encryption, compression, long-polling etc.

Example✨

Check out the GitHub repo for sample code.

Try it out here.


Originally published on blog.bibekkakati.me


Thank you for reading 🙏

If you enjoyed this article or found it helpful, give it a thumbs-up 👍

Feel free to connect 👋

Twitter | Instagram | LinkedIn


If you like my work and want to support it, you can do it here. I will really appreciate it.



Heroku

Simplify your DevOps and maximize your time.

Since 2007, Heroku has been the go-to platform for developers as it monitors uptime, performance, and infrastructure concerns, allowing you to focus on writing code.

Learn More

Top comments (0)

SurveyJS custom survey software

Build Your Own Forms without Manual Coding

SurveyJS UI libraries let you build a JSON-based form management system that integrates with any backend, giving you full control over your data with no user limits. Includes support for custom question types, skip logic, an integrated CSS editor, PDF export, real-time analytics, and more.

Learn more

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay