Co jsou makro- a mikroúkoly?

Makroúkoly jsou velké, vysoce úrovňové fáze práce prohlížeče, jako je parsování HTML, konstrukce DOM, konstrukce CSSOM, výpočet stylů, konstrukce renderovacího stromu, rozvržení (Layout), malování (Paint) a složení (Composite). Tvoří hlavní výrobní linku renderování.

Mikroúkoly jsou menší, podrobnější akce, které se provádějí po dokončení aktuální makroúkoly a před začátkem další. Patří sem zpracování slibů (Promise), MutationObserver, queueMicrotask.

Klíčový rozdíl je v tom, že mikroúkoly se vždy okamžitě provedou po aktuální makroúkolě, zatímco následující makroúkol (například další renderovací snímek nebo zpracování události časovače setTimeout) se provede až poté, co je fronta mikroúkolů prázdná.

Příklad pořadí provádění:

// Makroúkol (počáteční kód)
console.log('Začátek');

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

// Mikroúkol (slib)
Promise.resolve().then(() => {
  console.log('Slib');
});

// Makroúkol (konec počátečního kódu)
console.log('Konec');

Výstup v konzoli:

Začátek
Konec
Slib
Časovač

Pořadí provádění:

1. Spustí se počáteční makroúkol (hlavní skript).
2. console.log('Začátek').
3. setTimeout vloží makroúkol do fronty.
4. Promise.resolve().then() vloží mikroúkol do fronty.
5. console.log('Konec').
6. Hlavní makroúkol je dokončen.
7. Zkontroluje se fronta mikroúkolů: provede se Promise.resolve().then().
8. console.log('Slib').
9. Fronta mikroúkolů je prázdná.
10. Prohlížeč zpracovává úkoly v událostní smyčce, přechází na další makroúkol.
11. Makroúkol z setTimeout je zpracován.
12. console.log('Časovač').
13. Makroúkol je ukončen.

Toto pochopení je důležité pro řízení pořadí provádění asynchronních operací a pochopení, jak funguje Event Loop.