0Pricing
Frontend Academy · Lektion

Die Event Loop: Call Stack, Queue, Microtasks

Visualisieren Sie die Ausführung von JavaScript: den Call Stack, die Task Queue und Microtasks aus Promises sowie den Grund, warum die UI während asynchroner Vorgänge nie blockiert.

Die Event Loop: Call Stack, Queue, Microtasks ist eine kostenlose Frontend Academy-Lektion auf CoddyKit. Dies ist Lektion 1 von 4. Du kannst die komplette Lektion unten kostenlos lesen – dann übst du sie direkt im Browser mit einem integrierten Code-Editor und einem KI-Tutor rund um die Uhr. Sie ist Teil des Frontend Academy-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der Frontend Academy-Kurs umfasst insgesamt 4 Lektionen.

JavaScript ist Single-Threaded

JavaScript läuft in einem einzigen Thread und kann daher immer nur einen Codeabschnitt gleichzeitig ausführen. Trotzdem verarbeitet es Tausende asynchroner Vorgänge (Netzwerkanfragen, Timer und UI-Ereignisse), ohne zu blockieren. Wie ist das möglich? Durch die Event Loop.

Der Call Stack

Im Call Stack verfolgt JavaScript, welche Funktion gerade ausgeführt wird. Beim Aufruf einer Funktion wird ein Stack-Frame hinzugefügt. Bei ihrer Rückkehr wird der Frame entfernt. Wenn der Stack voll ist (etwa durch eine Endlosrekursion), tritt ein Stack Overflow auf.

function c() { /* does something */ }
function b() { c(); }
function a() { b(); }
a();

// Call stack during c():
// c    ← top
// b
// a
// (anonymous)

Web-APIs – Arbeit auslagern

Wenn JavaScript eine asynchrone Funktion aufruft (setTimeout, fetch, addEventListener), wird die Arbeit an eine Web API im Browser übergeben. Die JavaScript-Engine fährt mit der nächsten Zeile fort – sie wartet nicht.

console.log('1');
setTimeout(() => console.log('2'), 0); // handed to Web API
console.log('3');
// Output: 1, 3, 2

Die Task-Warteschlange (Makrotask-Warteschlange)

Wenn ein Vorgang der Web-API abgeschlossen ist (ein Timer auslöst oder ein Aufruf von fetch aufgelöst wird), wird der Callback in die Task-Warteschlange (Makrotask-Warteschlange) eingefügt. Der Event Loop verschiebt den Callback erst dann in den Call Stack, wenn dieser leer ist.

Die Mikrotask-Warteschlange

Promises verwenden eine Mikrotask-Warteschlange – eine Warteschlange mit hoher Priorität. Nach Abschluss jedes Tasks und bevor der nächste Task ausgewählt wird, werden alle ausstehenden Mikrotasks abgearbeitet. Mikrotasks werden immer vor dem nächsten Makrotask ausgeführt.

console.log('1');
setTimeout(() => console.log('timeout'), 0);  // macrotask
Promise.resolve().then(() => console.log('promise')); // microtask
console.log('2');
// Output: 1, 2, promise, timeout

Der Event Loop in Aktion

Der Algorithmus des Event Loops: 1) Führen Sie den aktuellen Task aus dem Call Stack aus, bis dieser leer ist. 2) Abarbeiten der gesamten Mikrotask-Warteschlange. 3) Optionales Rendern. 4) Den nächsten Makrotask auswählen und den Ablauf wiederholen.

queueMicrotask()

queueMicrotask(fn) plant einen Callback in der Mikrotask-Warteschlange ein, ohne ein Promise zu erstellen. Die Funktion wird direkt nur selten benötigt, ist aber nützlich, um zu verstehen, wie Bibliotheken die Ablaufplanung implementieren.

queueMicrotask(() => console.log('microtask'));
console.log('sync');
// Output: sync, microtask

Warum lange Tasks die Benutzeroberfläche einfrieren

Wenn ein synchroner Task zu lange läuft (etwa eine enge Schleife, die große Datenmengen verarbeitet), kann der Event Loop keine UI-Ereignisse oder Renderings verarbeiten. Dadurch friert die Seite ein. Teilen Sie lange Arbeiten mit setTimeout in Abschnitte auf, um die Ausführung an den Event Loop zurückzugeben.

// Bad — blocks the UI for seconds:
for (let i = 0; i < 10_000_000; i++) { /* heavy work */ }

// Better — yield periodically:
async function processInChunks(items) {
  for (let i = 0; i < items.length; i++) {
    process(items[i]);
    if (i % 100 === 0) await new Promise(r => setTimeout(r, 0)); // yield
  }
}

Web Worker – echte Parallelität

Verwenden Sie für rechenintensive Aufgaben einen Web Worker – einen separaten Thread mit einem eigenen Event Loop. Worker kommunizieren über postMessage mit dem Hauptthread. Es gibt keinen gemeinsamen Speicher und keine Race Conditions.

requestAnimationFrame

requestAnimationFrame(callback) plant einen Callback vor dem nächsten Neuzeichnen des Browsers ein. Verwenden Sie die Funktion für JavaScript-gesteuerte Animationen – sie synchronisiert sich mit der Bildwiederholrate des Displays (typischerweise 60fps).

function animate(timestamp) {
  // update positions based on timestamp
  element.style.transform = `translateX(${timestamp * 0.1 % 400}px)`;
  requestAnimationFrame(animate);
}
requestAnimationFrame(animate);

Den Event Loop visualisieren

Mit der interaktiven Demo unter latentflip.com/loupe können Sie Code einfügen und den Call Stack, die Web-API, die Task-Warteschlange und den Event Loop in Zeitlupe beobachten. Das ist unerlässlich, um ein intuitives Verständnis zu entwickeln.

Schnelltest

In welcher Warteschlange wird der .then()-Callback ausgeführt, nachdem ein Promise aufgelöst wurde?

Zusammenfassung: Der Event Loop

JavaScript ist single-threaded. Asynchrone Arbeit wird an Web-APIs übertragen. Callbacks kehren über die Task-Warteschlange (setTimeout, fetch-Callbacks) oder die Mikrotask-Warteschlange (Promises) zurück. Der Event Loop arbeitet nach jedem Task alle Mikrotasks ab, bevor das nächste Rendering oder der nächste Makrotask ausgeführt wird. Langer synchroner Code blockiert alles.

Häufig gestellte Fragen

Ist die Lektion „Die Event Loop: Call Stack, Queue, Microtasks“ kostenlos?

Ja — der vollständige Text von „Die Event Loop: Call Stack, Queue, Microtasks“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des Frontend Academy-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der Frontend Academy-Kurs umfasst insgesamt 4 Lektionen.

Was lerne ich in „Die Event Loop: Call Stack, Queue, Microtasks“?

Visualisieren Sie die Ausführung von JavaScript: den Call Stack, die Task Queue und Microtasks aus Promises sowie den Grund, warum die UI während asynchroner Vorgänge nie blockiert. Du übst Frontend Academy mit praktischem Code, den du direkt im Browser ausführst, und ein 24/7 KI-Tutor beantwortet deine Fragen während du die Lektion bearbeitest.

Brauche ich Erfahrung, um Frontend Academy zu starten?

Keine Vorkenntnisse erforderlich. Frontend Academy auf CoddyKit ist für Anfänger bis fortgeschrittene Lernende strukturiert, sodass du hier starten oder von Anfang an beginnen und in deinem eigenen Tempo voranschreiten kannst. Dies ist Lektion 1 von 4.

Wie lange dauert die Lektion „Die Event Loop: Call Stack, Queue, Microtasks“?

Die meisten CoddyKit-Lektionen dauern etwa 5–10 Minuten. Jede ist kompakt und interaktiv, sodass du stetig Fortschritte machst und genau dort weitermachst, wo du aufgehört hast – im Web und in der App.

Kann ich in dieser Frontend Academy-Lektion Code schreiben und ausführen?

Ja. Jede Frontend Academy-Lektion enthält einen integrierten Code-Editor, sodass du echten Code direkt in deinem Browser schreibst und ausführst und sofort KI-Feedback erhältst — ohne lokale Einrichtung erforderlich.

Alle Lektionen in diesem Kurs

  1. Die Event Loop: Call Stack, Queue, Microtasks
  2. Callbacks und Callback Hell
  3. Promises: then, catch, finally, Promise.all
  4. async/await und Fehlerbehandlung
← Zurück zu Frontend Academy