JavaScript Academy · Lezione

Casi d'uso e limitazioni

Sappia quando i worker sono utili e cosa non possono fare.

Casi d'uso e limitazioni è una lezione JavaScript Academy gratuita su CoddyKit. Questa è la lezione 4 di 4. Puoi leggere la lezione completa qui gratuitamente — poi esercitati direttamente nel browser con un editor di codice integrato e un tutor IA disponibile 24/7. Fa parte del percorso di apprendimento JavaScript Academy, e i tuoi progressi si sincronizzano tra il web e l'app CoddyKit. Il corso JavaScript Academy include 4 lezioni in totale.

Per cosa sono utili i worker

I Web Workers sono particolarmente utili quando è necessario eseguire attività che richiedono molta CPU e che altrimenti bloccherebbero l'interfaccia:

Elaborazione di immagini e video
Analisi di file di grandi dimensioni (CSV, JSON)
Crittografia e hashing
Fisica, analisi dei dati e simulazioni

Nessun accesso al DOM

La limitazione principale è che i worker non possono interagire con il DOM. Non sono disponibili document né window. I worker calcolano i dati e li inviano indietro; il thread principale aggiorna l'interfaccia.

// Inside a worker:
// document.querySelector(...) -> ReferenceError
// Workers have no DOM at all.

Cosa è disponibile

I worker offrono comunque molte API utili: fetch, setTimeout, WebSocket, IndexedDB, crypto e array tipizzati. Pertanto, il recupero e l'archiviazione dei dati funzionano senza problemi in un thread separato.

// Inside a worker this is valid:
// const res = await fetch('/data.json');
// const json = await res.json();
// self.postMessage(json);

Limiti di structured clone

Ricordi che i messaggi vengono copiati tramite structured clone. Non è possibile inviare funzioni, nodi DOM o istanze di classe con metodi, ma solo i relativi dati serializzabili.

// Cannot be sent:
// worker.postMessage(() => {});      // function - fails
// worker.postMessage(document.body); // DOM node - fails

Costo di avvio e messaggistica

La creazione di un worker e la serializzazione dei messaggi comportano un costo. Per attività molto brevi, il costo della messaggistica può superare il vantaggio. I worker sono vantaggiosi per attività consistenti e prolungate.

Mantenere attivi i worker

Avviare un nuovo worker per ogni attività è inefficiente. Riutilizzi un worker di lunga durata e gli invii molti messaggi, oppure mantenga un piccolo pool di worker per il parallelismo.

// Reuse one worker for many tasks:
const worker = new Worker('worker.js');
function run(task) {
  worker.postMessage(task);
}
// Avoid: new Worker(...) on every single call.

Pool di worker

Per usare più core della CPU, crei diversi worker e distribuisca le attività tra loro. Tenga traccia di quali sono inattivi e assegni il lavoro in arrivo a quelli liberi.

const pool = [];
for (let i = 0; i < 4; i++) {
  pool.push(new Worker('worker.js'));
}
// Round-robin or queue tasks across the pool.

Condivisione della memoria

Nei casi avanzati, SharedArrayBuffer consente ai thread di condividere direttamente la memoria (con Atomics per un accesso sicuro). Richiede intestazioni di isolamento cross-origin specifiche ed è facile da usare in modo improprio.

// Requires COOP/COEP headers to be enabled.
// const shared = new SharedArrayBuffer(1024);
// Atomics.add(view, 0, 1); // safe concurrent update

Isolamento degli errori

Un errore non gestito in un worker non causa l'arresto anomalo della pagina. Si manifesta come un evento error sul worker, che dovrebbe essere gestito per registrare l'errore o riavviare il worker.

worker.onerror = (e) => {
  console.log('worker failed:', e.message);
  // optionally recreate the worker here
};

Quando NON usare i worker

Eviti i worker quando l'attività è banale, richiede aggiornamenti costanti del DOM o consiste principalmente nell'attendere la rete (un fetch asincrono non blocca già l'esecuzione). Li utilizzi per attività realmente vincolate dalla CPU.

Riunire il tutto

I Web Workers rinunciano all'accesso diretto al DOM e alla semplice condivisione dei dati in cambio del vero parallelismo. Li utilizzi per i calcoli pesanti, comunichi tramite messaggi, riutilizzi i worker e trasferisca i buffer di grandi dimensioni per mantenere l'app veloce e reattiva.

Verifica rapida

Verifichi la Sua comprensione dei casi d'uso e dei limiti dei worker.

Riepilogo

Ha imparato a conoscere i casi d'uso e i limiti dei worker:

Sono ideali per attività che richiedono molta CPU, ma non hanno accesso al DOM.
Molte API (fetch, IndexedDB, crypto) sono disponibili.
I messaggi vengono copiati tramite structured clone, quindi non è possibile inviare funzioni o nodi DOM.
Riutilizzi i worker o i pool per ammortizzare il costo di avvio.
Gli errori rimangono isolati nel worker.

Ha completato la sezione sui Web Workers. Prossimo argomento: IndexedDB.

Domande Frequenti

La lezione «Casi d'uso e limitazioni» è gratuita?

Sì — il testo completo di «Casi d'uso e limitazioni» è gratuito qui sul web. Per esercitarvi in modo interattivo (un editor di codice integrato e un tutor IA 24/7) e sbloccare il resto del corso JavaScript Academy, passa a CoddyKit PRO. Il corso JavaScript Academy include 4 lezioni in totale.

Cosa imparerò in «Casi d'uso e limitazioni»?

Sappia quando i worker sono utili e cosa non possono fare. Eserciti JavaScript Academy con codice pratico che esegui direttamente nel browser, e un tutor IA 24/7 risponde alle tue domande mentre lavori sulla lezione.

Ho bisogno di esperienza per iniziare JavaScript Academy?

Non è richiesta alcuna esperienza precedente. JavaScript Academy su CoddyKit è strutturato per principianti e studenti avanzati, quindi puoi iniziare da qui o dall'inizio e procedere al tuo ritmo. Questa è la lezione 4 di 4.

Quanto tempo richiede la lezione «Casi d'uso e limitazioni»?

La maggior parte delle lezioni CoddyKit richiede circa 5–10 minuti. Ogni lezione è breve e interattiva, quindi fai progressi costanti e riprendi esattamente da dove hai lasciato su web e app.

Posso scrivere ed eseguire codice in questa lezione JavaScript Academy?

Sì. Ogni lezione JavaScript Academy include un editor di codice integrato, quindi scrivi ed esegui codice reale direttamente nel tuo browser e ricevi feedback istantaneo dall'IA — nessuna configurazione locale necessaria.

Tutte le lezioni di questo corso

← Torna a JavaScript Academy