Seite 5 - JavaScript

Source Maps uebersetzen minifizierten, gebuendelten Produktionscode zurueck in lesbaren Original-Quelltext, aber in Produktion gelten andere Regeln als in der lokalen Entwicklung: die Karten muessen sicher bereitgestellt werden, ohne dass Angreifer daraus unminifizierte Geschaeftslogik extrahieren, und gleichzeitig muessen Fehler-Tracking-Systeme wie Sentry echte Stacktraces aus dem minifizierten Code rekonstruieren koennen.

Ein 2-MB-JavaScript-Bundle ist keine Seltenheit, aber es ist fast immer vermeidbar. Bundle-Analyse mit Rollup und Vite macht unsichtbare Probleme sichtbar: Tree-Shaking-Lücken, doppelte Dependencies, unnötige Polyfills – und liefert die Grundlage für gezielte Optimierung.

Funktionale Tests prüfen, ob Code läuft, nicht ob er richtig aussieht. Visual Regression Testing schließt genau diese Lücke: Screenshots von Komponenten und Seiten werden gegen eine gepflegte Baseline verglichen, sodass unbeabsichtigte CSS-Änderungen, kaputte Layouts und Rendering-Fehler auffallen, bevor sie live gehen.

Die Storage Manager API beantwortet zwei Fragen, die jede Offline-Anwendung früher oder später betreffen: wie viel Speicherplatz steht dem Origin überhaupt zur Verfügung, und wie verhindert man, dass der Browser diese Daten unter Speicherdruck einfach löscht. Wer Quota-Berechnung und Persistenz-Anfragen richtig einsetzt, baut Anwendungen, die Datenverlust proaktiv vermeiden statt ihn nachträglich zu erklären.

Wer bei jedem Zustands-Update ein komplettes Objekt oder Array tief kopiert, verschenkt Speicher und Rechenzeit. Structural Sharing löst dieses Problem, indem eine persistente Datenstruktur beim Update nur den geänderten Pfad neu aufbaut und alle unveränderten Teilbäume mit der alten Version teilt, statt sie zu duplizieren.

Fortgeschrittene Abfragen in IndexedDB gehen weit über getAll() hinaus: Cursor-Iteration mit IDBKeyRange, Compound Keys über mehrere Felder und Multi-Entry-Indexe für Array-Werte erlauben präzise, speicherschonende Queries direkt auf der Speicher-Engine des Browsers. Wer diese Werkzeuge beherrscht, muss keine Daten mehr client-seitig filtern, sondern lässt IndexedDB die Vorselektion übernehmen.

Ein Async Generator liefert Werte einzeln und bei Bedarf, statt eine komplette Ergebnisliste im Speicher zu halten. Für paginierte APIs, große Exporte und Live-Datenströme ersetzt async function* zusammen mit for await...of fehleranfällige Schleifen-Konstrukte durch lesbaren, komponierbaren Code.

Cross-Site Scripting und Prototype Pollution gehören zu den häufigsten und gefährlichsten JavaScript-Sicherheitslücken. XSS entsteht oft durch eine einzige unsichere innerHTML-Zuweisung. Prototype Pollution korrumpiert Object.prototype und macht jede Instanz im gesamten Programm angreifbar. Dieser Artikel erklärt beide Angriffsvektoren und zeigt konkrete Abwehrmaßnahmen.

Server Side Rendering liefert schnell sichtbaren Inhalt, aber Hydration macht diesen Inhalt oft erst mit Verzögerung interaktiv. Lazy Hydration verschiebt genau diese Verzögerung dorthin, wo sie niemand bemerkt: auf Komponenten, die noch gar nicht sichtbar sind oder gerade nicht gebraucht werden.

Scroll-Event-Listener für Sichtbarkeitsprüfungen sind veraltet und teuer. Der Intersection Observer liefert viewport-Benachrichtigungen ohne Hauptthread-Blockierung, ohne Layout-Thrashing und mit konfigurierbaren Thresholds – die moderne Lösung für Lazy Loading, Scroll-Animationen und Infinite Scroll.