Web Worker Demo

Real-time demo showing UI responsiveness with background processing

Try Worker Demo

Enter numbers (comma-separated):

Progress Status:

Waiting for input...

Result will appear here

Main Thread (HTML)


const worker = new Worker(URL.createObjectURL(new Blob([
    `'use strict';
    onmessage = function(e) {
        const numbers = e.data.numbers;
        const result = numbers.reduce((acc, num) => acc + num, 0);
        postMessage({ sum: result, duration: Date.now() - e.data.startTime });
    };`
], { type: 'application/javascript' })));

document.getElementById('startWorker').addEventListener('click', () => {
    const numbers = document.getElementById('inputNumbers').value
    .split(',')
    .map(Number)
    .filter(n => !isNaN(n));
    
    if (numbers.length > 0) {
        document.getElementById('status').textContent = 'Processing...';
        document.getElementById('result').className = "mt-4 h-32 bg-white/60 rounded-lg flex items-center justify-center text-gray-500 italic";
        document.getElementById('result').textContent = 'Calculating...';

        worker.postMessage({
            numbers: numbers,
            startTime: Date.now()
        });

        worker.onmessage = function(e) {
            document.getElementById('status').innerHTML = `
                ✓ Completed in ${e.data.duration}ms
            `;
            document.getElementById('result').textContent = `Sum: ${e.data.sum}`;
        };
    }
});

Worker Thread Code


// Web Worker Script
onmessage = function(e) {
    const numbers = e.data.numbers;
    const result = numbers.reduce((acc, num) => acc + num, 0);
    postMessage({ 
        sum: result,
        duration: Date.now() - e.data.startTime,
        workerThreadId: self.threadId // Simulated thread ID
    });
};

Technical Demo

🟢

Main Thread

Responsive

🟡

Worker Thread

Active

🟠

Shared Memory

Safe Access

This demo shows how web workers keep the UI responsive by offloading computation
Try typing a large number of values (10000+) to see the worker handle it smoothly

Why Web Workers Matter

Before Workers


for (let i = 0; i < 1000000000; i++) {
    // Synchronous calculation
}

Main thread blocks for ~5 seconds

With Workers


const worker = new Worker('sum-worker.js');
worker.postMessage([1,2,3,4,5]);

worker.onmessage = function(result) {
    console.log('Completed in', result.duration);
};

UI stays responsive