So funktioniert der Event Loop in JavaScript

JavaScript ist single-threaded: Es führt zu jedem Zeitpunkt nur eine Operation aus. Alle Anfragen laufen über einen einzigen Thread, Ein- und Ausgaben werden jedoch an andere Threads übergeben, damit das Programm nicht hängen bleibt. Die Kommunikation mit diesen Threads läuft über externe Schnittstellen, die solche Threads erzeugen können. Eine Webseite läuft also in einem Thread und kann trotzdem andere Threads nutzen, die bestimmte Aufgaben für sie erledigen. 

Sehen wir uns an, aus welchen Bausteinen der Event Loop besteht: 

Was sind Stack und Queue?

Ein Stack (Stapel) ist eine Datenstruktur, in der das zuletzt Hinzugefügte als Erstes ausgeführt wird. 

Queue (Warteschlange) – was zuerst ankommt, wird zuerst ausgeführt. 

Web APIs – zusätzliche Schnittstellen, die der Browser bereitstellt. Sie laufen in eigenen Browser-Threads. Dazu gehören Methoden für Timer (z. B. setTimeout), das Senden von XHR-Anfragen (Klasse XMLHttpRequest) sowie die Verarbeitung von Events aus dem DOM-Baum.

Hinter den Web APIs stehen weitere Datenstrukturen, die festlegen, was der Browser zuerst ausführt. Es gibt den Haupt-Thread und Neben-Threads, doch irgendwann muss entschieden werden, wann ein Ergebnis an den Haupt-Thread geht. Warten zwei Dinge gleichzeitig, wird genau hier entschieden, welches Vorrang hat.

STACK | Quelle: https://www.programiz.com/dsa/stack

QUEUE | Quelle: https://cdn.programiz.com/sites/tutorial2program/files/queue.png

Die Queues teilen sich in Makro-Tasks, Mikro-Tasks und eine Rendering-Queue. Sie enthalten Funktionsaufrufe, die als Callbacks an asynchrone Methoden der Web APIs übergeben wurden (setTimeout, setInterval, xhr, querySelector). Der Event Loop arbeitet Aufgaben ab, solange welche vorhanden sind: zuerst die Mikro-, dann die Makro-Tasks. Beim Rendering verarbeitet der Event Loop nur, was in der Queue steht. Kommt in dieser Zeit etwas Neues hinzu, muss es warten. 

Synchroner und asynchroner Code

Synchron: wird Zeile für Zeile ausgeführt. Es läuft immer nur ein Codeabschnitt. Ist er gestartet, geht nichts anderes, bis er fertig ist.

Asynchron: kann parallel zum Rest der Anwendung laufen, ohne sie zu stören, liefert das Ergebnis aber nicht sofort. Beispiel: eine API-Abfrage, während gleichzeitig eine Animation läuft.

 Quelle: https://kursjs.pl/kurs/intervals/event-loop.php#sync-vs-async

Die Grafik zeigt die drei Hauptelemente des Event Loops. Der Event Loop selbst ist die Warteschlange der aufzurufenden Befehle. Ob synchron oder asynchron, spielt keine Rolle – es sind Aktionen des Nutzers, die verarbeitet werden müssen. Sie warten in der Queue und werden der Reihe nach abgeholt, in der Reihenfolge ihres Eintreffens. Ein synchroner Befehl wird sofort ausgeführt, der Rest wartet. Bei einem asynchronen Befehl wird nur ein Verweis darauf gespeichert, die Ausführung selbst übernehmen die Web APIs. Der Event Loop kümmert sich nicht weiter darum – er meldet nur, dass es sich um asynchronen Code handelt, nach dem Motto „Erledige das für mich und gib mir nur das Ergebnis“. Dann holt er den nächsten Befehl aus der Queue. Was an die Web APIs abgegeben wurde, landet am Ende ebenfalls wieder in der Queue. So läuft alles ohne Unterbrechung, eben in einer „Schleife“. 

Was ist der Event Loop?

Der Event Loop legt fest, in welcher Reihenfolge Code ausgeführt wird. Er verbindet die synchrone und die asynchrone Welt. Was wir der Reihe nach erledigen, steht sofort zur Verfügung. Was wir delegieren, wollen wir später als Wert zurückbekommen. Beispiel: eine Serveranfrage nach Daten – es reicht nicht, dass die Daten abgerufen werden, wir wollen sie auch erhalten. Und weil der Code inzwischen weitergelaufen ist, braucht es einen Mechanismus, der diese Daten später abholt. 

Um den Event Loop mit all seinen Mechanismen zu verstehen, muss man zwei Begriffe unterscheiden: synchronen und asynchronen Code. Synchroner Code läuft Zeile für Zeile, hat keine Nebeneffekte und wird von A bis Z genau so ausgeführt, wie er aufgerufen wurde. Bei asynchronem Code wird ein Teil der Arbeit an bestimmten Stellen an einen eigenen Thread oder auf später verschoben. Beispiel: Wir wollen gleichzeitig eine Animation anzeigen und Daten vom Server laden. Mit synchronem Code müssten wir entweder auf die Daten warten oder die Animation zeigen. Mit asynchronem Code können sich beide Aufgaben abwechseln. Der Nutzer merkt davon nichts, denn den Ablauf steuert der Browser. 

Mehr über den Event Loop haben wir in den Q-Lab-Treffen der EMBIQ Community gelernt.