WebWorker Performance

Implementation: Executes computation synchronously on the main JavaScript thread.

for (let i = 0; i < totalPrimes; i++) {
    calculateNext();
    updateProgress(i / totalPrimes);
}
                        

If the dataset is large enough, the browser's UI freezes during calculation because the main thread is blocked (i.e. no additional code can be run, UI updates cannot be rendered) until all computations are finished.

Use case: Only acceptable for very short computations (<20ms).

Implementation: Offloads computation to one background worker thread.

const worker = new Worker('worker.js');
worker.onmessage = (event) => {
    updateProgress(event.data);
};
worker.postMessage(totalPrimes);
                        

UI remains responsive (60 FPS) while computation runs in parallel. The worker communicates progress via messages.

Use case: Perfect for single heavy tasks like image processing, data parsing, or complex calculations.

Performance: Usually fastest for CPU-bound tasks due to no coordination overhead.

Implementation: Splits work across N workers, with the main thread handling batching and messaging.

for (let i = 0; i < totalWorkers; i++) {
    const worker = new Worker('worker.js');
    worker.onmessage = (event) => {
        updateProgress(aggregateResults(event.data));
    };
    worker.postMessage(createBatch(i, totalWorkers, totalPrimes));
}
						

Each worker handles a subset of the problem. Main thread aggregates progress and results.

Trade-offs: Can be faster with large datasets but adds coordination overhead to the main thread for each message sent/received.

Use case: Large datasets that can be parallelized (batch processing, parallel searches).

Implementation: A "manager" worker creates and coordinates sub-workers, completely off the main thread.

// Main thread

const managerWorker = new Worker('manager.worker.js');
managerWorker.onmessage = (event) => {
    updateProgress(event.data);
};
managerWorker.postMessage(totalPrimes);

// manager.worker.js

for (let i = 0; i < totalWorkers; i++) {
    const worker = new Worker('sub.worker.js');
    worker.onmessage = (event) => {
        updateProgress(aggregateResults(event.data));
    };
    worker.postMessage(createBatch(i, totalWorkers, totalPrimes));
}
						

The Main thread only sends an initial request and receives the final result (and progress updates for the sake of this demo). All coordination happens in the background.

Benefits: Minimal main thread overhead, excellent for complex multi-step workflows or large datasets.

Use case: Complex background processing pipelines, data transformation chains, procedural generation.

Implementation: Processes work asynchronous using setTimeout(0) or async functions.

function computePrimesAsync(startIndex) {
    if (startIndex >= totalPrimes) {
        return;
    }
    
    const prime = calculateNext();
    updateProgress(startIndex / totalPrimes);
    setTimeout(() => computePrimesAsync(startIndex + 1), 0);
}

computePrimesAsync(0);
                        

UI stays responsive because the main thread periodically yields control for other tasks (rendering, user interactions). The animation stays smooth.

Trade-offs: Slower than synchronous execution due to yielding overhead, but much better user experience than blocking. Incredibly slow if the foreground is busy, for example when running canvas animations.

Use case: Good middle ground for medium-sized tasks that don't warrant WebWorker complexity. Significantly slower if the application generally is busy.