Wie funktioniert die Ereignisschleife (event loop) in…

Die Ereignisschleife in JavaScript (im Kontext des Webbrowsers) ist ein Mechanismus, der es ermöglicht, asynchrone Operationen auszuführen, ohne den Hauptausführungsthread zu blockieren. Sie besteht aus mehreren Komponenten:

Heap (Heap): Speicherbereich, in dem Objekte gespeichert werden.
Call Stack (Aufrufstapel): Datenstruktur LIFO, die die Ausführung synchroner Funktionen verfolgt.
Web APIs: Vom Browser bereitgestellt (DOM, AJAX, setTimeout, setInterval, Event Listeners usw.). Sie sind kein Teil der JavaScript-Engine.
Callback Queue (Callback-Warteschlange) / Task Queue (Aufgabenwarteschlange): Nachrichtenwarteschlange für die Ausführung asynchroner Aufgaben.
Microtask Queue (Mikroaufgabenwarteschlange): Priorisierte Warteschlange für Mikroaufgaben (Promise.then(), async/await, queueMicrotask). Sie wird vor der Aufgabenwarteschlange ausgeführt.
Event Loop (Ereignisschleife): Überprüft kontinuierlich den Call Stack und die Warteschlange. Wenn der Stack leer ist, verschiebt sie den ersten Handler aus der Mikroaufgabenwarteschlange in den Stack. Nach dem Leeren der Mikroaufgabenwarteschlange verschiebt sie den ersten Handler aus der Aufgabenwarteschlange in den Stack.

Der Prozess funktioniert folgendermaßen:

Synchroner Code wird ausgeführt und Funktionen werden in den Call Stack gelegt.
Wenn eine asynchrone Operation auftritt (z.B. setTimeout), wird sie an die entsprechende Web API übergeben. Die Ausführung synchroner Code setzt sich fort.
Die Web API führt die Operation im Hintergrund aus.
Nach Abschluss der asynchronen Operation wird der Handler (Callback) dieser Operation in die Aufgabenwarteschlange (für normale asynchrone Operationen) oder in die Mikroaufgabenwarteschlange (für Promises) gelegt.
Die Event Loop überprüft kontinuierlich den Call Stack. Wenn dieser leer ist:
- Überprüft sie die Mikroaufgabenwarteschlange. Wenn Handler vorhanden sind, verschiebt sie diese in den Call Stack zur Ausführung, bis die Mikroaufgabenwarteschlange leer ist.
- Dann überprüft sie die Aufgabenwarteschlange. Wenn Handler vorhanden sind, verschiebt sie den ersten in den Call Stack zur Ausführung.
Dieser Prozess wiederholt sich, um asynchrone Operationen auszuführen, ohne den Hauptthread zu blockieren.

Beispiel mit setTimeout:

// Dieser Code wird im Call Stack ausgeführt
console.log('Start');

// setTimeout - Web API. Der Callback wird nach 0ms in die Aufgabenwarteschlange gestellt.
// Die tatsächliche Ausführung kann durch den Ereignisschleifenzyklus verzögert werden.
setTimeout(() => {
  console.log('Timeout');
}, 0);

// Dieser Code wird nach setTimeout im Call Stack ausgeführt
console.log('Ende');

// Ausgabe:
// Start
// Ende
// Timeout

Beispiel mit Promises:

// Wird im Call Stack ausgeführt
console.log('A');

// Promise. Der then() Callback wird in die Mikroaufgabenwarteschlange gestellt
Promise.resolve().then(() => {
  console.log('B');
});

// Wird im Call Stack ausgeführt
console.log('C');

// Ausgabe:
// A
// C
// B

Wie funktioniert die Ereignisschleife (event loop) in der Web-API?