Šta su makro i mikro zadaci?

Makro zadaci su veliki, visokorazredni stadiji rada pregledača, kao što su parsiranje HTML-a, izgradnja DOM-a, izgradnja CSSOM-a, računanje stilova, izgradnja render stabla, layout, bojenje (Paint) i kompozicija (Composite). Oni formiraju glavni lanac renderovanja.

Mikro zadaci su manje, detaljnije akcije koje se izvršavaju nakon završetka trenutnog makro zadatka i pre početka sledećeg. Oni uključuju obradu obećanja (Promise), MutationObserver, queueMicrotask.

Ključna razlika je u tome što mikro zadaci uvek izvršavaju odmah nakon trenutnog makro zadatka, dok se sledeći makro zadatak (npr. sledeći okvir renderovanja ili obrada događaja tajmera setTimeout) izvršava tek nakon što je red mikro zadataka prazan.

Primer reda izvršavanja:

// Makro zadatak (početni kod)
console.log('Početak');

// Makro zadatak (tajmer)
setTimeout(() => {
  console.log('Tajmer');
}, 0);

// Mikro zadatak (obećanje)
Promise.resolve().then(() => {
  console.log('Obećanje');
});

// Makro zadatak (kraj početnog koda)
console.log('Kraj');

Izlaz u konzoli:

Početak
Kraj
Obećanje
Tajmer

Red izvršavanja:

1. Izvršava se početni makro zadatak (glavni skript).
2. console.log('Početak').
3. setTimeout stavlja makro zadatak u red.
4. Promise.resolve().then() stavlja mikro zadatak u red.
5. console.log('Kraj').
6. Glavni makro zadatak je završen.
7. Proverava se red mikro zadataka: izvršava se Promise.resolve().then().
8. console.log('Obećanje').
9. Red mikro zadataka je prazan.
10. Pregledač obrađuje zadatke u petlji događaja, prelazi na sledeći makro zadatak.
11. Obradjuje se makro zadatak iz setTimeout.
12. console.log('Tajmer').
13. Makro zadatak je završen.

Ovo razumevanje je važno za upravljanje redosledom izvršavanja asinhronih operacija i razumevanje kako funkcioniše Event Loop.