Thema: browser
-
Browser-Speicher im Vergleich: Cookies, Web Storage und IndexedDB
Cookies werden bei jeder Anfrage mitgeschickt und sind laut Spezifikation klein; localStorage und sessionStorage sind synchrone String-Speicher mit wenigen MiB je Origin; IndexedDB ist asynchron, transaktional und teilt sich das grosse Kontingent der Origin. Jeglicher Browser-Speicher ist Best-Effort, sofern keine Persistenz gewährt wurde, und er ist nach Origin abgegrenzt.
-
Die Same-Origin Policy: was eine Origin ist und was sie isoliert
Eine Origin besteht aus Schema, Host und Port einer URL. Skripte dürfen Dokumente, Speicher und Antworten derselben Origin lesen und ändern; ursprungsübergreifende Lesezugriffe sind standardmässig blockiert, während ursprungsübergreifende Schreibzugriffe wie Formularübermittlungen sowie Einbettungen wie Bilder und Skripte grundsätzlich erlaubt sind. CORS lockert Lesezugriffe; CSRF-Schutzmassnahmen bleiben trotzdem nötig.
-
fetch mit Timeouts und AbortController einsetzen
Ein fetch-Promise wird nur bei einem Netzwerkfehler abgelehnt, nicht bei einem HTTP-Fehlerstatus, und besitzt von sich aus kein Timeout. Ein AbortSignal übergeben, das aus AbortSignal.timeout und dem Controller einer aufrufenden Stelle kombiniert ist, response.ok prüfen und im catch-Block TimeoutError, AbortError, Netzwerkfehler und HTTP-Fehler auseinanderhalten.
-
Web Vitals: Was LCP, INP und CLS messen
Core Web Vitals sind drei Feldmetriken: Largest Contentful Paint (Renderzeit des grössten sichtbaren Elements, Ziel 2,5 s), Interaction to Next Paint (längste Interaktionslatenz, Ziel 200 ms) und Cumulative Layout Shift (unerwartete Bewegung, Ziel 0,1), jeweils am 75. Perzentil der Seitenaufrufe beurteilt.
-
Web-Push-Grundlagen: Subscriptions, VAPID-Schlüssel und der Push-Dienst
Ein Browser abonniert beim Push-Dienst seines Herstellers und übergibt der Seite einen Endpoint plus Schlüssel; der Anwendungsserver sendet verschlüsselte Nachrichten per POST an diesen Endpoint mit einem TTL-Header und einem VAPID-JWT (ES256, aud = Ursprung des Push-Dienstes, exp höchstens 24 Stunden), dessen öffentlicher Schlüssel als applicationServerKey an PushManager.subscribe übergeben wurde. Ein 201 bedeutet angenommen, nicht zugestellt.
-
Stabile Selektoren und Auto-Waiting in Browser-End-to-End-Tests
Zwei Ursachen dominieren flackernde Browser-Tests: Selektoren, die brechen oder das falsche Element treffen, und Sleeps, die von einem angenommenen Timing ausgehen. Elemente über Rolle, Label oder Test-ID auffinden, jeden Locator auf genau ein Element treffen lassen und über wiederholende Assertions und Actionability-Prüfungen synchronisieren statt über Zeit.
-
CSS-Layout: wann Flexbox und wann Grid einsetzen
Flexbox ist ein eindimensionales Modell, das Platz entlang einer Zeile oder Spalte verteilt; Grid ist zweidimensional und definiert Zeilen und Spalten gemeinsam. Flexbox für inhaltsgetriebene Gruppen einsetzen und Grid für Seiten- und Formularstruktur; beide kombinieren, gap verwenden und Elemente schrumpfen lassen, damit Text nicht überläuft.
-
Wann zahlt sich Progressive Enhancement bei einer Anwendung aus, die ohnehin JavaScript braucht?
Offene Frage: Welche Teile einer Anwendung, deren Kernfunktionen ohne Script nicht funktionieren können, verdienen dennoch einen funktionierenden No-Script- oder Reduced-Script-Pfad? Wie oft schlägt die Skriptausführung bei einem realen Publikum tatsächlich fehl, und wie sollte ein Team das anhand von Daten statt nach Prinzip entscheiden?
-
The JavaScript event loop: tasks, microtasks and rendering
JavaScript runs one job at a time; the HTML event loop takes a task, then drains the whole microtask queue (promise reactions, queueMicrotask) before the next task or a rendering opportunity. Long synchronous work and endless microtask chains block input and painting.
Maschinenlesbar: JSON