Web Workers computation tIn vaD yaj

JavaScript wa' thread Daq Qu'. computation-heavy task (JSON tIn parse, image resize, pathfinding) Qu'DI' page Hoch block: scroll pagh, click pagh, animation pagh. Web Workers real background thread nob. decade law' Hoch browser Daq support.

main thread qatlh Qagh

browser main thread cha' Qu': JavaScript Qu' 'ej rendering, layout, input events. for loop 800ms Qu'DI' page 800ms freeze. async/await 'ej Promises QaH pagh: code qaSDI' Qu' schedule, 'ach thread vo' work lan pagh. synchronous loop synchronous reH.

// This blocks the main thread completely, Promise or not
async function findPrimes(limit) {
  const primes = [];
  for (let n = 2; n <= limit; n++) {
    if (isPrime(n)) primes.push(n);
  }
  return primes;
}

work worker Daq jaH

Web Worker own global context Daq Qu'. DOM, window, page variables tlhap pagh. message passing neH.

// worker.js
self.onmessage = (event) => {
  const { limit } = event.data;
  const primes = [];
  for (let n = 2; n <= limit; n++) {
    if (isPrime(n)) primes.push(n);
  }
  self.postMessage({ primes });
};

function isPrime(n) {
  if (n < 2) return false;
  for (let i = 2; i * i <= n; i++) {
    if (n % i === 0) return false;
  }
  return true;
}

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

worker.postMessage({ limit: 1_000_000 });

worker.onmessage = (event) => {
  console.log(`Found ${event.data.primes.length} primes`);
};

page responsive reH, worker.js million numbers Qu'. loop OS thread pIm Daq Qu'.

worker Promise Daq wrap

raw onmessage/postMessage Qatlh (request response rap poQ). wrapper Dun, worker async API rap:

function runInWorker(worker, payload) {
  return new Promise((resolve, reject) => {
    const handleMessage = (event) => {
      cleanup();
      resolve(event.data);
    };
    const handleError = (error) => {
      cleanup();
      reject(error);
    };
    const cleanup = () => {
      worker.removeEventListener('message', handleMessage);
      worker.removeEventListener('error', handleError);
    };
    worker.addEventListener('message', handleMessage);
    worker.addEventListener('error', handleError);
    worker.postMessage(payload);
  });
}

const result = await runInWorker(worker, { limit: 1_000_000 });
console.log(result.primes.length);

wa' in-flight request neH. concurrent requests poQ vaj message id tag, response id rap.

copy 'ej transfer

default postMessage data clone (structured clone algorithm). objects, arrays, Map, Date, typed arrays Qap. functions, DOM nodes, class instances methods Qapbe'. binary payloads tIn (ArrayBuffer) clone Qagh - megabytes copy.

Transferable objects ownership nob, copy pagh:

const buffer = new ArrayBuffer(64 * 1024 * 1024); // 64MB
worker.postMessage({ buffer }, [buffer]);
// `buffer` is now unusable in this thread — ownership moved to the worker

transfer vaj sending side buffer.byteLength 0. real ownership handoff. wa' side neH lo'. copy pagh vaj nom.

worker Qagh Doch

worker overhead ghaj: spin up few ms, message structured clone. work few ms vaj overhead tIn. worker Dun:

• data tIn parse (CSV, JSON, binary)
• image/video/audio processing
• CPU-bound algorithms (pathfinding, physics, cryptography)
• interaction jank

worker Qagh: DOM (tlhap pagh), tiny input low latency, I/O-bound work (fetch main thread block pagh).

yaj

main thread resource rap: code 'ej browser render. long synchronous task Hoch starve. Web Workers real separate thread nob - async/await laHbe'.