Cosa sono i web worker e a cosa servono?

I web worker sono un modo per eseguire codice JavaScript in un thread di background, separato dal thread principale dell'interfaccia utente del browser.

Scopo:

• Eseguire calcoli intensivi senza bloccare il thread principale, prevenendo il blocco dell'interfaccia.
• Elaborare grandi quantità di dati o eseguire operazioni lunghe (ad esempio parsing, compressione, richieste di rete in alcuni casi) in background.
• Migliorare le prestazioni e la reattività delle applicazioni web.

Tipi di web worker:

1. Dedicated Worker: Associato allo script che lo ha creato.
2. Shared Worker: Può essere condiviso tra più script che vengono eseguiti in diverse finestre o schede dello stesso dominio.
3. Service Worker: Intercetta le richieste di rete, gestisce la cache, fornisce accesso offline, supporta le notifiche push.

Esempio di creazione e utilizzo di un Dedicated Worker:

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

// Invia un messaggio al worker
worker.postMessage('Inizia calcoli pesanti');

// Riceve messaggi dal worker
worker.onmessage = function(event) {
  console.log('Ricevuto dal worker:', event.data);
};

// worker.js (codice del worker)
self.onmessage = function(event) {
  console.log('Ricevuto nel worker:', event.data);

  // Simulazione di calcoli pesanti
  let result = 0;
  for (let i = 0; i < 1000000000; i++) {
    result += i;
  }

  // Invia un messaggio di ritorno al thread principale
  self.postMessage('Calcoli completati, risultato: ' + result);
};

Limitazioni:

• Nessun accesso diretto al DOM.
• Non è possibile usare alcune variabili globali del thread principale (ad esempio, window, document).
• La comunicazione avviene tramite scambio asincrono di messaggi (postMessage e onmessage/addEventListener('message')).
• I dati tra thread vengono trasferiti tramite copia (algoritmo di clonazione strutturata), ma per grandi dati si può usare Transferable Objects per trasferire per riferimento (perdendo l'accesso nel thread originale).