In this tutorial, we will be going over the web workers' API. Web workers are not part of javascript, it is an API provided by the browser to make our life easier, what web workers do is that it allows us to run code on a separate thread from the javascript thread.

Sometimes we have some piece of code that will take a long time to run but we don't want to block the entire page or other operations while that code is running

To show some examples, we will have a webpage which contains 2 buttons that would be used to perform 2 different kinds of operations.

For our experiment, our HTML should contain two buttons, one to perform a fast or normal operation and the other to perform an expensive operation

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="index.js" defer></script>
</head>
<body>
    <button id="slow">slow</button>
    <button id="hello">hello</button>
</body>
</html>

in order to test and confirm what will happen if an expensive operation is run on the javascript thread, we shall have the following code in our index.js file

const slowButton = document.getElementById("slow");
const helloButton = document.getElementById("normal");

slowButton.addEventListener("click", slowOp);
helloButton.addEventListener("click", normalOp);


function slowOp() {
  for (let x = 0; x < 5000000000; x++) {
    1 + 2;
  }
}

function normalOp() {
  console.log("normal operation");
}

on our web page we now have 2 buttons, one which says slow and another which says hello, the slow button when clicked is meant to loop through 5 billion, now to actually see the effect of running such an operation, we will click on the slow button and then click on the hello button, haha, yes, you would see that when the slow button is clicked, nothing happens until the slow operation finishes, this is due to the slower function still being in the call stack, so until that expensive operation completely runs, nothing else can happen

Now, let's go back to our code and see how we can fix this problem using a web worker

we have to create a new worker in our slow operation and this can be done by using the following syntax

const worker = new Worker()

the web worker object takes in a path to a javascript file, in our case it would be a path to a new file we will be creating now, i would call my file worker.js

once that has been done, our worker object should look like this

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

now all we need to do is move the expensive code from the slowOp function into the worker.js file , our worker.js file should look like this once that is done

for (let x = 0; x < 5000000000; x++) {
  1 + 2;
}

and our index.js file should look like this

const slowButton = document.getElementById("slow");
const helloButton = document.getElementById("normal");

slowButton.addEventListener("click", slowOp);
helloButton.addEventListener("click", normalOp);

function slowOp() {
  const worker = new Worker("worker.js");
}

function normalOp() {
  console.log("normal operation");
}

Now try clicking on the slow button again and then immediately click on the hello button, you would see that there is no hold-up and we can run our normal operation without delay

Note: Since workers do not run on a javascript thread , we cannot do any DOM manipulation in workers.

That brings us to the end of this tutorial, next would be how to communicate and pass data between workers and our main javascript code

Conclusion

I hope you have been able to understand the basics of web workers and how they can be employed to help with the speed of our applications, there's much more that can be done using web workers, you can read more here

An introduction to web workers

Conclusion

Subscribe to my newsletter

kehinde bankole

kehinde bankole