Čo sú makro a mikro úlohy?

Makro úlohy sú veľké, vysokorozsahové fázy práce prehliadača, ako je parsovanie HTML, konštrukcia DOM, konštrukcia CSSOM, výpočet štýlov, konštrukcia renderovacieho stromu, layout, maľovanie (Paint) a kompozícia (Composite). Tvoria hlavný výrobný reťazec renderovania.

Mikro úlohy sú menšie, podrobnejšie akcie, ktoré sa vykonávajú po dokončení aktuálnej makro úlohy a pred začatím ďalšej. Zahŕňajú spracovanie sľubov (Promise), MutationObserver, queueMicrotask.

Kľúčový rozdiel je v tom, že mikro úlohy sa vždy okamžite vykonajú po aktuálnej makro úlohe, zatiaľ čo nasledujúca makro úloha (napríklad ďalší renderovací rámec alebo spracovanie udalosti časovača setTimeout) sa vykoná až potom, čo je fronta mikro úloh prázdna.

Príklad poradia vykonávania:

// Makro úloha (počiatočný kód)
console.log('Začiatok');

// Makro úloha (časovač)
setTimeout(() => {
  console.log('Časovač');
}, 0);

// Mikro úloha (sľub)
Promise.resolve().then(() => {
  console.log('Sľub');
});

// Makro úloha (koniec počiatočného kódu)
console.log('Koniec');

Výstup v konzole:

Začiatok
Koniec
Sľub
Časovač

Poradie vykonávania:

1. Vykoná sa počiatočná makro úloha (hlavný skript).
2. console.log('Začiatok').
3. setTimeout vloží makro úlohu do fronty.
4. Promise.resolve().then() vloží mikro úlohu do fronty.
5. console.log('Koniec').
6. Hlavná makro úloha je ukončená.
7. Skontroluje sa fronta mikro úloh: vykoná sa Promise.resolve().then().
8. console.log('Sľub').
9. Fronta mikro úloh je prázdna.
10. Prehliadač spracováva úlohy v cykle udalostí, prechádza na ďalšiu makro úlohu.
11. Makro úloha z setTimeout sa spracuje.
12. console.log('Časovač').
13. Makro úloha je ukončená.

Toto pochopenie je dôležité pre riadenie poradia vykonávania asynchrónnych operácií a pochopenie, ako funguje Event Loop.