Worker (Web Workers) în JavaScript

Cereri HTTP și comunicare Toate browserele moderne

Rulează cod JavaScript pe un fir separat, ca operațiile grele să nu blocheze pagina.

Sintaxă
const worker = new Worker("calcul.js", { type: "module" });
worker.postMessage(date)
worker.terminate()

Ce face Worker (Web Workers)

Un worker rulează un fișier JavaScript în paralel cu pagina. Pagina și workerul nu împart variabile: comunică prin mesaje, cu postMessage(date) și evenimentul message. Datele sunt copiate (ca la structuredClone), iar un ArrayBuffer poate fi transferat fără copiere.

În worker nu există document sau window, dar există fetch, temporizatoarele și majoritatea API-urilor. terminate() oprește workerul imediat. În Node.js, echivalentul este modulul node:worker_threads.

Parametri

Parametru Descriere
url Fișierul workerului.
optiuni Opțional. { type: "module" } pentru import în worker.

Ce returnează

Un obiect Worker.

Exemple

Exemplul 1: Un calcul greu mutat în worker

// fisier: prime.js (workerul)
self.addEventListener("message", (e) => {
  const limita = e.data;
  let numar = 0;
  for (let n = 2; n <= limita; n++) {
    let prim = true;
    for (let d = 2; d * d <= n; d++) if (n % d === 0) { prim = false; break; }
    if (prim) numar++;
  }
  self.postMessage(numar);
});

// fisier: pagina.js
const worker = new Worker("prime.js");
worker.addEventListener("message", (e) => {
  console.log("numere prime:", e.data);
  worker.terminate();
});
worker.postMessage(1_000_000);
console.log("pagina rămâne utilizabilă");

Rezultat în browser

pagina rămâne utilizabilă
numere prime: 78498

Greșeli frecvente

  • Încerci să modifici pagina din worker (document.querySelector) și primești ReferenceError: document is not defined. Trimite rezultatul paginii și las-o pe ea să modifice DOM-ul.
  • Deschizi pagina direct din fișier (file://) și workerul nu pornește. Workerii au nevoie de un server, chiar și unul local.

Comenzi înrudite

  • BroadcastChannel / MessageChannel: Trimite mesaje între file, ferestre și workers deschise pe același site (BroadcastChannel) sau între două capete legate (MessageChannel).
  • structuredClone: Creează o copie completă (în adâncime) a unei valori: obiecte, tablouri, Date, Map, Set.
  • Atomics și SharedArrayBuffer: Memorie partajată între fire de execuție (workers) și operații atomice care nu se calcă pe picioare.