
Synchrone vs Asynchrone Programmierung
Das Verständnis des Unterschieds zwischen synchroner und asynchroner Programmierung ist entscheidend für die Entwicklung performanter Webanwendungen.
Was ist synchrone Programmierung?
Synchrone Programmierung führt Aufgaben sequenziell aus. Eine Aufgabe muss abgeschlossen sein, bevor die nächste beginnt.
console.log("Aufgabe 1");
console.log("Aufgabe 2");
console.log("Aufgabe 3");
// Ausgabe: Aufgabe 1 → Aufgabe 2 → Aufgabe 3
Merkmale
- Vorhersagbare Ausführungsreihenfolge: Code wird in der Reihenfolge ausgeführt, in der er geschrieben wurde
- Einfaches Debugging: Der Ablauf ist leicht nachvollziehbar
- Blockierend: Die nächste Aufgabe wartet, bis die aktuelle abgeschlossen ist
Das Problem
Wenn eine Serveranfrage 5 Sekunden dauert, friert das gesamte Programm für diese 5 Sekunden ein:
// Schlecht: Synchrones Datenabrufen
const data = fetchDataSync(); // Blockiert 5 Sekunden...
console.log(data); // Wird nach 5 Sekunden ausgeführt
console.log("Nächste Aufgabe"); // Wartet ebenfalls 5 Sekunden
Was ist asynchrone Programmierung?
Asynchrone Programmierung ermöglicht gleichzeitige Aufgabenausführung. Langwierige Aufgaben laufen im Hintergrund, während andere Aufgaben fortgesetzt werden.
console.log("Aufgabe 1");
setTimeout(() => {
console.log("Aufgabe 2 abgeschlossen (nach 2s)");
}, 2000);
console.log("Aufgabe 3");
// Ausgabe: Aufgabe 1 → Aufgabe 3 → (2s später) Aufgabe 2 abgeschlossen
Merkmale
- Nicht-blockierend: Andere Aufgaben warten nicht
- Effiziente Ressourcennutzung: CPU verarbeitet andere Aufgaben während der Wartezeit
- Komplexe Ablaufsteuerung: Erfordert Callbacks, Promises oder async/await
Async-Behandlungsmethoden
1. Callbacks
fetchData((error, data) => {
if (error) {
console.error("Fehler:", error);
} else {
console.log("Daten:", data);
}
});
2. Promises
fetchData()
.then(data => console.log("Daten:", data))
.catch(error => console.error("Fehler:", error));
3. Async/Await (Empfohlen)
async function getData() {
try {
const data = await fetchData();
console.log("Daten:", data);
} catch (error) {
console.error("Fehler:", error);
}
}
Warum Sie alert() nicht missbrauchen sollten
alert() ist eine synchrone blockierende Funktion. Wenn alert() ausgeführt wird:
- Alle JavaScript-Ausführung stoppt
- Alles wartet, bis der Benutzer auf OK klickt
- Sogar asynchrone Operationen pausieren
// Schlechtes Beispiel
console.log("Start");
alert("Alles stoppt, bis Sie dies schließen!");
console.log("Ende"); // Wird nicht ausgeführt, bis alert geschlossen ist
Bessere Alternativen
Toast-Benachrichtigungen (async, nicht-blockierend):
import { toast } from 'sonner';
toast.success("Operation abgeschlossen!");
Modale Dialoge (async steuerbar):
const confirmed = await showConfirmDialog("Dieses Element löschen?");
if (confirmed) {
deleteItem();
}
Wann welchen Ansatz verwenden
Verwenden Sie synchron wenn:
- Einfache Berechnungen: Mathematische Operationen, String-Verarbeitung
- Reihenfolge wichtig: Datei lesen → Verarbeiten → Speichern
- Initialisierung: Konfigurationsdateien laden
Verwenden Sie asynchron wenn:
-
Netzwerkanfragen: API-Aufrufe, Datei-Downloads
-
Datei-I/O: Lesen/Schreiben großer Dateien
-
Timer: setTimeout, setInterval
-
Benutzerereignisse: Klicks, Scrolls
-
Datenbankabfragen: Select, Insert, Update
-
Synchron: Sequenziell, vorhersagbar, einfach aber langsam
-
Asynchron: Gleichzeitig, schnell aber komplex
-
Vermeiden Sie alert(): Blockiert die gesamte Ausführung
-
Wählen Sie weise: Basierend auf Aufgabenmerkmalen
Moderne Webentwicklung verwendet async für die meisten I/O-Operationen. Die Beherrschung von async/await macht asynchronen Code so lesbar wie synchronen Code.
