Өз ара аракеттенүү ылдамдыгы жана latency UI

1) интерфейс ылдамдыгы деген эмне

1. Input latency - ишараттан окуяларды иштеп чыгуучуга чейин.

2. Network latency - кайтарым/кэш жооп чейин.

3. Render latency - негизги агымда иштетүү (JS/CSS/layout/paint).

4. Animation latency - кадрлардын жылмакайлыгы жана туруктуулугу.

Максаты: колдонуучу иш-аракет башталганын жана процесс кайда жылып жатканын дароо көрөт; натыйжасы алдын ала келет.

2) Адамдын кабыл алуу босогосу

≤ 50 мс - "чагылгандын ылдамдыгы" (басып чыгаруу жаңырыгы, баскычты басуу).
≤ 100 ms - "заматта" (чыкылдатуу → көрүү жооп).
≤ 200 ms - көпчүлүк UI реакцияларына жол берилет.
≤ 1000 ms - ачык прогресске/скелетке чыдамкай.

3) RAIL модели жана максаттуу бюджеттер

R (жооп): кириш жооп

Click/tap → көрүү жооп ≤ 100 ms.
Focus/hover → ≤ 80-120 ms.

A (Animation): жылмакайлык

60 FPS ⇒ кадр 16. 7 ms; оор операцияларды кадрдан алып чыгуу.
'transform '/' opacity' гана анимацияланат.

I (Idle): фон милдеттери

50 мс ≤ слотторго бөлөбүз, idle-терезелерди колдонобуз.

L (Load): жүктөп алуу

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

4) KPI жана ылдамдыгы

INP (Кийинки Paint үчүн Interaction): p75 <200 ms (жакшы), 200-500 (жакшыртуу керек).
Long Tasks (> 50 ms): LT <5% менен кадрлар үлүшү.
TTFB p75 <200 ms (кэш/Edge), LCP p75 <2. 5 б.
Биринчи колдонуучу Feedback (FUF): иш-аракет биринчи визуалдык ырастоо чейин убакыт ≤ 100 ms.
Формалар үчүн колдонулуучу убакыт: биринчи талааны киргизгенге чейин ≤ 1 с.

5) UX-тез жооп үлгүлөрү

1. Оптимисттик жаңыртуулар: Дароо UI (баланс/коюм/лайк) өзгөртүү, ката кетиргенде кайра тебүү.
2. Скелеттер, эгерде түзүлүшү белгилүү болсо, спиннердин ордуна.
3. Прогресс/этаптар: процесстин узундугу белгилүү болсо, детерминацияланган прогресс.
4. Жергиликтүү кеңештер: заматта тосттор/мамлекеттик "жөнөтүү"... ≤ 100 ms.
5. ниети боюнча алдын ала жүктөө: hover/көрүү → 'prefetch '/' preload'.

6) Техникалык кечигүү азайтуу ыкмалары

6. 1 Input → Render

мобилдик боюнча 300 ms delay алып: '<meta name = "viewport" content = "width = device-width, initial-scale = 1">'.
'addEventListener (' touchstart ', handler, {passive: true})'.
Басууну иштетүү - микро-тапшырмада же 'requestAnimationFrame' тез ырастоо үчүн.
layout-thrash качуу: окуу/жазуу layout - batchit.

6. 2 JS жана негизги агым

Бандлаларды бөлүү (code-splitting), маршруттар боюнча жүктөө.
Оор эсептөө → Web Worker.
'scheduler. postTask '/' requestIdleCallback 'фон тапшырмалары үчүн.
Критикалык CSS - inline; JS с `defer`/`async`.
Тизмелерди виртуалдаштыруу, 'content-visibility: auto', 'contain: content'.

6. 3 Рендер жана анимация

Жандандыруу 'transform/opacity'; жүздөгөн элементтерге 'height/left/box-shadow' анимацияланбайт.
'will-change' анимациянын алдында убактылуу коюу; кийин тазалоо.
Чоң PNG ордуна спрайттар/вектор; оор blur алыс.

6. 4 Тармак жана кэш

Edge-кеш (CDN), `cache-control`, `stale-while-revalidate`.
критикалык домендерге Preconnect; Early Hints (103), HTTP/2/3.
ниети боюнча Prefetch (hover/viewport).
Streaming/SSR + прогрессивдүү гидрация/аралдар.

7) Дебаунс/Троттлинг жана кезек

Дебаунс - киргизүү учурунда издөө үчүн (150-300 ms).
Trottling - үчүн scroll/resize (100-200 ms).
Тез-тез окуяларда кезек/батчинг UI-Updates (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) Жүктөө жана пикир үлгүлөрү

Skeleton → Content (жылышсыз, белгиленген бийиктиктер).
Shimmer 1200-1600 мс, амплитуда ≤ 20%.
Оптимисттик карта: боз алдын ала + текст - маалыматтар келгенде алмаштыруу.
Ката: кыска retry-баннер, кайталоо үчүн idempotency-ачкычтар.

9) тез жооп берүү үчүн тармак стратегиялары

• ырастоо UI дароо (оптимисттик), арткы - idempotent;
• Таймаутта (3-5 с) "кабыл алдык, иштетебиз" статусун көрсөтүү + фондук ретрациялар;
• статусу үчүн WebSocket/SSE, backoff 1-2-4-8 б.

Алдын-ала маалыматтар: warm-up кэш тартиби, префетч популярдуу маршруттар.

Edge функциялары: колдонуучуга жакын валидация/агрегация.

10) Тез UI Code Snippet

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) Диагностика жана мониторинг

Талаа: RUM (талаа метриктер) p75 өлкөлөр/тармактар/түзмөктөр боюнча.
Click Trace: 'input → handler → network → paint'.
"Кызыл зоналарды" белгилөө: Long Task маркерлер, blocking-time, Slow-route тизмеси.
INP/LCP/TTFB деградацияга алерта.
Script Tests: "Click → DOM өзгөртүү" эталондук убакыт жазуу.

12) iGaming өзгөчөлүктөрү

• UI: Баскычтын абалын заматта бекитүү (pressed → busy), кош - тост "кабыл алынды".
• Backend: idempotent баасы ачкычы; статус - WebSocket аркылуу; таймаут → тунук "pending".
• UI-бюджет: FUF ≤ 100 мс, акыркы ырастоо ≤ 1 с (узак болсо - убакыт/себебин көрсөтүү).

• Ылдамдатуу ≤ 200 мс, бир калыпта айлануу, өчүрүү 300-500 мс; чексиз циклдери жок.
• Утуштарды туташтыргычтар - стробасыз, текст/сумма окулат (AAA).

• Delta патч 250-1000 ms бир жолу, батчинг;
• визуалдык diff (жебе/түс/калыңдыгы) эч кандай секирик layout;
• hover/focus боюнча анти-кулак тактоо.

• 40-60 мс батчалар менен эсептөө, таблица сандары;
• sticky-калпак, саптарды виртуалдаштыруу.

13) Анти-үлгүлөрү

чыкылдатуу боюнча бир заматта жооп жоктугу (тармак күтүү).
Оор анимациялар 'filter/box-shadow' жүздөгөн элементтерде.
Бир чоң JS Bandl> 1-2 MB критикалык жол.
"Боштуктагы Spinner" прогресс/скелет жок 1-2 с ашуун.
Окуу/жаздыруу layout бир тик (layout thrashing).
мобилдик Hover-only өзгөчөлүктөрү.

14) ылдамдык белгилери (дизайн системасы)

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) QA-чек тизме

Жооп

• Click/tap → визуалдык жооп ≤ 100 ms; киргизүү → эхо ≤ 50 ms.
• Жок 300 ms-мобилдик кечигүү.
• INP p75 ≤ 200 мс; Long Tasks үлүшү ≤ 5%.

Жүктөө

• TTFB ≤ 200 мс; LCP ≤ 2. 5 с; CLS ≤ 0. 1.
• Скелеттер/прогресс ордуна "илинип" жип.

Рендер

• Анимацияларда гана 'transform/opacity'; массивдерде "оор" көлөкөлөр жок.
• content-visibility/узун тизмелер үчүн виртуалдаштыруу.

Тармак

• Edge кэш, preconnect, ниети боюнча prefetch.
• Идемпотенттүүлүк жана критикалык иш-аракеттер үчүн Retra.

A11y

• 'prefers-reduced-motion' колдоого алынган.
• Hover мазмуну фокус/клавиатура боюнча жеткиликтүү.

16) Дизайн системасы үчүн документтер

"Latency Budgets": босоголордун таблицасы (tap, hover, modal, toast, форма).
"Instant Feedback": оптимисттик иш-аракет үлгүлөрү + артка.
"Prefetch by Intent": гиддер жана утилиттер.
"Performance Playbook": Profile чек барактары жана RUM-алерталар.
"Do/Don 't": сандар менен тез/жай жагдайлар мисалдар.

Кыскача резюме

Өз ара аракеттенүү ылдамдыгы - бул тез жооп + алдын ала жыйынтык жеткирүү. Биринчи-feedback үчүн ыйык бюджет катары 100 мс кармап, тармакты оптималдаштыруу (Edge/кэш/prefetch), негизги агымды түшүрүп, арзан касиеттерди гана жандандыруу жана оптимисттик үлгүлөрдү колдонуу. Анда интерфейс жандуу, түшүнүктүү жана туруктуу сезилет - өзгөчө iGaming сценарийлеринде жогорку чендер жана реалдуу убакыт менен.