HTML Web Workers API
The HTML Web Workers API allows you to run scripts in the background without blocking the main thread of your web application.
This can be useful for computationally intensive tasks or long-running operations that would otherwise slow down the user interface.
A web worker is a separate JavaScript file that is executed in a separate thread from the main thread of your web application.
As an example:
// create a new web worker
const worker = new Worker("worker.js");
// send a message to the worker
worker.postMessage({number: 100});
// receive a message from the worker
worker.onmessage = function (event) {
console.log(event.data);
};
// content of worker.js
onmessage = function (event) {
const number = event.data.number;
let result = 1;
for (let i = 1; i <= number; i++) {
result *= i;
}
// send the result back to the main thread
postMessage(result);
};
In this example:
- We create a new web worker by passing the path to the
worker
JavaScript file to theWorker
constructor. - We then send a message to the
worker
using thepostMessage
method, passing an object with the number property set to the number we want to calculate the factorial of. - The worker receives this message in its
onmessage
handler and calculates the factorial, sending the result back to the main thread using thepostMessage
method. - The main thread receives the result in its
onmessage
handler and logs it to the console. - The HTML Web Workers API provides a way to perform computationally intensive tasks in the background without blocking the user interface of your web application.
Check Web Worker Support
You can check if web workers are supported in the user's browser using the typeof
operator to check if the Worker
constructor is defined.
As an example:
if (typeof Worker !== "undefined") {
// web workers are supported
} else {
// web workers are not supported
}
In this example:
- We use the
typeof
operator to check if theWorker
constructor is defined. - If it is defined, we know that web workers are supported in the user's browser.
- If it is not defined, we know that web workers are not supported and we should provide an alternative way to perform the task.
Create a Web Worker File
To create a web worker file, you simply create a new JavaScript file with your worker code and save it with a .js
extension.
As an example:
// worker.js
onmessage = function (event) {
const message = event.data;
console.log("Worker received message:", message);
const result = message.toUpperCase();
postMessage(result);
};
In this example:
- We define a function that will be called whenever the worker receives a message from the main thread.
- We log the message to the console and then transform it to uppercase before sending it back to the main thread using the
postMessage
method.
Once you have created your worker file, you can create a new instance of the worker in your main JavaScript file using the Worker constructor and passing the path to your worker
file as an argument.
As an example:
// main.js
const worker = new Worker("worker.js");
In this example:
- We create a new instance of the
Worker
object and pass the path to our worker file as an argument. - The worker will then run in a separate thread and can communicate with the main thread using the
postMessage
andonmessage
methods.
Create a Web Worker Object
To create a web worker object in your main JavaScript file, you can use the new Worker()
constructor, passing the path to the worker file as an argument.
As an example:
const worker = new Worker("worker.js");
In this example:
- We create a new
Worker
object and pass the path to the worker file,worker.js
, as an argument.
Once you have created the worker object, you can send messages to the worker using the worker.postMessage()
method.
As an example:
worker.postMessage("Hello, worker!");
In this example:
- We send a message to the worker with the text
"Hello, worker!"
.
You can also receive messages from the worker using the worker.onmessage()
method.
As an example:
worker.onmessage = function (event) {
console.log("Message received from worker:", event.data);
};
In this example:
- We define a function to be called whenever a message is received from the worker.
- The
event
parameter contains the message data, which we log to the console.
Finally, to terminate the worker, you can call the worker.terminate()
method.
As an example:
worker.terminate();
In this example:
- We terminate the worker immediately after sending a message to it.
- It's important to note that terminating a worker will immediately stop its execution and any unfinished work will be lost.
- You should only terminate a worker when you no longer need it.
Full Web Worker Example
Example of using web workers to calculate the factorial of a number in an inline HTML document: