Web Workers (Background Threads)

// Main thread — creating and using a worker

// === worker.js (separate file) ===
// self.onmessage = function(event) {
//   const { numbers } = event.data;
//   
//   // Heavy computation in background
//   const sum = numbers.reduce((acc, n) => acc + n, 0);
//   const avg = sum / numbers.length;
//   const sorted = [...numbers].sort((a, b) => a - b);
//   
//   // Send result back
//   self.postMessage({ sum, avg, sorted });
// };

// === main.js ===
// const worker = new Worker("worker.js");
//
// // Send data to worker
// const bigArray = Array.from({ length: 1000000 }, () => Math.random() * 1000);
// worker.postMessage({ numbers: bigArray });
//
// // Receive result (UI stays responsive!)
// worker.onmessage = (event) => {
//   console.log("Sum:", event.data.sum);
//   console.log("Average:", event.data.avg);
//   console.log("UI was NOT blocked during computation!");
// };
//
// worker.onerror = (error) => {
//   console.error("Worker error:", error.message);
// };

// Inline Worker (no separate file needed)
function createInlineWorker(fn) {
  const blob = new Blob([`self.onmessage = ${fn.toString()}`], 
    { type: "application/javascript" });
  return new Worker(URL.createObjectURL(blob));
}

// Demo: simulate heavy computation
function heavyCompute(numbers) {
  console.time("Heavy computation");
  const result = numbers.reduce((acc, n) => acc + Math.sqrt(n), 0);
  console.timeEnd("Heavy computation");
  return result;
}

const testData = Array.from({ length: 100000 }, (_, i) => i);
console.log("Result:", heavyCompute(testData));
console.log("This blocked the UI! Web Workers prevent this.");