JavaScript Web Workers for CPU-intensive browser tasks

CPU-intensive JavaScript tasks block the main thread, freezing the UI and making the page unresponsive.

Use Web Workers to run code in background threads:

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

// Send data to worker
worker.postMessage({ type: 'process', data: largeDataset });

// Receive results
worker.onmessage = (event) => {
console.log('Result:', event.data);
updateUI(event.data);
};

worker.onerror = (error) => {
console.error('Worker error:', error.message);
};

// Terminate when done
worker.terminate();

// worker.js
self.onmessage = (event) => {
const { type, data } = event.data;
if (type === 'process') {
const result = heavyComputation(data);
self.postMessage(result);
}
};

// Inline worker (no separate file):
const blob = new Blob([
self.onmessage = (e) => {
const result = e.data.map(n => n * n);
self.postMessage(result);
};
], { type: 'application/javascript' });
const inlineWorker = new Worker(URL.createObjectURL(blob));

// With Transferable objects (zero-copy):
const buffer = new ArrayBuffer(1024);
worker.postMessage({ buffer }, [buffer]); // Transfer ownership
// buffer.byteLength is now 0 in main thread

Web Workers run in separate threads, keeping the main thread free for UI updates. Use Transferable objects to avoid copying large data.