HTML Web Workers

Run JavaScript in the background without blocking the UI

⚡ What are Web Workers?

Web Workers allow you to run JavaScript in the background, separate from the main thread. This prevents heavy computations from freezing your web page. 


// Create a new Web Worker
const worker = new Worker('worker.js');

// Send data to worker
worker.postMessage('Hello Worker!');

// Receive data from worker
worker.onmessage = function(e) {
    console.log('Message from worker:', e.data);
};

Try it:

Web Worker Features

🔄

Background Processing

Run scripts without blocking the UI 

// Heavy computation in worker
for(let i = 0; i < 1000000; i++) {
    // Complex calculation
}
📡

Message Passing

Communicate between main thread and worker 

// Send message
worker.postMessage(data);

// Receive message
worker.onmessage = (e) => {
    console.log(e.data);
};
🛡️

Isolated Environment

Workers run in separate context 

// Worker can't access DOM
// No window object
// No parent object
⚡

Performance

Improve app responsiveness 

// UI stays responsive
// while worker processes data
worker.postMessage(bigData);

🔹 Creating a Simple Web Worker

Here's how to create and use a basic Web Worker: 

// main.js - Main thread
const worker = new Worker('worker.js');

// Send data to worker
worker.postMessage({
    command: 'calculate',
    numbers: [1, 2, 3, 4, 5]
});

// Listen for messages from worker
worker.onmessage = function(e) {
    document.getElementById('result').textContent = e.data;
};

// Handle errors
worker.onerror = function(error) {
    console.error('Worker error:', error);
};

Worker File (worker.js): 

// worker.js - Worker thread
self.onmessage = function(e) {
    const { command, numbers } = e.data;
    
    if (command === 'calculate') {
        const sum = numbers.reduce((a, b) => a + b, 0);
        self.postMessage(`Sum: ${sum}`);
    }
};

🔹 Practical Example: Prime Number Calculator

Let's create a worker that calculates prime numbers without freezing the UI: 

<!-- HTML -->
<button onclick="calculatePrimes()">Calculate Primes</button>
<div id="prime-result"></div>
<div id="ui-test">
    <button onclick="testUI()">Test UI Responsiveness</button>
</div>
// JavaScript
function calculatePrimes() {
    const worker = new Worker('prime-worker.js');
    
    worker.postMessage({ start: 1, end: 10000 });
    
    worker.onmessage = function(e) {
        document.getElementById('prime-result').innerHTML = 
            `Found ${e.data.count} prime numbers: ${e.data.primes.slice(0, 10).join(', ')}...`;
    };
}

function testUI() {
    alert('UI is responsive!');
}

Try it:

🧠 Test Your Knowledge

What is the main benefit of Web Workers?