Was ist Event Loop?
Mechanismus, mit dem eine JavaScript-Laufzeitumgebung wartende Verarbeitungen einzeln herausnimmt und in einem einzigen Thread ausführt. Verarbeitungen, die durch Klicks, Timer, abgeschlossene Netzwerkanfragen und Ähnliches ausgelöst werden, werden als Tasks in eine Warteschlange gestellt, und wenn der aktuelle Code fertig ist, holt die Event Loop den nächsten Task heraus. Promise-Callbacks (Mikrotasks) werden nach jedem Task alle vor dem nächsten Task ausgeführt. Läuft eine Verarbeitung lange, stehen die Behandlung anderer Ereignisse und das Zeichnen des Bildschirms still.
Japanische Bezeichnung: イベントループ
„Event Loop“ kommt in 1 Übungsfragen aus 1 Themen vor, z. B. Grundlagen der Webtechnologien.
Fachgebiet: Grundlagen der Webtechnologien
Ausführungsreihenfolge
Folgt zum Beispiel auf console.log('A') das Einplanen der Ausgabe von B mit setTimeout und von C mit then eines Promise, und läuft zum Schluss console.log('D'), dann lautet die Ausgabe A, D, C, B. Zuerst läuft der gesamte synchrone Code, danach der Mikrotask C und zuletzt der Task B. Auch mit 0 ms wird setTimeout nicht sofort ausgeführt.
Warum der Bildschirm einfriert
Der Hauptthread des Browsers ist für die Ausführung von JavaScript, die Behandlung von Ereignissen wie Klicks und das Zeichnen des Bildschirms zuständig. Läuft eine Berechnung, die mehrere Sekunden dauert, in einem Stück, kann die Event Loop in dieser Zeit keinen nächsten Task herausholen; Schaltflächen reagieren nicht, und der Bildschirm wird nicht aktualisiert. Aufwendige Berechnungen werden mit einem Web Worker in einen anderen Thread verlagert oder in kleine Stücke aufgeteilt und nach und nach ausgeführt.
Häufige Fragen
Wird setTimeout mit 0 ms sofort ausgeführt?
Nein. Nach Ablauf der angegebenen Zeit kommt die Funktion als Task in die Warteschlange und wird erst ausgeführt, wenn der gerade laufende Code und alle bis dahin eingereihten Mikrotasks fertig sind. 0 ms bedeutet „so bald wie möglich, aber nach der aktuellen Verarbeitung“.
Kann JavaScript parallel rechnen?
Das JavaScript einer Seite selbst läuft in einem einzigen Hauptthread, aber mit einem Web Worker kann ein Skript parallel in einem anderen Thread laufen. Worker können nicht direkt auf das DOM zugreifen und tauschen deshalb Nachrichten mit dem Hauptthread aus, um Ergebnisse zu übergeben.