Cosa sono le macro e micro attività?

I macro-task sono grandi fasi di alto livello del lavoro del browser, come il parsing HTML, la costruzione del DOM, la costruzione del CSSOM, il calcolo degli stili, la costruzione dell'albero di rendering, layout, pittura e composizione. Formano il pipeline principale del rendering.

Le micro-task sono azioni più piccole e dettagliate che vengono eseguite dopo aver completato la macro-task corrente e prima di iniziare la successiva. Includono la gestione di promesse (Promise), MutationObserver, queueMicrotask.

La differenza chiave è che le micro-task vengono sempre immediatamente eseguite dopo la macro-task corrente, mentre la successiva macro-task (ad esempio, il prossimo frame di rendering o la gestione dell'evento timer setTimeout) viene eseguita solo dopo che la coda di micro-task è vuota.

Esempio di ordine di esecuzione:

// Macro-task (codice iniziale)
console.log('Inizio');

// Macro-task (timer)
setTimeout(() => {
  console.log('Timer');
}, 0);

// Micro-task (promessa)
Promise.resolve().then(() => {
  console.log('Promessa');
});

// Macro-task (fine del codice iniziale)
console.log('Fine');

Output nella console:

Inizio
Fine
Promessa
Timer

Ordine di esecuzione:

1. Viene eseguita la macro-task iniziale (lo script principale).
2. console.log('Inizio').
3. setTimeout mette la macro-task in coda.
4. Promise.resolve().then() mette la micro-task in coda.
5. console.log('Fine').
6. La macro-task principale termina.
7. La coda di micro-task viene verificata: viene eseguita Promise.resolve().then().
8. console.log('Promessa').
9. La coda di micro-task è vuota.
10. Il browser processa le task nel ciclo di eventi, passa alla successiva macro-task.
11. La macro-task di setTimeout viene processata.
12. console.log('Timer').
13. La macro-task termina.

Questa comprensione è importante per gestire l'ordine di esecuzione delle operazioni asincrone e capire come funziona l'Event Loop.