JavaScript läuft auf einem einzelnen Thread, daher kann es nur eine Sache gleichzeitig tun. Die Event Loop ermöglicht es, asynchrone Arbeit ohne Blockierung zu bearbeiten: Sie führt den call stack aus, und wenn der stack leer ist, zieht sie callbacks aus Warteschlangen.
Es gibt zwei Warteschlangen mit unterschiedlichen Prioritäten:
- Microtasks: Promise callbacks (
.then),queueMicrotask. Vollständig nach jeder Aufgabe geleert, vor dem Rendering. - Macrotasks:
setTimeout, I/O, UI-Events. Eine wird pro Loop-Iteration verarbeitet.
console.log("1"); // sync
setTimeout(() => console.log("2"), 0); // macrotask
Promise.resolve().then(() => console.log("3")); // microtask
console.log("4"); // sync
// Output: 1, 4, 3, 2
Warum es wichtig ist
- Synchroner Code wird zuerst ausgeführt:
1,4. - Stack wird geleert → alle Microtasks leeren:
3. - Dann eine Macrotask nehmen:
2.
Deshalb wird Promise.then immer vor setTimeout(…, 0) ausgeführt, obwohl beide "asynchron" sind — Microtasks haben Vorrang.
Eine praktische Folge
// ❌ blocks the single thread — UI freezes for 5 seconds
while (Date.now() - start < 5000) {}
Lange synchrone Arbeit blockiert alles (Rendering, Klicks). Verlagern Sie schwere CPU-Arbeit auf einen Web Worker (einen echten separaten Thread).
Warum es wichtig ist
Das Verständnis der Loop erklärt die asynchrone Reihenfolge, warum Promises vor Timern aufgelöst werden, und warum nie den Haupt-Thread blockieren — das Kern-Mentalmodell für alle asynchrone JavaScript.