Ce sunt sarcinile macro și micro?

Task-urile macro sunt etape mari, de nivel înalt, ale procesului browser-ului, cum ar fi parsarea HTML, construirea DOM, construirea CSSOM, calcularea stilurilor, construirea arborelui de redare, layout, pictare (Paint) și compoziție (Composite). Ele formează conductul principal de redare.

Task-urile micro sunt acțiuni mai mici, detaliate, care sunt executate după finalizarea task-ului macro curent și înainte de începerea următorului. Acestea includ gestionarea promisiunilor (Promise), MutationObserver, queueMicrotask.

Diferența cheie este că task-urile micro sunt întotdeauna executate imediat după task-ul macro curent, în timp ce următorul task macro (de exemplu, următorul cadru de redare sau gestionarea evenimentului timer setTimeout) se execută doar după ce coada de task-uri micro este goală.

Exemplu de ordine de execuție:

// Task macro (cod inițial)
console.log('Început');

// Task macro (temporizator)
setTimeout(() => {
  console.log('Temporizator');
}, 0);

// Task micro (promisiune)
Promise.resolve().then(() => {
  console.log('Promisiune');
});

// Task macro (sfârșitul codului inițial)
console.log('Sfârșit');

Ieșire în consolă:

Început
Sfârșit
Promisiune
Temporizator

Ordinea de execuție:

1. Se execută task-ul macro inițial (scriptul principal).
2. console.log('Început').
3. setTimeout plasează task-ul macro în coadă.
4. Promise.resolve().then() plasează task-ul micro în coadă.
5. console.log('Sfârșit').
6. Task-ul macro principal se încheie.
7. Se verifică coada de task-uri micro: se execută Promise.resolve().then().
8. console.log('Promisiune').
9. Coada de task-uri micro este goală.
10. Browser-ul procesează task-urile în bucla de evenimente, trece la următorul task macro.
11. Task-ul macro de setTimeout este procesat.
12. console.log('Temporizator').
13. Task-ul macro se încheie.

Această înțelegere este importantă pentru gestionarea ordinii de execuție a operațiilor asincrone și pentru înțelegerea modului în care funcționează Event Loop-ul.