Mi a makro- és mikrofeladat?

A makrofeladatok a böngésző nagy, magas szintű munkafázisai, mint például HTML-parsing, DOM-építés, CSSOM-építés, stílusok számítása, renderfa építése, layout, festés (Paint) és összetétel (Composite). Ezek alkotják a fő renderláncot.

A mikrofeladatok kisebb, részletesebb műveletek, amelyek a jelenlegi makrofeladat befejezése után és a következő kezdete előtt hajtódnak végre. Ide tartozik a promise-k (Promise), MutationObserver, queueMicrotask kezelése.

A fő különbség az, hogy a mikrofeladatok mindig azonnal a jelenlegi makrofeladat után futnak, míg a következő makrofeladat (például a következő render frame vagy a setTimeout időzítő esemény) csak akkor fut le, miután a mikrofeladatok sor véget ért.

Példa végrehajtási sorrendre:

// Makrofeladat (kezdeti kód)
console.log('Kezdet');

// Makrofeladat (időzítő)
setTimeout(() => {
  console.log('Időzítő');
}, 0);

// Mikrofeladat (ígéret)
Promise.resolve().then(() => {
  console.log('Ígéret');
});

// Makrofeladat (kód vége)
console.log('Vége');

A konzolon a kimenet:

Kezdet
Vége
Ígéret
Időzítő

Végrehajtási sorrend:

1. A kezdeti makrofeladat (fő szkript) fut.
2. console.log('Kezdet').
3. A setTimeout a makrofeladatot a sorba helyezi.
4. A Promise.resolve().then() a mikrofeladatot a sorba helyezi.
5. console.log('Vége').
6. A fő makrofeladat befejeződik.
7. A mikrofeladatok sorát ellenőrizzük: a Promise.resolve().then() végrehajtódik.
8. console.log('Ígéret').
9. A mikrofeladatok sora üres.
10. A böngésző az eseményciklusban feldolgozza a feladatokat, átmegy a következő makrofeladatra.
11. A setTimeout makrofeladata feldolgozásra kerül.
12. console.log('Időzítő').
13. A makrofeladat befejeződik.

Ez a megértés fontos az aszinkron műveletek végrehajtási sorrendjének kezelésében és az Event Loop működésének megértésében.