Eine Analogie zur Single-Thread-Asynchronität in JavaScript

Haben Sie sich jemals gefragt, wie JavaScript – eine single-threaded Sprache – asynchrone Aufgaben bewältigt? In diesem Blogbeitrag erklären wir JavaScripts Asynchronität anhand einer spielerischen Analogie. Entdecken Sie, wie die 🧵 Servicekraft nahtlos mit einer ⚙️ Küche, 👩‍🍳 Küchenassistenten und einer 🛎 Ablage zusammenarbeitet, um Ihre Anfragen zu bedienen – und dabei den Betrieb reibungslos am Laufen hält. Erfahren Sie, was hinter Schritten steckt, die parallel ablaufen können, und warum es so wichtig ist, der 🧵 Servicekraft keine langen Aufgaben zu geben. Haben Sie sich jemals gefragt, warum manche Websites einfrieren? Hier finden Sie die Antwort! 🤓

Zwar könnte ich auf die technischen Details von JavaScripts single-threaded Asynchronität eingehen, doch gibt es dazu bereits eine sehr informative und weit verbreitete technische Erklärung. Gemeint ist die hervorragende Erklärung von Philip Roberts.

Daher werde ich versuchen, das Thema auf eine zugänglichere Weise einzuführen, die jeder verstehen kann – unabhängig vom technischen Vorwissen.

Die Ausgangslage

JavaScript (JS) ist eine single-threaded Sprache, was bedeutet, dass sie wie eine einzelne Person arbeitet, die einen Job erledigt – im Gegensatz zu einer multi-threaded Sprache, die wie ein Team funktioniert. Als einzelner Thread kann JavaScript immer nur an der aktuellen Aufgabe arbeiten.

Trotz dieser Einschränkung können wir mit JavaScript asynchrones Verhalten erreichen. Wir können beispielsweise mehrere Informationsanfragen gleichzeitig stellen, ohne auf den Abschluss jeder einzelnen warten zu müssen, bevor die nächste gestellt wird.

JavaScript ist eine single-threaded Sprache. Wie ist sie also asynchron?

Die Analogie

ℹ️ Dieser Beitrag bezieht sich darauf, wie JavaScript im Browser läuft – viele dieser Konzepte gelten jedoch auch für andere Laufzeitumgebungen (z. B. Node.js).

Um die verschiedenen Elemente der Analogie zu vereinfachen, führe ich sie schrittweise ein. Dabei hinterlasse ich Rückverweisblöcke als schnelle Referenz, falls Sie etwas nachschlagen möchten.

Die Ausgangssituation

Stellen wir uns ein 🛖 Restaurant vor, in dem es nur eine 🧵 Servicekraft gibt.

🛖 restaurant = Website

Die 🧵 Servicekraft ist unsere Schnittstelle, um Fragen zu stellen, Antworten zu erhalten und Aktionen auszuführen.

🧵 Servicekraft = JS-Hauptthread

Die 🧵 Servicekraft kann immer nur eine 📝 Bestellung gleichzeitig aufnehmen. Die Bestellaufnahme erfolgt jedoch nicht streng sequenziell. Stattdessen durchläuft das Essen aller Gäste denselben Prozess aus Bestellen, Zubereiten und Servieren – und das „gleichzeitig". Aber es gibt nur eine 🧵 Servicekraft – wie schafft sie das? 🤔

📝 Bestellung = JS-Befehl

Der Ablauf

Das 🛖 Restaurant hat mehr zu bieten, als die Gäste sehen. So braucht es beispielsweise eine ⚙️ Küche. Der Gast weiß in der Regel nicht, was in der ⚙️ Küche passiert – und dennoch erledigt sie den Großteil der Arbeit, die nötig ist, um das Bestellte zu liefern. Wie läuft das also ab, und wie schafft es eine einzige 🧵 Servicekraft, alle 📝 Bestellungen gleichzeitig zu bedienen?

⚙️ Küche = Browser

Hier die Aufschlüsselung:

1. Ein Gast gibt eine 📝 Bestellung auf – während dieser Zeit ist die 🧵 Servicekraft blockiert und kann sich weder anderen Gästen widmen noch andere Dinge tun.
2. Danach erfüllt die 🧵 Servicekraft die Anfrage entweder sofort (z. B. der Gast bittet um einen Strohhalm) oder bringt die 📝 Bestellung in die ⚙️ Küche.
3. Die ⚙️ Küche bereitet die 📝 Bestellung mithilfe von 🔪 Küchenutensilien und -werkzeugen zu.
4. Wenn die 📝 Bestellung fertig ist, stellt die ⚙️ Küche sie auf die 🛎️ Ablage.
5. Sobald die 🧵 Servicekraft frei ist, nimmt der 🧑‍🍳 Küchenassistent (der in diesem Fall die Koordination zwischen der beschäftigten 🧵 Servicekraft und der ⚙️ Küche übernimmt) die Bestellung von der 🛎️ Ablage und übergibt sie der 🧵 Servicekraft.
6. Die 🧵 Servicekraft liefert sie dann an die Gäste aus.

🔪 Küchenutensilien und -werkzeuge = Web APIs
🧑‍🍳 Küchenassistent = Der Event Loop
🛎️ Ablage = Die Task Queue

Fazit

Das Schöne daran: Während der Schritte 3 und 4 ist die 🧵 Servicekraft frei und kann andere Dinge erledigen. Sie kümmert sich also um andere Gäste, nimmt weitere 📝 Bestellungen auf, und der Prozess wiederholt sich.

Die Schritte 1, 2, 5 und 6 können NUR sequenziell ablaufen – die Servicekraft kann nicht gleichzeitig die 📝 Bestellungen von zwei Tischen aufnehmen. Die Schritte 3 und 4 hingegen können parallel ablaufen: Die ⚙️ Küche kann und wird so viele 📝 Bestellungen wie möglich gleichzeitig zubereiten.

Interessanterweise sind die Schritte der 🧵 Servicekraft in der Regel schnell, während die Schritte in der ⚙️ Küche eher langsam sind. Da in der ⚙️ Küche jedoch mehrere Personen an den Bestellungen arbeiten, läuft alles reibungslos und scheint vollständig parallel abzulaufen.

Wichtig zu beachten: Es ist entscheidend, der 🧵 Servicekraft keine langen Aufgaben zu übertragen. Wenn Sie die 🧵 Servicekraft beispielsweise bitten zu kochen, ist sie damit beschäftigt, während Gäste darauf warten, ihre 📝 Bestellungen aufzugeben. Niemand nimmt ihre Rufe und das Klingeln entgegen – das 🛖 Restaurant wirkt wie eingefroren.

Jetzt wissen wir wohl, warum Websites, die JavaScript verwenden, manchmal einfrieren 🤓

Ich hoffe, diese Analogie hilft Ihnen weiter. Falls ja, melden Sie sich gerne – wir freuen uns, davon zu hören! Falls nicht, oder falls etwas unkorrekt ist, lassen Sie es uns wissen; wir lernen und verbessern uns immer gerne.

Herzlichen Dank an Sean, der die Herausforderung aufgeworfen hat, mich dazu ermutigt hat, aus meiner Analogie einen Blogbeitrag zu machen, und an das Team der foobar Agency, das mich auf dem Weg mit Rat und gründlichem Review unterstützt hat.