Өзара іс-қимыл жылдамдығы және latency UI

1) Интерфейс жылдамдығы дегеніміз не?

1. Input latency - әрекеттен оқиға өңдегішіне дейін.

2. Network latency - бэкенд/кэш жауабына дейін.

3. Render latency - басты ағында өңдеу (JS/CSS/layout/paint).

4. Animation latency - кадрлардың бірқалыптылығы мен тұрақтылығы.

Мақсат: пайдаланушы әрекеттің басталғанын және процестің қайда жылжып жатқанын бірден көреді; нақты нәтиже болжамды келеді.

2) Адами қабылдау шегі

≤ 50 мс - «найзағай жылдамдығымен» (басып шығару жаңғырығы, пернені басу).
≤ 100 мс - «бірден» (басу → көрнекі жауап).
≤ 200 мс - UI-реакциялардың көпшілігі үшін рұқсат етіледі.
≤ 1000 мс - айқын прогрессте/скелетонда төзімді.

3) RAIL-модель және нысаналы бюджеттер

R (Response): енгізуге жауап беру

Клик/тап → визуалды жауап беру ≤ 100 мс.
Фокус/hover → ≤ 80-120 мс.

A (Animation): тегіс

60 FPS ⇒ кадр 16. 7 мс; ауыр операцияларды кадрдан шығару.
Тек 'transform '/' opacity' анимацияланады.

I (Idle): өңдік тапсырмалар

50 мс ≤ слоттарға бөлеміз, idle-терезелерді пайдаланамыз.

L (Load): жүктеу

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

4) KPI және жылдамдық тәуекелдері

INP (Interaction to Next Paint): p75 <200 мс (жақсы), 200-500 (жақсарту керек).
Long Tasks (> 50 мс): LT <5% кадрларының үлесі.
TTFB p75 <200 мс (кэш/Edge), LCP p75 <2. 5 с.
First User Feedback (FUF): әрекетті бірінші визуалды растауға дейінгі уақыт ≤ 100 мс.
Пішіндер үшін Time-to-Usable: бірінші өрісті енгізгенге дейін ≤ 1 с.

5) UX-лезде жауап беру үлгілері

1. Оптимистік жаңартулар: UI-ді бірден өзгертеміз (баланс/ставка/лайк), қате болған жағдайда сырғанаймыз.
2. Егер құрылымы белгілі болса, спиннердің орнына скелетондар.
3. Прогресс/кезеңдер: егер процесс ұзындығы белгілі болса, детерминирленген прогрессбар.
4. Жергілікті кеңестер: лездік тосттар/стейт «Жібереміз»... ≤ 100 мс.
5. Алдын ала жүктеу: hover/көріну → 'prefetch '/' preload'.

6) Кідірістерді төмендетудің техникалық тәсілдері

6. 1 Input → Render

'<meta name = «viewport» content = «width = device-width, initial-scale = 1»>.
'addEventListener (' touchstart ', handler, {passive: true})'.
Растауды жылдам бояу үшін 'requestAnimationFrame' түймешігін басыңыз.
layout-thrash бағдарламасынан аулақ болыңыз: оқу/жазу layout - батчит.

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 орнына спрайттар/вектор; heavy blur.

6. 4 Желі және кэш

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

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

Дебаунс - енгізу кезінде іздеу үшін (150-300 мс).
Троттлинг - скролл/resize үшін (100-200 мс).
Жиі оқиғалар кезінде UI жаңартуларының кезектері/батчингі (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 код-сниппеттері

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 елдер/желілер/құрылғылар бойынша.
'input → handler → network → paint' түймешігін басыңыз.
«Қызыл аймақтарды» белгілеу: Long Task маркерлер, blocking-time, Slow-route list.
INP/LCP/TTFB деградациясына алерта.
Сценарийлік тесттер: «клик → DOM өзгерту» эталондық уақытын жазу.

12) iGaming ерекшелігі

• UI: түйменің жай-күйін бірден тіркеу (pressed → busy), дубль - тост «Қабылданды».
• Бэкенд: idempotent ставка бойынша кілт; мәртебесі - WebSocket арқылы; таймаут → мөлдір «pending».
• UI-бюджет: FUF ≤ 100 мс, қорытынды растау ≤ 1 с (егер ұзақ болса - таймер/себебін көрсетеміз).

• Жылдамдату ≤ 200 мс, біркелкі айналу, 300-500 мс; шексіз циклдарсыз.
• Ұтыс тығындары - стробсыз, мәтін/сомасы оқылатын (AAA).

• Дельта-патчтар 250-1000 мс, батчинг;
• көрнекі дифф (көрсеткі/түсі/қалыңдығы) секірулерсіз layout;
• hover/focus жаңартуларға қарсы діріл.

• шоттың инкремент батчаларымен 40-60 мс, кестелік сандар;
• sticky-қалпақ, жолдарды виртуалдандыру.

13) Қарсы үлгілер

Шертуге жылдам жауап берудің болмауы (желіні күту).
Жүздеген элементтегі 'filter/box-shadow' ауыр анимациялары.
Бір үлкен JS-бандл> 1-2 МБ қиын жолда.
Прогрессіз/скелетонсыз 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-жылдамдық чек парағы

Жауап беру

• Клик/тап → визуалды жауап беру ≤ 100 мс; енгізу → эхо ≤ 50 мс.
• Ұялы телефондарда 300 мс кідіріс жоқ.
• INP p75 ≤ 200 мс; Long Tasks үлесі ≤ 5%.

Жүктеу

• TTFB ≤ 200 мс; LCP ≤ 2. 5 с; CLS ≤ 0. 1.
• «Аспалы» спиннерлердің орнына скелетондар/прогресс.

Рендер

• Тек анимацияларда 'transform/opacity'; массивтерде «ауыр» көлеңкелер жоқ.
• content-visibility/ұзын тізімдер үшін виртуалдандыру.

Желі

• Edge-кэш, preconnect, ниеті бойынша префетч.
• Сыни әрекеттерге арналған теңсіздік және ретра.

A11y

• 'prefers-reduced-motion' қолданылды.
• Hover мазмұны фокус/пернетақта бойынша қол жетімді.

16) Дизайн-жүйеге арналған құжаттама

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

Қысқаша түйіндеме

Өзара іс-қимыл жылдамдығы - бұл жылдам жауап + нәтижені болжамды жеткізу. first-feedback үшін қасиетті бюджет ретінде 100 мс ұстаңыз, желіні оңтайландырыңыз (Edge/кэш/префетч), негізгі ағынды жеңілдетіңіз, тек арзан қасиеттерді анимациялаңыз және оптимистік үлгілерді қолданыңыз. Онда интерфейс жанды, түсінікті және тұрақты сезіледі - әсіресе жоғары мөлшерлемесі мен нақты уақыты бар iGaming сценарийлерінде.