Avanzato15 min

Web Workers

Eseguire codice JavaScript in background senza bloccare l'interfaccia utente con i Web Workers.

Web Workers

JavaScript nel browser gira su un singolo thread. Operazioni pesanti (calcoli, elaborazione dati) bloccano l'interfaccia e la rendono inutilizzabile. I Web Workers risolvono questo problema eseguendo codice in un thread separato.

Creare un Worker

javascript

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

worker.postMessage({ numeri: [1, 2, 3, 4, 5] });

worker.onmessage = (evento) => {
  console.log("Risultato:", evento.data);
};

worker.onerror = (errore) => {
  console.error("Errore nel worker:", errore.message);
};

javascript

// worker.js — thread separato
self.onmessage = (evento) => {
  const { numeri } = evento.data;
  const somma = numeri.reduce((a, b) => a + b, 0);
  self.postMessage(somma);
};

Regole importanti

●I Workers non hanno accesso al DOM — possono solo elaborare dati
●La comunicazione avviene tramite messaggi (postMessage / onmessage)
●I dati vengono copiati, non condivisi (tranne con SharedArrayBuffer)

Caso d'uso pratico

javascript

// Elaborazione di un CSV pesante senza bloccare la UI
const csvWorker = new Worker("csv-worker.js");

document.getElementById("file").addEventListener("change", (e) => {
  const file = e.target.files[0];
  csvWorker.postMessage({ file });
});

csvWorker.onmessage = (evento) => {
  const { righe, errori } = evento.data;
  aggiornaTabella(righe);
  mostraErrori(errori);
};

Terminare un Worker

javascript

// Dal thread principale
worker.terminate();

// Dall'interno del worker
self.close();

Usa i Web Workers per operazioni che richiedono più di 50ms — la soglia oltre cui l'utente percepisce rallentamenti nell'interfaccia.