18.4 Web Workers

Overview

Web Workers allow JavaScript to run in background threads, enabling parallel execution without blocking the main thread.

Why Web Workers?

┌─────────────────────────────────────────────────────────────────────────┐
│                    Main Thread Problem                                  │
├─────────────────────────────────────────────────────────────────────────┤
│                                                                         │
│  WITHOUT WEB WORKERS:                                                   │
│  ┌──────────────────────────────────────────────────────┐              │
│  │ Main Thread                                          │              │
│  │ ┌─────┐ ┌──────────────────────┐ ┌─────┐           │              │
│  │ │ UI  │ │   Heavy Computation   │ │ UI  │           │              │
│  │ └─────┘ └──────────────────────┘ └─────┘           │              │
│  │         ↑ UI FROZEN! ↑                               │              │
│  └──────────────────────────────────────────────────────┘              │
│                                                                         │
│  WITH WEB WORKERS:                                                      │
│  ┌──────────────────────────────────────────────────────┐              │
│  │ Main Thread                                          │              │
│  │ ┌─────┐ ┌─────┐ ┌─────┐ ┌─────┐ ┌─────┐           │              │
│  │ │ UI  │ │ UI  │ │ UI  │ │ UI  │ │ UI  │ ← Smooth! │              │
│  │ └─────┘ └─────┘ └─────┘ └─────┘ └─────┘           │              │
│  └──────────────────────────────────────────────────────┘              │
│  ┌──────────────────────────────────────────────────────┐              │
│  │ Worker Thread                                        │              │
│  │ ┌──────────────────────┐                            │              │
│  │ │   Heavy Computation   │ ← Runs in parallel        │              │
│  │ └──────────────────────┘                            │              │
│  └──────────────────────────────────────────────────────┘              │
│                                                                         │
└─────────────────────────────────────────────────────────────────────────┘

Types of Workers

Basic Worker Usage

Main Thread (main.js)

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

// Send message to worker
worker.postMessage({ type: 'calculate', data: [1, 2, 3] });

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

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

// Terminate worker
worker.terminate();

Worker Thread (worker.js)

// Receive messages
self.onmessage = (event) => {
  const { type, data } = event.data;

  if (type === 'calculate') {
    const result = heavyCalculation(data);
    self.postMessage(result);
  }
};

function heavyCalculation(data) {
  // CPU-intensive work here
  return data.reduce((a, b) => a + b, 0);
}

Communication Pattern

┌─────────────────────────────────────────────────────────────────────────┐
│                    Message Passing                                      │
├─────────────────────────────────────────────────────────────────────────┤
│                                                                         │
│   Main Thread                           Worker Thread                   │
│   ┌─────────┐                          ┌─────────┐                     │
│   │         │   postMessage(data)      │         │                     │
│   │         │ ─────────────────────▶   │         │                     │
│   │         │                          │ process │                     │
│   │         │   postMessage(result)    │         │                     │
│   │         │ ◀─────────────────────   │         │                     │
│   └─────────┘                          └─────────┘                     │
│                                                                         │
│   Note: Data is COPIED, not shared (structured clone)                   │
│                                                                         │
└─────────────────────────────────────────────────────────────────────────┘

Transferable Objects

// Transfer ownership (no copy, just move)
const buffer = new ArrayBuffer(1024);
worker.postMessage(buffer, [buffer]);
// buffer is now unusable in main thread!

Worker Limitations

• •No DOM access
• •No window object
• •Limited APIs available
• •Communication overhead
• •No shared memory (except SharedArrayBuffer)

Summary

• •Web Workers enable parallel JavaScript
• •Use for CPU-intensive tasks
• •Communication via postMessage
• •Data is copied, not shared
• •Use transferables for large data