Czym są zadania makro i mikro?

Zadania makro to duże, wysokopoziomowe etapy pracy przeglądarki, takie jak parsowanie HTML, budowa DOM, budowa CSSOM, obliczanie stylów, budowa drzewa renderowania, układ (Layout), malowanie (Paint) i kompozycja (Composite). Tworzą główny pipeline renderowania.

Zadania mikro to mniejsze, bardziej szczegółowe działania, które są wykonywane po zakończeniu bieżącego zadania makro i przed rozpoczęciem następnego. Należą do nich obsługa obietnic (Promise), MutationObserver, queueMicrotask.

Kluczowa różnica polega na tym, że zadania mikro zawsze są wykonywane natychmiast po bieżącym zadaniu makro, podczas gdy następne zadanie makro (np. kolejna klatka renderowania lub obsługa zdarzenia timera setTimeout) jest wykonywane dopiero po opróżnieniu kolejki zadań mikro.

Przykład kolejności wykonywania:

// Zadanie makro (kod początkowy)
console.log('Początek');

// Zadanie makro (timer)
setTimeout(() => {
  console.log('Timer');
}, 0);

// Zadanie mikro (obietnica)
Promise.resolve().then(() => {
  console.log('Obietnica');
});

// Zadanie makro (koniec kodu początkowego)
console.log('Koniec');

Wynik w konsoli:

Początek
Koniec
Obietnica
Timer

Kolejność wykonywania:

1. Wykonywane jest początkowe zadanie makro (główny skrypt).
2. console.log('Początek').
3. setTimeout umieszcza zadanie makro w kolejce.
4. Promise.resolve().then() umieszcza mikro zadanie w kolejce.
5. console.log('Koniec').
6. Zadanie makro kończy się.
7. Sprawdzana jest kolejka mikro zadań: wykonywane jest Promise.resolve().then().
8. console.log('Obietnica').
9. Kolejka mikro zadań jest pusta.
10. Przeglądarka obsługuje zadania w pętli zdarzeń, przechodzi do następnego zadania makro.
11. Obsługiwane jest zadanie makro z setTimeout.
12. console.log('Timer').
13. Zadanie makro kończy się.

To zrozumienie jest ważne dla zarządzania kolejnością wykonywania operacji asynchronicznych i zrozumienia działania Event Loop.