Web Worker Sandbox

Benchmark and visualize CPU-heavy tasks running on the main thread vs a background Web Worker.

THREAD ACTIVE (4.2ms)

Worker Script (self.onmessage)

PostMessage Payload (JSON):

Thread Terminal & Blob URL Code

[07:24:18]SYSTEM:Dedicated WebWorker initialized on background thread.

[07:24:18]MAIN ➔ WORKER:{"max": 5000}

[07:24:18]WORKER ➔ MAIN:{"status": "SUCCESS", "computed": 42000, "threads": 1}

// 1. Create worker from inline code Blob
const workerCode = `self.onmessage = function(e) {
  const max = e.data.max || 10000;
  const primes = [];
  
  for (let i = 2; primes.length < max; i++) {
    let isPrime = true;
    for (let j = 2; j <= Math.sqrt(i); j++) {
      if (i % j === 0) { isPrime = false; break; }
    }
    if (isPrime) primes.push(i);
  }
  
  self.postMessage({ count: primes.length, lastPrime: primes[primes.length - 1] });
};`;
const blob = new Blob([workerCode], { type: 'application/javascript' });
const worker = new Worker(URL.createObjectURL(blob));

// 2. Listen for messages from background thread
worker.onmessage = (event) => {
  console.log('Worker responded:', event.data);
};

// 3. Post payload to thread
worker.postMessage({"max": 5000});