🎉 75% of content is free forever — Unlock Premium from $10/mo →
CW
đŸ’ŧ Servicesâ„šī¸ Aboutâœ‰ī¸ ContactView Pricing Plansfrom $10

Web Workers

Web FoundationsđŸŸĸ Free Lesson

Advertisement

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>


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

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

sharedWorker.port.postMessage(&#123; action: 'connect' &#125;);

sharedWorker.port.onmessage = (e) => &#123;
  console.log('Received:', e.data);
&#125;;
</script>


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.

Need Expert Web Development Help?

Get personalized tutoring, project support, or professional consulting.

Advertisement