Cosa sono i web worker e a cosa servono?

I web worker sono un modo per eseguire script in thread di background, separati dal thread principale dell'interfaccia utente.

Il loro scopo principale:

• Migliorare le prestazioni: Spostare compiti intensivi in risorse (calcoli complessi, elaborazione di grandi volumi di dati, parsing) dal thread principale, responsabile del rendering dell'interfaccia e della gestione degli eventi utente. Ciò previene il blocco della pagina e migliora la reattività dell'applicazione.
• Parallelismo: Permette di eseguire più compiti contemporaneamente, sfruttando più efficacemente i processori multi-core.

Esistono tre tipi di web worker:

1. Dedicated Workers: Associati a una pagina specifica e accessibili solo da essa.
2. Shared Workers: Possono essere accessibili da più pagine o schede dello stesso dominio.
3. Service Workers: Funzionano come proxy di rete, intercettando le richieste di rete e consentendo di implementare funzionalità offline, notifiche push e altre capacità delle applicazioni web progressive (PWA).

Principi di funzionamento:

• Contesto separato: Il worker ha il suo oggetto globale e accesso a un sottoinsieme dell'API del browser (senza accesso al DOM, window, document, parent).
• Scambio di messaggi: L'interazione tra thread principale e worker avviene tramite messaggi usando postMessage() e il gestore di eventi onmessage. I dati vengono trasmessi per valore (copiati) o per riferimento (Oggetti Trasferibili).

Esempio di utilizzo di un Dedicated Worker:

// main.js (thread principale)
const worker = new Worker('worker.js'); // Creazione del worker

worker.onmessage = (event) => {
  // Elaborazione del messaggio dal worker
  console.log('Ricevuto dal worker:', event.data);
};

worker.postMessage('Inizia operazione complessa'); // Invio di un messaggio al worker

// worker.js (file del worker)
onmessage = (event) => {
  // Elaborazione del messaggio dal thread principale
  console.log('Ricevuto dal thread principale:', event.data);

  // Esecuzione di un compito complesso
  let result = 0;
  for (let i = 0; i < 1000000000; i++) {
    result += i;
  }

  // Invio del risultato indietro
  postMessage(result);
};