Rata de interacțiune și interfața de latență

1) Ce este viteza de interfață

1. Latența intrării - de la gest la manipulator de evenimente.

2. Latența rețelei - înainte de răspunsul backend/cache.

3. Randare latență - prelucrare pe fluxul principal (JS/CSS/layout/vopsea).

4. Latența animației - netezimea și stabilitatea cadrelor.

Scop: utilizatorul vede instantaneu că acțiunea a început și unde se mișcă procesul; rezultatul real vine previzibil.

2) Pragurile percepției umane

≤ 50 ms - „fulger rapid” (ecou de imprimare, apăsați tasta).
≤ 100 ms - „instantaneu” (click → răspuns vizual).
≤ 200 ms - acceptabil pentru majoritatea reacțiilor UI.
≤ 1000 ms - tolerabil cu progrese clare/schelet.

3) Modelul RAIL și bugetele țintă

R (Răspuns): răspuns de intrare

Faceți clic/atingeți → răspuns vizual ≤ 100 ms.
Focus/hover → ≤ 80-120 ms.

A (Animație): netezime

60 FPS ⇒ cadru 16. 7 ms; operațiuni grele pentru a scoate din cadru.
Animăm doar 'transformă '/' opacitate'.

I (Idle): sarcini de fundal

Împărțiți în sloturi ≤ 50 ms, utilizați ferestre inactive.

L (încărcare): încărcare

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

4) KPI și alerte de viteză

INP (Interaction to Next Paint): p75 <200 ms (bun), 200-500 (de îmbunătățit).
Sarcini lungi (> 50 ms): proporția de cadre cu LT <5%.
TTFB p75 <200 ms (cache/Edge), LCP p75 <2. 5 p.
Primul feedback al utilizatorului (FUF): timpul până la prima confirmare vizuală a acțiunii ≤ de 100 ms.
Time-to-Usable pentru formulare ≤ 1 s înainte de introducerea primului câmp.

5) UX modele de răspuns instant

1. Actualizări optimiste: schimbați UI imediat (sold/bet/like), reporniți eroarea.
2. Schelete în loc de un spinner dacă structura este cunoscută.
3. Progress/pași: bară progresivă deterministă dacă lungimea procesului este cunoscută.
4. Sfaturi locale: pâine prăjită instant/stat „Trimite”... ≤ 100 ms.
5. Preîncărcare intenție: hover/vizibilitate → „prefetch ”/„ preîncărcare”.

6) Tehnici de atenuare a întârzierilor

6. 1 Randare → de intrare

Trageți 300ms întârziere pe mobil: '<meta name = „viewport” content = „width = device-width, initial-scale = 1 „>'.
Ascultători pasivi pentru derulare/tach: 'addEventListener (' touchstart ', handler, {pasiv: adevărat}]'.
Faceți clic pe procesare - într-o sarcină micro sau „requestAnimationFrame” pentru a desena rapid confirmarea.
Evitați layout-thrash: citire/scriere layout - butch.

6. 2 JS și Main Stream

Pachete separate (împărțirea codului), încărcați de-a lungul rutelor.
Calculatoare grele → Web Worker.
Foloseşte-l pe Scheduler. PostTask '/' requestIdleCallback 'pentru sarcini de fundal.
CSS critic - inline; JS с "amână "/" async'.
Lista virtualizare, 'conţinut-vizibilitate: auto', 'conţine: conţinut'.

6. 3 Redare și animații

Animați „transformare/opacitate”; nu animați „înălțime/stânga/cutie-umbră” pe sute de elemente.
„will-change” pus temporar înainte de animație; curat după.
Sprite/vector în loc de PNG-uri uriașe; evitați ceata grea.

6. 4 Rețea și memorie cache

Edge- кеш (CDN), „cache-control”, „stale-în timp ce-revalidate”.
Preconectarea la domeniile critice; Sugestii timpurii (103), HTTP/2/3.
Prefetch după intenție (hover/viewport).
Streaming/SSR + Hidratare progresivă/Insule.

7) Debowns/throttling și cozi

Dezbatere - pentru căutare în timpul intrării (150-300 ms).
Throttling - pentru defilare/redimensionare (100-200 ms).
Cozi/butching UI actualizări pentru evenimente frecvente (date live).

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) Modele de încărcare și feedback

Schelet → Conținut (fără trucuri, înălțimi fixe).
Shimmer 1200-1600 ms, amplitudine ≤ 20%.
Card optimist: previzualizare gri + text - îl înlocuim atunci când datele sosesc.
Eroare: scurt banner retry, taste idempotency pentru repetiții.

9) Strategii de rețea pentru răspuns rapid

• confirmarea UI imediat (optimist), backend - idempotent;
• atunci când timeout (3-5 s), afișarea statutului „primit, prelucrat” + retribuții de fundal;
• WebSocket/SSE pentru statusuri, backoff 1-2-4-8 s.

Pre-date: warm-up cache pe un program, prefetch de rute populare.

Funcții de margine: validări/agregări mai aproape de utilizator.

10) Rapid UI cod fragment

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) Diagnostic și monitorizare

Câmp: ROM (măsurători de câmp) p75 după țară/rețea/dispozitiv.
Faceţi clic pe trace 'intrare → handler → reţea → vopsea'.
Marcarea zonei roșii: markeri lungi de sarcină, timp de blocare, listă de rute lente.
Alerte de degradare INP/LCP/TTFB.
Teste de scenariu: înregistrare a timpului de referință "click → change DOM'.

12) Specificul iGaming

• UI: fixarea instantanee a stării butonului (apăsat → ocupat), dublu - toast „Acceptat”.
• Backend: cheie idempotentă după rată; status - prin WebSocket; timeout → transparent „în așteptare”.
• Bugetul UI: FUF ≤ 100 ms, confirmarea finală ≤ 1 s (dacă este mai lung, arătăm cronometrul/motivul).

• Accelerație ≤ 200 ms, rotație uniformă, atenuare 300-500 ms; fără cicluri infinite.
• Câștigați cotoare - fără strobe, text/sumă care poate fi citită (AAA).

• Delta patch-uri o dată la fiecare 250-1000 ms, butching;
• diff vizual (săgeată/culoare/grosime) fără salturi de aspect;
• actualizări anti-bounce pe hover/focus.

• incrementarea contului pe loturi 40-60 ms, cifre de masă;
• antet lipicios, virtualizare șir.

13) Anti-modele

Nu există răspuns instantaneu la clic (așteptare pentru rețea).
Animații grele 'filter/box-shadow' pe sute de elemente.
Un pachet imens de JS> 1-2 MB pe cale critică.
Spinner în Void este de peste 1-2 cu nici un progres/schelet.
Aspect citire/scriere într-o singură bifă (tăiere aspect).
Caracteristici Hover-numai pe mobil.

14) Jetoane de viteză (sistem de proiectare)

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) Lista de verificare QA a vitezei

Răspuns

• Faceți clic/atingeți → răspuns vizual ≤ 100 ms; → intrare ecou ≤ 50ms.
• Nu 300 ms întârziere pe mobil.
• INP p75 ≤ 200ms; Ponderea sarcinilor lungi ≤ 5%.

Încărcare

• TTFB ≤ 200ms; LCP ≤ 2. 5 s; CLS ≤ 0. 1.
• Schelete/progres în loc de „agățat” spinners.

Randare

• Numai „transformare/opacitate” în animații; nu există umbre „grele” pe matrice.
• conținut-vizibilitate/virtualizare pentru liste lungi.

Rețea

• Edge cache, preconnect, prefix de intenție.
• Idempotența și retragerile pentru acțiuni critice.

A11y

• 'preferă mișcarea redusă' susținută.
• Conținutul Hover este disponibil prin focalizare/tastatură.

16) Documentația sistemului de proiectare

„Bugete de latență”: tabelul pragurilor (robinet, hover, modal, pâine prăjită, formular).
„Feedback instant”: modele optimiste de acțiune + pullback.
„Prefetch by Intent”: ghid și utilități.
„Performance Playbook”: liste de verificare a profilurilor și alerte RUM.
„Do/Don' t”: Exemple de scripturi rapide/lente cu numere.

Scurt rezumat

Viteza de interacțiune este răspunsul instantaneu + livrarea previzibilă a rezultatului. Păstrați 100ms ca buget sacru pentru primul feedback, optimizați rețeaua (Edge/cache/prefix), descărcați fluxul principal, animați numai proprietăți ieftine și aplicați modele optimiste. Apoi, interfața se simte plin de viață, ușor de înțeles și rezistent - în special în mize mari, scenarii de iGaming în timp real.