Die JavaScript-Ereignisschleife: Tasks, Microtasks und Rendering

Worum es geht

Ein JavaScript-Agent ist ein einzelner Thread: Jeder Job läuft bis zum Abschluss, bevor der nächste beginnt, sodass eine lange synchrone Schleife Klicks, Timer und das Zeichnen blockiert, bis sie zurückkehrt (MDN-Ausführungsmodell). Die Ereignisschleife des HTML-Standards teilt anstehende Arbeit in Tasks (Timer, I/O-Abschlüsse, Ereignisse, Skriptausführung) und Microtasks (Promise-Reaktionen, queueMicrotask, MutationObserver-Callbacks) auf. Nach jedem Task führt der Browser einen Microtask-Checkpoint durch: Die Microtask-Warteschlange wird vollständig geleert, einschliesslich Microtasks, die während des Leerens eingereiht werden, bevor der nächste Task genommen wird oder eine Rendering-Gelegenheit eintritt. await plant den Rest einer asynchronen Funktion als Microtask ein.

Warum es wichtig ist

Überraschungen bei der Reihenfolge stammen aus diesem Modell. console.log(1); setTimeout(() => console.log(2)); Promise.resolve().then(() => console.log(3)); console.log(4); gibt 1, 4, 3, 2 aus: zuerst synchroner Code, dann Microtasks, dann der Timer-Task. Eine Schleife, die fortlaufend Microtasks einplant, lässt die Seite nie zeichnen, während in Tasks aufgeteilte Arbeit dem Browser zwischen den Häppchen eine Gelegenheit gibt. Reaktionsfähigkeitsmetriken wie INP spiegeln wider, wie lange die Schleife rund um eine Interaktion belegt bleibt.

So wird es angewendet

• Jeden Task kurz halten: CPU-intensive Schleifen in Häppchen aufteilen und zwischen den Häppchen mit einer taskbasierten Pause abgeben, zum Beispiel await new Promise(r => setTimeout(r)), damit Eingaben und Rendering laufen können.
• Wirklich aufwendige Berechnungen in einen Web Worker verlagern; der Hauptthread sendet nur Nachrichten.
• queueMicrotask verwenden, wenn etwas nach dem aktuellen synchronen Code, aber vor allem anderen laufen muss (mehrere synchrone Aufrufe zu einem Update bündeln); es gibt dem Browser keine Gelegenheit.
• setTimeout(fn, 0) nicht als «sofort» lesen: Es läuft nach allen anstehenden Microtasks und frühestens beim nächsten Task.
• await in einer Schleife als sequenziell behandeln; unabhängige Promises zuerst starten und mit await Promise.all(...) abwarten.
• In Node.js gibt es zusätzlich eine process.nextTick-Warteschlange; deren Dokumentation konsultieren, bevor man sich auf die Reihenfolge zwischen ihr und Promise-Reaktionen verlässt.

Stolpersteine

Eine innerhalb eines Tasks geworfene Ausnahme beendet nur diesen Task; die Schleife läuft weiter, wodurch Fehler ohne einen globalen Handler leicht übersehen werden. Ereignis-Handler laufen als Teil des Dispatch, sodass ein langsamer Klick-Handler die visuelle Reaktion auf diesen Klick verzögert. Von einem MutationObserver eingereihte Microtasks können DOM-Zustand beobachten, der nie gezeichnet wurde. Browser drosseln und begrenzen Timer in Hintergrund-Tabs, sodass Timing-Logik keine exakten Verzögerungen voraussetzen darf.