Lektion 7: JavaScript-Laufzeitgrundlagen: Performance-Perspektive

Konzepterklärung

"JavaScript-Laufzeitgrundlagen: Performance-Perspektive" hilft Ihnen, über Geschwindigkeit und Ressourcenverschwendung nachzudenken, bevor Ihr Code unübersichtlich oder langsam wird. Die Lektion zielt nicht darauf ab, alles zu mikro-optimieren. Stattdessen lehrt sie Sie, gängige Gewohnheiten zu erkennen, die die Performance beeinträchtigen, wie wiederholte Netzwerkaufrufe, zusätzliche Arbeit in Schleifen und unnötiges Warten in asynchronem Code. Sie werden ein kleines asynchrones Beispiel betrachten, über die Ausführungskosten nachdenken und praktische Verbesserungen vornehmen, die den Code lesbar halten. Am Ende sollten Sie nicht nur erklären können, was der Code tut, sondern auch, warum eine Version schlanker und effizienter ist als eine andere.

Wo der Code hingehört

1. Beginnen Sie mit Variablen und Eingaben. Verwenden Sie die Browser- oder `Node.js`-Syntax klar.
2. Fügen Sie die Verarbeitungslogik im mittleren Abschnitt hinzu.
3. Schließen Sie mit Ausgabe und schneller Validierung ab.

Befehlsreferenz

• Führen Sie das Beispiel einmal aus und identifizieren Sie dann, welche Teile Netzwerkarbeit und welche lokale Verarbeitung sind.
• Fügen Sie eine kleine Absicherung hinzu, wie eine Antwortprüfung, ohne die Funktion schwerer nachvollziehbar zu machen.
• Vergleichen Sie eine verschwenderische Version mit einer saubereren Version und erklären Sie, wo unnötige Arbeit entfernt wurde.
• Beschreiben Sie einen praktischen Grund, warum Performance hier wichtig ist, z. B. schnelleres Feedback oder weniger wiederholte Anfragen.

Schritt-für-Schritt-Anleitung

1. Führen Sie das Beispiel aus und beachten Sie, was passiert, wenn die Anfrage erfolgreich ist.
2. Markieren Sie die Zeile, in der das asynchrone Warten beginnt, und die Zeile, in der die zurückgegebenen Daten verwendet werden.
3. Fügen Sie eine Verbesserung hinzu, die den Ablauf effizienter oder sicherer macht, z. B. die Überprüfung der Antwort vor dem Parsen.
4. Testen Sie einen normalen Pfad und einen Fehlerpfad, um zu sehen, wie sich die Funktion unter beiden Bedingungen verhält.
5. Fassen Sie abschließend zusammen, was sich geändert hat und warum die aktualisierte Version besser für reale Projekte geeignet ist.

Übungsaufgaben

• Aktualisieren Sie das Beispiel so, dass es nur die benötigten Namen extrahiert, anstatt die vollständigen Benutzerobjekte überall weiterzugeben.
• Erstellen Sie eine zweite Funktion, die die geladenen Daten wiederverwendet, ohne einen zusätzlichen `fetch`-Aufruf zu tätigen.
• Schreiben Sie das Beispiel mit einer leicht anderen Struktur neu und erklären Sie, welche Version Sie für die langfristige Wartung beibehalten würden.

Coding-Challenges

• Refaktorieren Sie ein kleines asynchrones Skript, das dieselbe Anfrage mehrfach wiederholt, sodass die Daten nur einmal abgerufen werden.
• Verbessern Sie ein sich langsam anfühlendes Beispiel, indem Sie einen unnötigen Schritt entfernen und das Ergebnis dennoch leicht verständlich halten.

Kleine Übungsaufgaben

• Fügen Sie eine Antwortprüfung hinzu.
• Benennen Sie eine Funktion um, damit sie besser zu dem passt, was sie zurückgibt.
• Schreiben Sie einen Satz, der erklärt, woher die Hauptkosten dieses Skripts stammen.