JavaScript Academy · Lezione

Creare un Web Worker

Avvii un thread in background per eseguire attività.

Creare un Web Worker è una lezione JavaScript Academy gratuita su CoddyKit. Questa è la lezione 1 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.

Perché usare Web Workers

JavaScript viene eseguito su un singolo thread principale. Un calcolo lungo blocca tutto: l'interfaccia si congela e i clic non rispondono più. I Web Workers eseguono gli script in un thread in background, mantenendo reattiva la pagina.

Creare un Worker

Avvii un worker passando un URL di script al costruttore Worker. Il browser carica quel file e lo esegue in un thread separato.

const worker = new Worker('worker.js');
// The code in worker.js now runs on its own thread.

Lo script del worker

Il file del worker è JavaScript puro, ma viene eseguito nel suo ambito globale (senza window e senza document). Comunica esclusivamente tramite messaggi.

// worker.js
console.log('worker started');
// This runs off the main thread.

Due ambiti globali separati

La pagina principale e il worker hanno ciascuno il proprio ambito globale e la propria memoria. Non possono condividere direttamente le variabili; si scambiano copie dei dati tramite messaggi.

Thread principale: window, DOM, interfaccia utente
Thread del worker: self, calcoli, nessun DOM

self nel worker

All'interno di un worker, l'oggetto globale è self (un DedicatedWorkerGlobalScope). Può collegarvi i gestori e chiamare le API, anche se spesso self viene omesso.

// worker.js
self.addEventListener('message', (e) => {
  console.log('worker got:', e.data);
});

Worker con moduli

Può creare un worker che utilizza import dei moduli ES passando l'opzione type: 'module'. In questo modo il worker può importare facilmente altri moduli.

const worker = new Worker('worker.js', { type: 'module' });
// Inside worker.js you can now use import statements.

Importare script (classici)

In un worker classico (non modulare), utilizzi importScripts per caricare altri script in modo sincrono nell'ambito del worker.

// Inside a classic worker:
importScripts('math-utils.js', 'helpers.js');
// Their globals are now available in the worker.

Terminare un worker

Arresti un worker dal thread principale con worker.terminate() oppure dall'interno con self.close(). In questo modo libera il thread e la relativa memoria.

// From the main thread:
worker.terminate();

// From inside the worker:
// self.close();

Gestire gli errori del worker

Ascolti l'evento error sul worker per intercettare le eccezioni non gestite generate al suo interno. L'evento contiene il messaggio, il nome del file e il numero di riga.

worker.addEventListener('error', (e) => {
  console.log('worker error:', e.message, 'at line', e.lineno);
});

Requisito della stessa origine

Lo script del worker deve essere fornito dalla stessa origine della pagina (oppure tramite un URL Blob). Non può caricare direttamente un worker da un URL arbitrario di un'origine diversa.

// Same-origin file path - works:
const w1 = new Worker('/js/worker.js');

// You can also build one from a Blob URL when needed.

Dedicated e Shared a confronto

Un Worker è dedicato: è associato alla pagina che lo ha creato. Un SharedWorker può essere raggiunto da più pagine della stessa origine. Questo corso si concentra sui worker dedicati.

Verifica rapida

Verifichi la Sua comprensione della creazione dei Web Workers.

Riepilogo

Ha imparato a creare Web Workers:

new Worker('worker.js') avvia un thread in background.
Il worker ha un proprio oggetto globale (self) e non dispone del DOM.
Utilizzi type: 'module' per gli import oppure importScripts nei worker classici.
terminate() / self.close() lo arrestano.
I worker devono avere la stessa origine.

Ora passeremo alla messaggistica tra thread.

Domande Frequenti

La lezione «Creare un Web Worker» è gratuita?

Sì — il testo completo di «Creare un Web Worker» è 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 «Creare un Web Worker»?

Avvii un thread in background per eseguire attività. 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 1 di 4.

Quanto tempo richiede la lezione «Creare un Web Worker»?

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