Web Workers

Background threads, message passing, and performance optimization.

Overview

Web Workers run JavaScript in background threads.

Key Concepts

• Dedicated Workers — Single script connection
• Shared Workers — Multiple connections
• Message Passing — Communication via postMessage
• No DOM Access — Workers can't access DOM
• OffscreenCanvas — Canvas rendering in worker

Code Examples

<button id="start">Start Calculation</button>
<div id="result"></div>

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

worker.postMessage({ numbers: [1, 2, 3, 4, 5] });

worker.onmessage = (e) => {
  document.getElementById('result').textContent = 
    `Result: ${e.data.result}`;
};

document.getElementById('start').addEventListener('click', () => {
  const numbers = Array.from({ length: 1000000 }, () => 
    Math.floor(Math.random() * 1000)
  );
  worker.postMessage({ numbers });
});
</script>

<!-- worker.js -->
self.onmessage = (e) => {
  const { numbers } = e.data;
  
  // Heavy computation
  const result = numbers.reduce((acc, num) => {
    return acc + Math.sqrt(num);
  }, 0);
  
  self.postMessage({ result });
};

<!-- Shared Worker -->
<script>
const sharedWorker = new SharedWorker('shared-worker.js');
sharedWorker.port.start();

sharedWorker.port.postMessage({ action: 'connect' });

sharedWorker.port.onmessage = (e) => {
  console.log('Received:', e.data);
};
</script>

<!-- shared-worker.js -->
const connections = new Set();

self.onconnect = (e) => {
  const port = e.ports[0];
  connections.add(port);

  port.onmessage = (event) => {
    // Broadcast to all connections
    connections.forEach(conn => {
      conn.postMessage(event.data);
    });
  };

  port.start();
};

Practice

Offload heavy calculations to a Web Worker and display progress.