Wie man mit JS Wartezeiten für Webseiten–Benutzer vermeidet
Wer schon Erfahrungen mit dem Schreiben grösserer JS Files hat, hatte sich sicherlich schon mit der Frage zu kämpfen, ob diese synchron oder asynchron laufen sollen. Wir möchten dir helfen, diese Frage zu beantworten und dir ein besseres Verständnis für die Unterschiede zwischen synchronen und asynchronen JS Files zu vermitteln.
Synchron
In einem synchronen Programmablauf wird die Ausführung von oben nach unten durchgeführt. Jede Zeile muss warten, bis die Zeile davor abgearbeitet wurde, bevor sie ausgeführt wird. Wenn JavaScript Requests an einen Server stellt, können Wartezeiten entstehen, die nicht unbedingt notwendig sind. Um dies zu vermeiden, können wir asynchrone Programmabläufe nutzen.
Asynchron
Wenn man in seinem Script zwei Requests hat, die unabhängige Daten von einem Server abfragen, ist es besser, wenn der zweite Request nicht auf den ersten warten muss. Dadurch wird ein asynchroner Teil in das Script eingefügt, sodass bestimmte Code-Teile parallel ausgeführt werden und weniger Wartezeiten für den Webseiten-Benutzer entstehen.
Einige globale JavaScript Funktionen wie addEventListener oder setTimeout sind bereits asynchron.
Ein Beispiel mit setTimeout:
console.log("First");
setTimeout(function (){
console.log("Last");
}, 200);
console.log("Second");Die Ausgabe hier wäre wie folgt:
- First
- Second
- Last
Da die setTimeout Methode asynchron ist, wartet der Befehl nach dieser Methode nicht auf die Ausführung der Funktion.
Promises
Wenn man beginnt, den JavaScript Code in einzelne Funktionen zu verschachteln, um den Code leserlicher zu gestalten oder doppelte Code stellen zu vermeiden, können Probleme mit asynchronen Parts auftreten.
Ein Beispiel wäre eine Datenbankabfrage, die aus verschiedenen Funktionen aufgerufen wird. Sobald das Resultat des Requests zurückgekommen ist, muss es in der Hauptfunktion weitergehen.
Um dies zu veranschaulichen, hier ein Beispiel mit einem setTimeout anstatt einer Datenbankabfrage:
const dbRequest = new Promise((resolve, reject) => {
setTimeout(function (response) {
if (response && response.success === true) {
resolve(response);
} else {
reject(response)
}
}, 300);
});
function init() {
console.log("First");
dbRequest
.then(function (response) {
console.log("Success Last")
})
.catch(function (response) {
console.log("Error Last")
})
console.log("Second")
}
init();Promises Objekte geben Ergebnisse von asynchronen Aktionen zurück, sobald die versprochenen Daten zur Verfügung stehen. Dies geschieht über die Cases resolve oder reject. Mit der then Methode können die Daten weiterverarbeitet werden, wenn das Versprechen mithilfe von resolve erfüllt wurde. Wurde ein Fehler erkannt, kann mit reject der Fehler an die catch Methode weitergegeben werden.
Die all Methode ist sehr hilfreich. Wenn man ein Array mit Promises hat, kann man mit Promise.all() prüfen, ob alle erfüllt sind. Falls eine oder mehrere Promises in dem Array nicht erfüllt sind, wird die catch Methode aufgerufen.
Fazit
Um Wartezeiten für den Webseiten-Benutzer zu verringern, sollte man möglichst synchrone Code-Teile vermeiden, die Zeit in Anspruch nehmen. Um trotzdem die Übersicht über den Code zu behalten, können Promises ein nützliches Hilfsmittel sein.
Mit Promises können asynchrone Teile in das Script eingefügt werden, sodass bestimmte Code-Teile parallel ausgeführt werden und weniger Wartezeiten für den Webseiten-Benutzer entstehen. Ausserdem können mit der then-Methode die Daten weiterverarbeitet werden, wenn das Versprechen mithilfe von resolve erfüllt wurde. Wurde ein Fehler erkannt, kann mit reject der Fehler an die catch-Methode weitergegeben werden.
Mit der all-Methode kann man zudem prüfen, ob alle Promises in einem Array erfüllt sind.
Somit kann man den Code leserlicher gestalten und doppelte Code stellen vermeiden, ohne dabei die Übersicht über den Code zu verlieren.
Geschrieben von:
Thomas Bieli, Frontend-Entwickler bei der raffiniert media AG
Bleib mit unserem Newsletter auf dem Laufenden
Hast du eine Idee?
Nur keine scheu! Schreib uns.