Harnessing Parallelism: A Guide to JavaScript Web Workers
Murali Singh
Remote SWE | Full-Stack Web & App Developer | React.js | JavaScript | Node.js | Express.js | Frontend | UI | Flutter | Firebase | MongoDB
Web Workers are a simple means for web content to run scripts in background threads.
If you're wondering how JavaScript, known for its single-threaded nature, manages to execute scripts in background threads, let's dive into how web workers make this possible.
The Web Workers functionality in JavaScript is provided through an API called the Web Workers API. This API allows web developers to create separate JavaScript files (worker scripts) that run in their own thread. This means that while the main thread (where your regular JavaScript code runs) continues to handle user interactions and updates the UI, the web worker can execute scripts concurrently in the background.
Types of Web Workers
Web workers in JavaScript come in two main types:
How Communication Works ?
Understanding these concepts may seem overwhelming, and you might be feeling a bit sleepy after absorbing all this information. However, in the next section, we'll dive into practical code examples. I hope you find them enjoyable!
Dedicated Worker Example
HTML : This file sets up the basic structure of the web page with an input field for the limit, a button to start the worker, and a div to display the results.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Prime Number Calculator</title>
</head>
<body>
<input type="number" id="limit" placeholder="Enter a limit">
<button id="startWorker">Calculate Primes</button>
<div id="result"></div>
<script src="main.js"></script>
</body>
</html>
main.js (Main Thread): This is the main script running in the main thread.
if (window.Worker) {
const worker = new Worker('prime_worker.js');
document.getElementById('startWorker').addEventListener('click', () => {
const limit = document.getElementById('limit').value;
worker.postMessage(limit);
});
worker.onmessage = (event) => {
document.getElementById('result').innerText = 'Primes: ' + event.data.join(', ');
};
} else {
console.log('Your browser does not support Web Workers.');
}
prime_worker.js (Worker Thread): This is the script that runs in the prime_worker thread.
onmessage = (event) => {
const limit = parseInt(event.data);
const primes = [];
for (let i = 2; i <= limit; i++) {
let isPrime = true;
for (let j = 2; j * j <= i; j++) {
if (i % j === 0) {
isPrime = false;
break;
}
}
if (isPrime) {
primes.push(i);
}
}
postMessage(primes);
};
How It Works:
领英推荐
Shared Worker Example
addOrSubtract.html (Page 1): This HTML file represents a page where users can perform addition and subtraction operations using a shared worker.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Add or Subtract</title>
</head>
<body>
<h2>Add or Subtract</h2>
<label for="num1">Enter number 1:</label>
<input type="number" id="num1"><br><br>
<label for="num2">Enter number 2:</label>
<input type="number" id="num2"><br><br>
<button onclick="calculate('add')">Add</button>
<button onclick="calculate('subtract')">Subtract</button>
<p id="result"></p>
<script>
const worker = new SharedWorker('sharedWorker.js');
// Register ports for operations handled by this page
worker.port.postMessage({ type: 'register', operation: 'add' });
worker.port.postMessage({ type: 'register', operation: 'subtract' });
worker.port.onmessage = function(event) {
if (event.data.type === 'result') {
document.getElementById('result').textContent = `Result: ${event.data.value}`;
}
};
function calculate(operation) {
const num1 = document.getElementById('num1').value;
const num2 = document.getElementById('num2').value;
worker.port.postMessage({ type: 'calculate', num1, num2, operation });
}
// Clean up when the page is about to unload
window.addEventListener('beforeunload', function() {
worker.port.postMessage({ type: 'unregister', operation: 'add' });
worker.port.postMessage({ type: 'unregister', operation: 'subtract' });
worker.port.close();
});
</script>
</body>
</html>
multiplyOrDivide.html (Page 2): This HTML file represents a page where users can perform multiply and divide operations using a shared worker.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Multiply or Divide</title>
</head>
<body>
<h2>Multiply or Divide</h2>
<label for="num1">Enter number 1:</label>
<input type="number" id="num1"><br><br>
<label for="num2">Enter number 2:</label>
<input type="number" id="num2"><br><br>
<button onclick="calculate('multiply')">Multiply</button>
<button onclick="calculate('divide')">Divide</button>
<p id="result"></p>
<script>
const worker = new SharedWorker('sharedWorker.js');
// Register ports for operations handled by this page
worker.port.postMessage({ type: 'register', operation: 'multiply' });
worker.port.postMessage({ type: 'register', operation: 'divide' });
worker.port.onmessage = function(event) {
if (event.data.type === 'result') {
document.getElementById('result').textContent = `Result: ${event.data.value}`;
}
};
function calculate(operation) {
const num1 = document.getElementById('num1').value;
const num2 = document.getElementById('num2').value;
worker.port.postMessage({ type: 'calculate', num1, num2, operation });
}
// Clean up when the page is about to unload
window.addEventListener('beforeunload', function() {
worker.port.postMessage({ type: 'unregister', operation: 'multiply' });
worker.port.postMessage({ type: 'unregister', operation: 'divide' });
worker.port.close();
});
</script>
</body>
</html>
sharedWorker.js (Shared Worker Thread): This is the script that runs in the sharedWorker thread.
let ports = {};
onconnect = function(event) {
const port = event.ports[0];
port.onmessage = function(event) {
const message = event.data;
if (message.type === 'register') {
// Register the port with the specified operation type
const operation = message.operation;
ports[operation] = port;
} else if (message.type === 'calculate') {
// Perform calculation based on the operation type
const operation = message.operation;
const num1 = parseFloat(message.num1);
const num2 = parseFloat(message.num2);
let result;
switch (operation) {
case 'add':
result = num1 + num2;
break;
case 'subtract':
result = num1 - num2;
break;
case 'multiply':
result = num1 * num2;
break;
case 'divide':
result = num2 !== 0 ? num1 / num2 : 'Error: Division by zero';
break;
default:
result = 'Error: Invalid operation';
break;
}
// Send the result back through the appropriate port
if (ports[operation]) {
ports[operation].postMessage({ type: 'result', value: result });
}
} else if (message.type === 'unregister') {
// Unregister the port for the specified operation type
const operation = message.operation;
if (ports[operation]) {
delete ports[operation]; // Remove from the ports object
}
}
};
};
How It Works:
Best Use Cases for Web Workers
Limitations of Web Workers
Something that came across my mind while learning about web workers—and I think you might have wondered about this too—is how many web workers can actually be created?
I tried to find exact numbers, but I couldn't. What I did discover is that several factors affect how web workers operate. The actual number of web workers that can be effectively used depends on the user's system resources, such as CPU cores and available memory. Each web worker consumes system resources, so the total number that can run simultaneously depends on the capacity of the user's device.
A variety of functions supported by web workers can be explored here on the Mozilla Developer Network.
In addition to dedicated workers and shared workers, there are two more types of workers: Service Workers and Audio Worklet , which I will discuss in a future blog post.
I hope you have all enjoyed the blog and gained insights into the Web Worker API—its functionality, implementation details, limitations, and practical use cases. I encourage you to implement it wherever applicable in your projects.