Was sind Makro- und Mikroaufgaben?

Makroaufgaben sind große, hochrangige Phasen der Browserarbeit, wie HTML-Parsing, DOM-Erstellung, CSSOM-Erstellung, Stilberechnung, Renderbaumaufbau, Layout, Paint und Composition. Sie bilden die Hauptpipeline des Renderings.

Mikroaufgaben sind kleinere, detailliertere Aktionen, die nach Abschluss der aktuellen Makroaufgabe und vor Beginn der nächsten ausgeführt werden. Dazu gehören die Verarbeitung von Promises (Promise), MutationObserver, queueMicrotask.

Der entscheidende Unterschied ist, dass Mikroaufgaben immer sofort nach der aktuellen Makroaufgabe ausgeführt werden, während die nächste Makroaufgabe (z.B. der nächste Render-Frame oder das Timer-Ereignis setTimeout) erst ausgeführt wird, wenn die Mikroaufgabenwarteschlange leer ist.

Beispiel für die Ausführungsreihenfolge:

// Makroaufgabe (Anfangscode)
console.log('Start');

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

// Mikroaufgabe (Promise)
Promise.resolve().then(() => {
  console.log('Promise');
});

// Makroaufgabe (Ende des Anfangscodes)
console.log('Ende');

Ausgabe in der Konsole:

Start
Ende
Promise
Timer

Ausführungsreihenfolge:

1. Die initiale Makroaufgabe (Hauptskript) wird ausgeführt.
2. console.log('Start').
3. setTimeout legt die Makroaufgabe in die Warteschlange.
4. Promise.resolve().then() legt die Mikroaufgabe in die Warteschlange.
5. console.log('Ende').
6. Die Hauptmakroaufgabe ist beendet.
7. Die Mikroaufgabenwarteschlange wird geprüft: Promise.resolve().then() wird ausgeführt.
8. console.log('Promise').
9. Die Mikroaufgabenwarteschlange ist leer.
10. Der Browser verarbeitet die Aufgaben im Event-Loop, geht zur nächsten Makroaufgabe.
11. Die Makroaufgabe von setTimeout wird verarbeitet.
12. console.log('Timer').
13. Die Makroaufgabe ist beendet.

Dieses Verständnis ist wichtig, um die Reihenfolge der Ausführung asynchroner Operationen zu steuern und das Verhalten des Event Loops zu verstehen.