Frontend Academy · Lezione

Event loop: call stack, coda e microtask

Event loop: call stack, coda e microtask è una lezione Frontend 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 Frontend Academy, e i tuoi progressi si sincronizzano tra il web e l'app CoddyKit. Il corso Frontend Academy include 4 lezioni in totale.

JavaScript è a thread singolo

JavaScript viene eseguito su un solo thread: può eseguire una sola porzione di codice alla volta. Eppure gestisce migliaia di operazioni asincrone (richieste di rete, timer, eventi dell'interfaccia utente) senza bloccarsi. Come? Grazie al ciclo degli eventi.

Lo stack delle chiamate

Lo stack delle chiamate è il luogo in cui JavaScript tiene traccia della funzione attualmente in esecuzione. Quando viene chiamata una funzione, viene inserito un frame. Quando la funzione restituisce un risultato, il frame viene rimosso. Se lo stack è pieno (a causa di una ricorsione infinita), si verifica uno stack overflow.

function c() { /* does something */ }
function b() { c(); }
function a() { b(); }
a();

// Call stack during c():
// c    ← top
// b
// a
// (anonymous)

Web API — Delegare il lavoro

Quando JavaScript chiama una funzione asincrona (setTimeout, fetch, addEventListener), il lavoro viene delegato a una Web API nel browser. Il motore JS continua con la riga successiva: non attende.

console.log('1');
setTimeout(() => console.log('2'), 0); // handed to Web API
console.log('3');
// Output: 1, 3, 2

La coda delle attività (coda delle macrotask)

Quando un'operazione della Web API termina (scatta un timer, una richiesta fetch viene risolta), il callback viene inserito nella coda delle attività (coda delle macrotask). Il ciclo degli eventi sposta il callback nello stack delle chiamate solo quando lo stack è vuoto.

La coda delle microtask

Le Promise utilizzano una coda delle microtask, una coda ad alta priorità. Dopo il completamento di ogni attività e prima di prelevare quella successiva, tutte le microtask in attesa vengono eseguite. Le microtask vengono sempre eseguite prima della macrotask successiva.

console.log('1');
setTimeout(() => console.log('timeout'), 0);  // macrotask
Promise.resolve().then(() => console.log('promise')); // microtask
console.log('2');
// Output: 1, 2, promise, timeout

Il ciclo degli eventi in azione

L'algoritmo del ciclo degli eventi: 1) eseguire l'attività corrente dallo stack delle chiamate fino a svuotarlo; 2) eseguire tutte le microtask presenti nella coda; 3) eseguire eventualmente il rendering; 4) prelevare la macrotask successiva e ripetere.

queueMicrotask()

queueMicrotask(fn) pianifica un callback nella coda delle microtask senza creare una Promise. Di solito non è necessario utilizzarla direttamente, ma è utile per capire come le librerie implementano la pianificazione delle attività.

queueMicrotask(() => console.log('microtask'));
console.log('sync');
// Output: sync, microtask

Perché le attività lunghe bloccano l'interfaccia

Se un'attività sincrona viene eseguita troppo a lungo (ad esempio un ciclo stretto che elabora una grande quantità di dati), il ciclo degli eventi non può gestire gli eventi dell'interfaccia né eseguire il rendering. La pagina si blocca. Suddivida il lavoro lungo in blocchi usando setTimeout, così da restituire il controllo al ciclo degli eventi.

// Bad — blocks the UI for seconds:
for (let i = 0; i < 10_000_000; i++) { /* heavy work */ }

// Better — yield periodically:
async function processInChunks(items) {
  for (let i = 0; i < items.length; i++) {
    process(items[i]);
    if (i % 100 === 0) await new Promise(r => setTimeout(r, 0)); // yield
  }
}

Web Worker — vero parallelismo

Per le attività che richiedono molta CPU, utilizzi un Web Worker, cioè un thread separato con un proprio ciclo degli eventi. I worker comunicano con il thread principale tramite postMessage. Nessuna memoria condivisa, nessuna race condition.

requestAnimationFrame

requestAnimationFrame(callback) pianifica un callback prima del prossimo aggiornamento del rendering del browser. Lo utilizzi per le animazioni gestite da JavaScript: si sincronizza con la frequenza di aggiornamento dello schermo (in genere 60 fps).

function animate(timestamp) {
  // update positions based on timestamp
  element.style.transform = `translateX(${timestamp * 0.1 % 400}px)`;
  requestAnimationFrame(animate);
}
requestAnimationFrame(animate);

Visualizzare il ciclo degli eventi

La demo interattiva disponibile su latentflip.com/loupe consente di incollare del codice e osservare lo stack delle chiamate, la Web API, la coda delle attività e il ciclo degli eventi al rallentatore. È essenziale per sviluppare una solida intuizione del funzionamento.

Verifica rapida

Dopo la risoluzione di una Promise, in quale coda viene eseguito il relativo callback .then()?

Riepilogo: il ciclo degli eventi

JavaScript è a thread singolo. Il lavoro asincrono viene affidato alle Web API. I callback tornano tramite la coda delle attività (setTimeout, callback di fetch) o la coda delle microtask (Promise). Il ciclo degli eventi esegue le microtask dopo ogni attività, prima del rendering successivo o della macrotask successiva. Il codice sincrono lungo blocca tutto.

Domande Frequenti

La lezione «Event loop: call stack, coda e microtask» è gratuita?

Sì — il testo completo di «Event loop: call stack, coda e microtask» è 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 Frontend Academy, passa a CoddyKit PRO. Il corso Frontend Academy include 4 lezioni in totale.

Cosa imparerò in «Event loop: call stack, coda e microtask»?

Visualizzare il funzionamento dell’esecuzione JavaScript: call stack, coda dei task e microtask generati dalle Promise, comprendendo perché l’interfaccia non si blocca durante le operazioni asincrone. Eserciti Frontend 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 Frontend Academy?

Non è richiesta alcuna esperienza precedente. Frontend 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 «Event loop: call stack, coda e microtask»?

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 Frontend Academy?

Sì. Ogni lezione Frontend 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

Event loop: call stack, coda e microtask
Callback e callback hell
Promise: then, catch, finally e Promise.all
async/await e gestione degli errori

← Torna a Frontend Academy