Ce sunt web workers și la ce sunt folosiți?

Web workerii sunt o metodă de a executa scripturi în fire de fundal, separate de firul principal al interfeței utilizatorului.

Scopul lor principal:

• Îmbunătățirea performanței: Transferarea sarcinilor intensive în resurse (calcule complexe, procesarea unor volume mari de date, parsing) din firul principal, care se ocupă de randarea interfeței și gestionarea evenimentelor utilizatorului. Acest lucru previne blocarea paginii și îmbunătățește răspunsul aplicației.
• Paralelism: Permite executarea mai multor sarcini simultan, utilizând mai eficient procesoarele multi-core.

Există trei tipuri de web workers:

1. Dedicated Workers: Asociați cu o pagină specifică și accesibili doar acesteia.
2. Shared Workers: Pot fi accesibili din mai multe pagini sau file de tab din același domeniu.
3. Service Workers: Funcționează ca proxy-uri de rețea, interceptând cererile de rețea și permițând implementarea funcționalităților offline, notificări push și alte capabilități ale aplicațiilor web progresive (PWA).

Principii de funcționare:

• Context separat: Worker-ul are propriul obiect global și acces la un subset al API-ului browser-ului (fără acces la DOM, window, document, parent).
• Schimb de mesaje: Interacțiunea între firul principal și worker se face prin mesaje cu postMessage() și handler-ul de evenimente onmessage. Datele sunt transmise prin valoare (copiate) sau prin referință (Obiecte Transferabile).

Exemplu de utilizare a unui Dedicated Worker:

// main.js (firul principal)
const worker = new Worker('worker.js'); // Crearea worker-ului

worker.onmessage = (event) => {
  // Procesarea mesajului de la worker
  console.log('Primite de la worker:', event.data);
};

worker.postMessage('Începe o operație complexă'); // Trimiterea mesajului către worker

// worker.js (fișierul worker)
onmessage = (event) => {
  // Procesarea mesajului din firul principal
  console.log('Primite de la firul principal:', event.data);

  // Executarea unei sarcini complexe
  let result = 0;
  for (let i = 0; i < 1000000000; i++) {
    result += i;
  }

  // Trimiterea rezultatului înapoi
  postMessage(result);
};