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
How can I use Web Workers in HTML5?
Web Workers allow for long-running scripts that are not interrupted by scripts that respond to clicks or other user interactions and allows long tasks to be executed without yielding to keep the page responsive.
Web Workers are background scripts and they are relatively heavyweight and are not intended to be used in large numbers. For example, it would be inappropriate to launch one worker for each pixel of a four-megapixel image.
Web Workers are initialized with the URL of a JavaScript file, which contains the code the worker will execute. This code sets event listeners and communicates with the script that spawned it from the main page.
Syntax
Following is the basic syntax to create a Web Worker:
var worker = new Worker('worker-script.js');
Creating Your First Web Worker
Let's create a simple example with a worker that performs a time-consuming calculation.
Main HTML file:
<!DOCTYPE html>
<html>
<head>
<title>Web Worker Example</title>
</head>
<body>
<button id="startWorker">Start Worker</button>
<button id="stopWorker">Stop Worker</button>
<div id="result"></div>
<script>
let worker;
document.getElementById('startWorker').onclick = function() {
if (typeof(Worker) !== "undefined") {
if (typeof(worker) == "undefined") {
worker = new Worker("/js/worker.js");
}
// Send data to worker
worker.postMessage(100000);
// Listen for messages from worker
worker.onmessage = function(event) {
document.getElementById("result").innerHTML = "Result: " + event.data;
};
// Handle errors
worker.onerror = function(error) {
console.log("Worker error: " + error.message);
};
} else {
document.getElementById("result").innerHTML = "Web Workers not supported!";
}
};
document.getElementById('stopWorker').onclick = function() {
if (worker) {
worker.terminate();
worker = undefined;
}
};
</script>
</body>
</html>
Worker script (worker.js):
// This code runs in the worker thread
onmessage = function(event) {
let number = event.data;
let result = 0;
// Simulate heavy computation
for (let i = 0; i
Key Web Worker Methods
| Method/Property | Purpose | Usage |
|---|---|---|
new Worker() |
Create worker | new Worker('script.js') |
postMessage() |
Send data | worker.postMessage(data) |
onmessage |
Receive data | worker.onmessage = function(e){...} |
terminate() |
Stop worker | worker.terminate() |
Advanced Example with Progress Updates
Here's a more advanced example showing progress updates during a long-running task:
<!DOCTYPE html>
<html>
<body>
<button onclick="startTask()">Start Long Task</button>
<div id="progress"></div>
<script>
function startTask() {
const worker = new Worker('/js/progress-worker.js');
worker.postMessage({start: 0, end: 1000000});
worker.onmessage = function(e) {
if (e.data.type === 'progress') {
document.getElementById('progress').innerHTML =
'Progress: ' + e.data.percent + '%';
} else if (e.data.type === 'complete') {
document.getElementById('progress').innerHTML =
'Completed! Result: ' + e.data.result;
worker.terminate();
}
};
}
</script>
</body>
</html>
Progress worker script (progress-worker.js):
onmessage = function(e) {
const {start, end} = e.data;
let sum = 0;
for (let i = start; i <= end; i++) {
sum += i;
// Send progress updates every 10000 iterations
if (i % 10000 === 0) {
const percent = Math.round((i / end) * 100);
postMessage({type: 'progress', percent: percent});
}
}
// Send final result
postMessage({type: 'complete', result: sum});
};
Browser Compatibility
Web Workers are supported in all modern browsers including Chrome, Firefox, Safari, and Edge. Always check for support before using:
if (typeof(Worker) !== "undefined") {
// Web Workers supported
} else {
// Fallback for older browsers
}
Key Points
- Web Workers run in separate threads and don't block the main UI
- Communication happens via
postMessage()andonmessage - Workers cannot access DOM directly
- Always terminate workers when done to free memory
- Use for CPU-intensive tasks like data processing or calculations
Conclusion
Web Workers provide an excellent way to perform heavy computations without blocking the user interface. Use them for CPU-intensive tasks while keeping the main thread responsive for user interactions.
210 Views
