Interaktionsgeschwindigkeit und Latenz der Benutzeroberfläche

1) Was ist die Schnittstellengeschwindigkeit

1. Input Latency - Von der Geste zum Event-Handler.

2. Netzwerklatenz - bis zur Backend-/Cache-Antwort.

3. Render latency - Verarbeitung auf dem Hauptstrom (JS/CSS/layout/paint).

4. Animation Latency - Glätte und Stabilität der Rahmen.

Zweck: Der Benutzer sieht sofort, dass die Aktion begonnen hat und wohin der Prozess geht; Das tatsächliche Ergebnis ist vorhersehbar.

2) Die Schwellenwerte der menschlichen Wahrnehmung

≤ 50 ms - „blitzschnell“ (Druckecho, Tastendruck).
≤ 100 ms - „sofort“ (Klick → visuelle Reaktion).
≤ 200 ms - zulässig für die meisten UI-Reaktionen.
≤ 1000 ms - erträglich bei offensichtlichem Fortschritt/Skeleton.

3) RAIL-Modell und Zielbudgets

R (Response): Antwort auf Eingabe

Ein Klick/Tippen → eine visuelle Reaktion ≤ 100 ms.
Fokus/Hover → ≤ 80-120 ms.

A (Animation): Glätte

60 FPS ⇒ Rahmen 16. 7 ms; schwere Operationen aus dem Rahmen zu nehmen.
Wir animieren nur 'transform '/' opacity'.

I (Idle): Hintergrundaufgaben

Wir teilen in Slots ≤ 50 ms, wir verwenden Idle-Fenster.

L (Last): laden

TTFB ≤ 200 ms, LCP ≤ 2. 5 s, INP ≤ 200 ms, CLS ≤ 0. 1.

4) KPIs und Geschwindigkeitsalerts

INP (Interaction to Next Paint): p75 <200 ms (gut), 200-500 (verbesserungswürdig).
Lange Aufgaben (> 50 ms): Bildanteil mit LT <5%.
TTFB p75 <200 ms (Cache/Edge), LCP p75 <2. 5 mit.
First User Feedback (FUF): Die Zeit bis zur ersten visuellen Bestätigung der Aktion ≤ 100 ms.
Time-to-Usable für Formulare: ≤ 1 s vor Eingabe des ersten Feldes.

5) UX-Muster der sofortigen Reaktion

1. Optimistische Updates: UI sofort ändern (Balance/Wette/Like), Rollback bei Fehler.
2. Skeletons statt Spinner, wenn die Struktur bekannt ist.
3. Fortschritt/Stufen: deterministische Progressionsleiste, wenn die Prozesslänge bekannt ist.
4. Lokale Hinweise: Instant-Toast/Staat „Senden“... ≤ 100 ms.
5. Vorladen auf Absicht: hover/Sichtbarkeit → 'prefetch '/' preload'.

6) Technische Techniken zur Reduzierung von Verzögerungen

6. 1 Input → Render

300 ms delay auf dem Handy aufnehmen:'<meta name = „viewport“ content = „width = device-width, initial-scale = 1“>'.
Passive Hörer für Scroll/Tacha: 'addEventListener (' touchstart', handler, {passive: true})'.
Die Verarbeitung des Klicks erfolgt in einem Mikroauftrag oder 'requestAnimationFrame' zur schnellen Darstellung der Bestätigung.
Vermeiden Sie Layout-Thrash: Lesen/Schreiben Layout - Batch.

6. 2 JS und Hauptstrom

Trennen Sie die Bündel (Code-Splitting), laden Sie entlang der Routen.
Schwere Berechnungen → Web Worker.
Verwenden Sie' scheduler. postTask '/' requestIdleCallback 'für Hintergrundaufgaben.
Kritisches CSS - inline; JS с `defer`/`async`.
Virtualisierung von Listen, 'content-visibility: auto', 'content: content'.

6. 3 Renderer und Animationen

Animieren Sie' transform/opacity'; animieren Sie' height/left/box-shadow 'nicht auf Hunderten von Elementen.
'will-change' vorübergehend vor der Animation setzen; Aufräumen nach.
Sprites/Vektor statt riesiger PNGs; Vermeiden Sie heavy blur.

6. 4 Netzwerk und Cache

Edge-кеш (CDN), `cache-control`, `stale-while-revalidate`.
Preconnect auf kritische Domains; Early Hints (103), HTTP/2/3.
Präfetch durch Absicht (hover/viewport).
Streaming/SSR + progressive Hydrierung/Inseln.

7) Debounce/Trottling und Warteschlangen

Debounce - für die Suche während der Eingabe (150-300 ms).
Trottling - für Scrolling/Resize (100-200 ms).
Warteschlangen/Batching von UI-Updates bei häufigen Ereignissen (Live-Daten).

js const debounce = (fn, ms=200)=>{let t; return (...a)=>{clearTimeout(t); t=setTimeout(()=>fn(...a),ms)}}
const throttle = (fn, ms=120)=>{let t=0; return (...a)=>{const n=Date. now(); if(n-t>ms){t=n; fn(...a)}}}

8) Download- und Feedbackmuster

Skeleton → Content (keine Verschiebungen, feste Höhen).
Shimmer 1200-1600 ms, Amplitude ≤ 20%.
Optimistische Karte: graue Vorschau + Text - wir ersetzen, wenn die Daten ankommen.
Fehler: kurzes Retry-Banner, Idempotency-Schlüssel für Wiederholungen.

9) Netzwerkstrategien für eine schnelle Reaktion

• Bestätigung der Benutzeroberfläche sofort (optimistisch), Backend - idempotent;
• bei Zeitumstellung (3-5 s) Anzeige des Status „erhalten, verarbeiten“ + Hintergrund-Retrays;
• WebSocket/SSE für Status, Backoff 1-2-4-8s.

Pre-Daten: Warm-up-Cache nach Zeitplan, Prefetch beliebter Routen.

Edge-Funktion: Validierung/Aggregation näher am Benutzer.

10) Schnelle Benutzeroberfläche Code-Snippets

js btn. addEventListener('click', () => {
btn. classList. add ('is-busy') ;//requestAnimationFrame instant visual response (async () => {
try {
const res = await fetch('/api/action', { method: 'POST', body: payload });
if (!res.ok) throw new Error('fail');
btn. classList. add('is-done');
} catch {
btn. classList. remove('is-busy'); btn. classList. add('is-error');
}
});
});

js const prefetch = url => fetch(url, { credentials:'include', priority:'low' }). catch(()=>{});
document. querySelectorAll('a[data-prefetch]'). forEach(a=>{
a. addEventListener('mouseenter', () => prefetch(a. href), { once:true });
const io=new IntersectionObserver(e=>{ if(e[0].isIntersecting){prefetch(a. href); io. disconnect();} });
io. observe(a);
});

css
.btn. is-busy { pointer-events:none; }
.skeleton { position:relative; background: var(--bg-elevated); overflow:hidden; }
.skeleton::after {
content:""; position:absolute; inset:0;
background: linear-gradient(90deg, transparent, rgba(255,255,255,.12), transparent);
animation: shimmer 1. 4s infinite;
}
@keyframes shimmer { from { transform: translateX(-100%);} to { transform: translateX(100%);} }

11) Diagnose und Überwachung

Feld: RUM (Field Metrics) p75 nach Land/Netzwerk/Gerät.
Klickverfolgung: „input → handler → network → paint“.
Markierung der „roten Zonen“: Long Task-Marker, Blocking-Time, Slow-Route-Liste.
Alerts für INP/LCP/TTFB-Abbau.
Szenariotests: Aufzeichnung der Referenzzeit „Klick → DOM ändern“.

12) Besonderheiten von iGaming

• UI: sofortige Fixierung des Zustands der Taste (pressed → busy), doppelt - Toast „Akzeptiert“.
• Backend: idempotent Schlüssel zu Rate; Status - über WebSocket; Timeout → transparentes „Pending“.
• UI-Budget: FUF ≤ 100 ms, endgültige Bestätigung ≤ 1 s (wenn länger - Timer/Ursache anzeigen).

• Beschleunigung ≤ 200 ms, gleichmäßige Rotation, Dämpfung 300-500 ms; Ohne endlose Zyklen.
• Gewinn-Plugs - kein Strobe, Text/Betrag lesbar (AAA).

• Delta-Patches alle 250-1000 ms, Batching;
• visueller Diff (Pfeil/Farbe/Dicke) ohne Layoutsprünge;
• anti-prasseln Updates auf hover/focus.

• Inkrement des Kontos durch Schlachten 40-60 ms, tabellarische Zahlen;
• Sticky-Cap, Zeilenvirtualisierung.

13) Anti-Muster

Keine sofortige Reaktion auf einen Klick (Warten auf das Netzwerk).
Schwere' filter/box-shadow 'Animationen auf Hunderten von Elementen.
Ein riesiges JS-Bundle> 1-2 MB pro kritischem Pfad.
„Spinner in der Leere“ über 1-2 s ohne Fortschritt/Skeleton.
Layout in einem Tick lesen/schreiben (Layout-Thrashing).
Hover-only-Funktionen auf mobilen.

14) Geschwindigkeit Token (Design-System)

json
{
"latencyBudget": {
"tapFeedbackMs": 100,
"keyEchoMs": 50,
"hoverMs": 120,
"pressMs": 90,
"modalInMs": 240,
"toastInMs": 200
},
"webVitalsTargets": { "INP": 200, "LCP": 2500, "CLS": 0. 1, "TTFB": 200 },
"animation": {
"easing": { "std": "cubic-bezier(0. 2,0,0. 2,1)", "acc": "cubic-bezier(0. 4,0,1,1)" },
"duration": { "hover": 160, "active": 90, "overlay": 240 }
}
}

15) QS-Geschwindigkeitscheckliste

Antwort

• Klick/Tippen → visuelle Reaktion ≤ 100 ms; Eingabe → Echo ≤ 50 ms
• Keine 300 ms Verzögerung auf dem Handy.
• INP p75 ≤ 200 ms; Der Anteil von Long Tasks ≤ 5%.

Herunterladen

• TTFB ≤ 200 ms LCP ≤ 2. 5 s; CLS ≤ 0. 1.
• Skeletons/Fortschritt statt „hängende“ Spinner.

Render

• Nur 'transform/opacity' in Animationen; Es gibt keine „schweren“ Schatten auf den Arrays.
• content-visibility/Virtualisierung für lange Listen.

Netzwerk

• Edge-Cache, Preconnect, Präfetch durch Absicht.
• Idempotenz und Retrays für kritisches Handeln.

A11y

• 'prefers-reduced-motion' wird unterstützt.
• Hover-Inhalte sind über Fokus/Tastatur zugänglich.

16) Dokumentation für das Konstruktionssystem

„Latency Budgets“: Tabelle der Schwellen (tap, hover, modal, toast, Form).
„Instant Feedback“: Muster optimistischer Aktionen + Rollback.
„Prefetch by Intent“: Hyde und Dienstprogramme.
„Performance Playbook“: Checklisten für Profiling und RUM-Alerts.
„Do/Don't“: Beispiele für schnelle/langsame Szenarien mit Zahlen.

Kurze Zusammenfassung

Die Interaktionsrate ist eine sofortige Reaktion + vorhersehbare Lieferung des Ergebnisses. Halten Sie 100ms als heiliges Budget für First-Feedback, optimieren Sie das Netzwerk (Edge/Cache/Prefetch), entladen Sie den Hauptstrom, animieren Sie nur billige Eigenschaften und wenden Sie optimistische Muster an. Dann fühlt sich die Schnittstelle lebendig, verständlich und stabil an - besonders in iGaming-Szenarien mit hohen Einsätzen und Echtzeit.