Փոխազդեցության արագությունը և latency UI

1) Ի՞ նչ է ինտերֆեյսի արագությունը

Արագությունը միայն էջի բեռնումը չէ։ Սա չորս ուշացումների գումար է

1. Input latency-ը ժեստից մինչև իրադարձության վերամշակողը։

2. Network latency-ը մինչև backend/kash պատասխանը։

3. Render latency-ը հիմնական հոսքի վրա (JS/CSS/layout/paint)։

4. Animation latency-ը լողի և կադրերի բարձրացումն է։

Նպատակը 'օգտագործողը անմիջապես տեսնում է, որ գործողությունը սկսվեց և որտեղ է շարժվում գործընթացը։ իրական արդյունքը գալիս է կանխատեսելի։

2) Մարդկային ընկալման շեմերը

50 մգ - «կայծակնային» (տպագրության էխո, սեղմելով)։

100 ms - «ակնթարթ» (տեսահոլովակը տեսողական արձագանք է)։

200 ms - թույլատրելի UI ռեակցիաների մեծամասնության համար։

1000 մզ - համբերատար է ակնհայտ առաջընթացի/կմախքի հետ։

3) RAIL մոդելը և բյուջեները

R (Response) 'արձագանք

Կլիք/tap-ը տեսողական արձագանք է տալիս 100 մզ։

Ֆոկուս/hover no 80-120 մզ։

A (Animation) 'լող

60 FPS-ը 16 շրջանակն է։ 7 մզ; ծանր վիրահատություններ դուրս բերել շրջանակից։

Animirum միայն «transform »/« opacity»։

I (Idle) 'ֆոնային առաջադրանքներ

Մենք կիսում ենք 50 մզ, օգտագործում ենք idle պատուհանը։

L (Load) 'բեռնումը

TTFB 35200, LCP 382։ 5 գ, INP 24200 ms, CLS 240։ 1.

4) KPI-ն և արագության ալտերտերը

INP (Interaction to Next Paint): p75 <200 ms (լավ), 200-500 (պետք է բարելավել)։

Long Tasks (> 50 ms) - LT <5 տոկոսից կադրերի մասը։

TTFB p75 <200 ms (kes/Edge), LCP p75 <2։ 5 ս

First User Feedback (FUF): ժամանակը մինչև գործողության առաջին տեսողական ապացույցը 100 մզ էր։

Time-to-Usable-ը ձևերի համար '361 մինչև առաջին դաշտը։

5) UX-patters ակնթարթային արձագանք

1. Լավատեսական նորարարություններ. Մենք անմիջապես փոխում ենք UI-ը (հավասարակշռություն/գլխարկ/հավաք), սխալվում ենք։

2. Սկելետոնները սպինների փոխարեն, եթե հայտնի է կառուցվածքը։

3. Առաջընթացը/փուլերը 'դետերմինացված առաջընթացը, եթե գործընթացի երկարությունը հայտնի է։

4. Տեղական հուշումներ 'ակնթարթային թոստեր/սթեյթ «Ուղարկենք»... 36100 մզ։

5. Նախնական բեռնումը 'hover/տեսանելիություն www.fetch '/' preload "։

6) Հետաձգումների նվազեցման տեխնիկական մեթոդներ

6. 1 Input → Render

Հեռացրեք 300 ms winday բջջային: "։

Passive-ի լսողները scroll/tacha-ի համար '"adddeVentListener (" touchstart ", handler," passive: www.com) "։

Կլիկի մշակումը միկրոշրջանում կամ «requestaNiment Frame» է արագ տեղադրելու համար։

Խուսափեք layout-thrash: Ընթերցումներ/ձայնագրություններ layout - batching.

6. 2 JS և հիմնական հոսքը

Բաժանեք խմբերը (code-splitting), բեռնեք երթուղիներով։

Web Worker-ի ծանր հաշվարկները։

Օգտագործեք 'scheduler։ PosttTask '/« requestiDleCallback »-ը ֆոնային խնդիրների համար։

Քննադատական CSS-inae; JS с `defer`/`async`.

Ցուցակների վիրտուալիզացիա, "entertent-visibility: www.am: entain: entain '։

6. 3 Ռենդեր և անիմացիա

Անիմիրուրու 'transform/opacity "; մի անիմիրացված «height/left/big-shadow» հարյուրավոր տարրերի վրա։

«will-change» տեղադրել ժամանակավորապես անիմացիայի առջև։ հեռացնել դրանից հետո։

Սպրեյտներ/վեկտոր հսկայական PNG-ի փոխարեն։ խուսափեք heavy blur.

6. 4 Ցանց և քեշ

Edge-кеш (CDN), `cache-control`, `stale-while-revalidate`.
Preconnium քննադատական օրինագծերի համար։ Early Hints (103), HTTP/2/3.

Prefetch մտադրությամբ (hover/view.ru)։

Streaming/SSR + առաջադիմական հիդրոմ/կղզիներ։

7) Դեբաունս/տրոտլինգ և հերթեր

Դեբաունսը 'մուտքագրման ընթացքում որոնելու համար (150-300 մզ)։

Trottling-ը scroll/resize-ի համար (100-200 մզ)։

Հերթերը/UI-2019 բատչինգը հաճախակի իրադարձությունների ժամանակ (նախկին տվյալները)։

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 no Engent (առանց հերթափոխի, ֆիքսված բարձրություններ)։

Shimmer 1200-1600 ms, ամպլիտուդը 20 տոկոսն է։

Լավատես քարտը 'մոխրագույն + տեքստ, փոխարինում ենք տվյալների գալուստին։

Սխալ 'կարճ retry-banner, idempotency-բանալիներ խոհարարների համար։

9) Արագ պատասխանելու համար ցանցային ռազմավարությունները

Քննադատական գործողությունները (տոկոսադրույքը/105)

UI-ի ապացույցը անմիջապես (լավատես), backend-idempotent;

Թայմաուտում (3-5 s) կարգավիճակի ցուցադրումը «ստացվեց, մենք վերարտադրում ենք» + ֆոնային ռետրան;

Socket/SSE-ը կարգավիճակների համար, backoff 1-2-4-8։

Pre-տվյալները ՝ warm-up-cash, հայտնի երթուղիների նախատիպը։

Edge գործառույթները 'vailidation/ագրեգացիան ավելի մոտ է օգտագործողին։

10) Արագ UI-ի կոդն է։

Ակնթարթային արձագանքը կլիկի վրա (feedback մինչև ցանցային պատասխանը)

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');
}
});
});

Prefetch մտադրությամբ (hover/viewich)

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-ը «էժան» անիմացիայի և skeleton-ի համար

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 chandler www.paint»։

«Կարմիր գոտիների» նշումը ՝ Long Task մարկերները, blocking-time, Slow-roporlist։

Ալերտները INP/LCP/TTFB-ի դեգրադացիայի վրա։

Բեմական թեստեր '«տեսահոլովակ» ժամանակի ստանդարտ ձայնագրությունը DFC-ի փոփոխությունն է։

12) iGaming հատկությունները

Տոկոսադրույքը/գնումը

UI 'կոճակի վիճակի ակնթարթային ամրագրումը (pressed nobuy), դուբլը' tost «Սովորական»։

Բեքենդը 'idempotent բանալին, կարգավիճակը - WindowSocket-ի միջոցով; Թայմաութը թափանցիկ «pending» է։

UI-բյուջեն ՝ FUF 35100, վերջնական թիվ 1 s (եթե ավելի երկար, ցույց ենք տալիս թայմեր/պատճառ)։

• Ցրումը 200 մզ է, միատեսակ պտույտը, 300-500 մզ։ առանց անվերջ ցիկլերի։
• Հաղթողի արգելակները 'առանց կառուցվածքի, տեքստը/գումարը (AAA)։

Live-գործակիցները

Դելտա Պաթչին մեկ անգամ 250-1000 մզ, բատչինգ;

տեսողական կոմպոզիցիա (սլաքի/գույն/նիշ) առանց layout ցատկելու;

anti drebesg տեղադրված է hover/focus-ում։

Aleksra/վարկանիշներ

Նշված հաշիվները 40-60 մզ են, պլանշետային թվերը։

sticky-գլխարկ, տողերի վիրտուալացում։

13) Anti-patterna

Ակնթարթային արձագանքի բացակայությունը կլիկի վրա (ցանցի սպասումը)։

Ծանր անիմացիաները 'www.ter/big-shadow "հարյուրավոր տարրերի վրա։

Մի հսկայական JS-բանդլ> 1-2 MB-ը կրիտիկական ճանապարհին։

«Spinner դատարկ» ավելի քան 1-2 s առանց առաջընթացի/կմախքի։

Կարդացեք/ձայնագրեք 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-chek արագության թերթիկ

Արձագանք

• Clik/tap-ը տեսողական արձագանք է տալիս 100 մզ։ մուտքագրումը 50 մզ է։
• Բջջային ձգձգումներ չկան։
• INP p75-200 ms; Long Tasks-ի մասնաբաժինը 5 տոկոսն է։

Բեռնումը

• TTFB 35200 ms; LCP ≤ 2. 5 s; CLS ≤ 0. 1.
• Սկելետոն/առաջընթաց «կախված» սպինների փոխարեն։

Render

• Միայն «transform/opacity» անիմացիաներում; զանգվածների վրա չկա «ծանր» ստվեր։
• wwww.ent-visibility/վիրտուալացում երկար ցուցակների համար։

Ցանցը

• Edge-kes, preconnect, prefetch մտադրությամբ։
• Idempotenty և retray քննադատական գործողությունների համար։

A11y

• [wwww.fers-reduced-motion "-ը աջակցվում է։
• Hover բովանդակությունը հասանելի է ֆոկուսով/ստեղնաշարով։

16) Պլանավորվում է դիզայնի համակարգի համար

«Latency Budgets»: 108 շեմեր (tap, hover, modal, to.ru, ձև)։

«Instation Feedback» ՝ լավատեսական գործողությունների պաթթերներ + արձագանք։

«Difetch by Intent» ՝ www.d և կոմունիստները։

«Performance Playbook» ՝ ավելացման չեկի թերթիկներ և RUM-ալերտներ։

«Do/Don 't» -ը արագ/դանդաղ կոդերի օրինակներ է թվերով։

Live ռեզյումե

Փոխազդեցության արագությունը ակնթարթային արձագանք է + կանխատեսելի արդյունքի։ Պահեք 100 մզ որպես սուրբ բյուջե first-feedback-ի համար, օպտիմիզացրեք ցանցը (Edge/kash/prefetch), բեռնեք հիմնական հոսքը, անիմիրուզացրեք միայն էժան հատկությունները և օգտագործեք լավատեսական արտոնագրեր։ Այդ ժամանակ ինտերֆեյսը զգում է կենդանի, հասկանալի և կայուն, հատկապես iGaming-ի սցենարներում բարձր տոկոսադրույքով և իրական ժամանակով։