Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
Why HTML5 Web Workers are useful?
JavaScript was designed to run in a single-threaded environment, meaning multiple scripts cannot run at the same time. Consider a situation where you need to handle UI events, query and process large amounts of API data, and manipulate the DOM.
JavaScript will hang your browser in situations where CPU utilization is high. Let us take a simple example where JavaScript goes through a big loop:
<!DOCTYPE HTML>
<html>
<head>
<title>Big for loop</title>
<script>
function bigLoop(){
for (var i = 0; i <= 10000; i += 1){
var j = i;
}
alert("Completed " + j + " iterations");
}
function sayHello(){
alert("Hello sir....");
}
</script>
</head>
<body>
<input type="button" onclick="bigLoop();" value="Big Loop" />
<input type="button" onclick="sayHello();" value="Say Hello" />
</body>
</html>
On clicking the "Big Loop" button, the browser becomes unresponsive. While the loop is running, clicking "Say Hello" will not work immediately because JavaScript is single-threaded and busy executing the loop.
What are HTML5 Web Workers?
HTML5 Web Workers are a way to run JavaScript in the background, separate from the main thread. They allow you to perform computationally intensive tasks without blocking the user interface.
Benefits of Web Workers
1. Non-blocking execution: Heavy computations run in parallel without freezing the UI.
2. True multithreading: Workers run on separate threads, allowing concurrent processing.
3. Better user experience: Users can interact with the page while background tasks execute.
Basic Web Worker Example
Here's how to solve the blocking loop problem using a Web Worker:
Main HTML file:
<!DOCTYPE HTML>
<html>
<head>
<title>Web Worker Example</title>
<script>
function startWorker(){
var worker = new Worker('worker.js');
worker.postMessage(10000); // Send data to worker
worker.onmessage = function(event) {
alert("Completed " + event.data + " iterations");
};
}
function sayHello(){
alert("Hello sir....");
}
</script>
</head>
<body>
<input type="button" onclick="startWorker();" value="Start Worker" />
<input type="button" onclick="sayHello();" value="Say Hello" />
</body>
</html>
worker.js file:
onmessage = function(event) {
var iterations = event.data;
for (var i = 0; i <= iterations; i += 1) {
var j = i;
}
postMessage(j); // Send result back to main thread
};
Key Differences
| Without Web Workers | With Web Workers |
|---|---|
| Single-threaded execution | Multi-threaded execution |
| UI freezes during heavy tasks | UI remains responsive |
| Sequential processing | Parallel processing |
Common Use Cases
Data Processing: Parsing large JSON files or CSV data
Image/Video Processing: Applying filters or transformations
Cryptography: Encryption, decryption, or hash calculations
Real-time Calculations: Mathematical computations in games or simulations
Conclusion
HTML5 Web Workers solve JavaScript's single-threaded limitations by enabling background processing. They keep your user interface responsive while handling computationally expensive tasks, resulting in a much better user experience.
227 Views
