Сатҳи ҳамкорӣ ва таъхири UI

1) Суръати интерфейс чист

1. Таъхири вуруд - аз имову ишора ба коркарди ҳодиса.

2. Таъхир дар шабака - пеш аз посухи пушти/кэш.

3. Таъхирнопазирӣ - коркард дар ҷараёни асосӣ (JS/CSS/тарҳ/ранг).

4. Таъхири аниматсия - ҳамворӣ ва устувории чаҳорчӯбаҳо.

Мақсад: корбар фавран мебинад, ки амал оғоз шудааст ва дар куҷо ҷараён дорад; натиҷаи воқеӣ пешгӯӣ мешавад.

2) Ҳадди дарки инсон

≤ 50 мс - "барқ тез" (акси чоп, матбуоти калидӣ).
≤ 100 мс - "фавран" (клик → ҷавоби визуалӣ).
≤ 200 мс - барои аксари аксуламалҳои UI қобили қабул аст.
≤ 1000 м - таҳаммулпазир бо пешрафти равшан/скелет.

3) Модели RAIL ва буҷаҳои мақсаднок

R (Ҷавоб): ҷавоби вуруд

Ангушт занед/клик → вокуниши визуалӣ ≤ 100 мс.
Фокус/hover → ≤ 80-120 мс.

A (Аниматсия): ҳамвор

60 FPS ⇒ чорчӯбаи 16. 7 мс; амалиёти вазнин барои баромадан аз чаҳорчӯба.
Мо танҳо "табдил "/" шаффофият" -ро зинда мекунем.

I (Бекор): вазифаҳои пасзамина

Ба слотҳо тақсим кунед ≤ 50 мс, тирезаҳои бекорро истифода баред.

L (Боркунӣ): боркунӣ

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

4) KPI ва огоҳиҳои суръат

INP (Ҳамкорӣ ба рангҳои навбатӣ): p75 <200 ms (хуб), 200-500 (такмил дода шавад).
Вазифаҳои дароз (> 50 мс): таносуби чаҳорчӯбаҳо бо LT <5%.
TTFB p75 <200 ms (кэш/Edge), LCP p75 <2. 5 саҳ.
Фикрҳои аввалини корбар (FUF): вақт то тасдиқи аввалини визуалии амал ≤ 100 мс.
Вақти истифодашаванда барои шаклҳои ≤ 1 с пеш аз ворид шудани майдони аввал.

5) Намунаҳои вокуниши фаврӣ UX

1. Навсозиҳои оптимистӣ: UI-ро фавран иваз кунед (тавозун/бет/лайк), ба хатогӣ баргардед.
2. Скелетҳо ба ҷои спиннер, агар сохтор маълум бошад.
3. Пешрафт/қадамҳо: бари прогрессивии детерминистӣ, агар дарозии раванд маълум бошад.
4. Маслиҳатҳои маҳаллӣ: тости фаврӣ/ҳолати "Ирсол"... ≤ 100 мс.
5. Пешпардохти ният: hover/намоёнӣ → 'prefetch '/' preload'.

6) Усулҳои сабук кардани таъхир

6. 1 Вуруд → Расонидан

Таъхири 300 мс дар мобилӣ: '<meta name = "viewport" content = "width = дастгоҳ-width, ибтидоӣ-миқёс = 1 ">'.
Шунавандагон барои ҳаракат/tach ғайрифаъол мебошанд: 'Addis. event' шунаванда ('touchstart', handler, {passive: true}) '.
Коркарди ангуштзанӣ - дар вазифаи хурд ё 'requEst Animation' Frame барои зуд ба даст овардани тасдиқ.
Нагузоред, ки тарҳбандӣ: нақшаи хондан/навиштан - қассоб.

6. 2 JS ва ҷараёни асосӣ

Бастаҳои ҷудогона (тақсимоти код), сарборӣ дар масирҳо.
Компютерҳои вазнин → Коргари веб.
Истифодаи 'scheduler. Вазифаи post '/' барои вазифаҳои пасзамина дархост 'Idleback'.
CSS интиқодӣ - inline; JS s 'defer '/' async'.
Виртуализатсияро номбар кунед, 'намоиши мундариҷа: худкор', 'дорои: мундариҷа'.

6. 3 Намоиш ва аниматсияҳо

Animate 'табдил/шаффофӣ'; 'баландӣ/чап/қуттии соя' -ро дар садҳо унсурҳо зинда накунед.
'will-change' муваққатан пеш аз аниматсия; пас аз тоза кардан.
Sprites/вектор ба ҷои PNG-ҳои калон; канорагирӣ кунед.

6. 4 Шабака ва кэш

Edge-kesh (CDN), 'кэш-назорат', 'кӯҳна-ҳангоми бозсозӣ'.
Пайвастшавӣ ба доменҳои интиқодӣ; Маслиҳатҳои барвақт (103), HTTP/2/3.
Prefetch аз рӯи ният (hover/viewport).
Ҷараён/SSR + Гидратсияи прогрессивӣ/ҷазираҳо.

7) Қарзҳо/дӯзандагӣ ва навбатҳо

Баҳс - барои ҷустуҷӯ ҳангоми воридшавӣ (150-300 мс).
Тротлинг - барои ҳаракат/андоза (100-200 мс).
Навсозиҳои навбатӣ/қассобии UI барои рӯйдодҳои зуд-зуд (маълумоти зинда).

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) Намунаҳои боркунӣ ва фикру мулоҳизаҳо

Скелет → Мазмун (твит нест, баландии собит).
Шиммер 1200-1600 мс, амплитуда ≤ 20%.
Корти оптимистӣ: пешнамоиши хокистарӣ + матн - мо онро ҳангоми ворид шудани маълумот иваз мекунем.
Хато: баннерҳои такрории кӯтоҳ, калидҳои idempotency барои такрорӣ.

9) Стратегияҳои шабака барои вокуниши фаврӣ

• тасдиқи UI фавран (оптимистӣ), ақиб - idempotent;
• ҳангоми танаффус (3-5 с), нишон додани ҳолати "қабулшуда, коркардшуда" + бозгашти пасзамина;
• Web-Socket/SSE барои статусҳо, бозгашт 1-2-4-8 с.

Маълумоти пешакӣ: кэши гармкунӣ аз рӯи ҷадвал, пеш аз хатсайрҳои маъмул.

Функсияҳои канорӣ: санҷишҳо/агрегатҳо ба корбар наздиктаранд.

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 аз рӯи кишвар/шабака/дастгоҳ.
Пайгирии 'вуруд → handler → network → ранг' -ро клик кунед.
Нишондиҳандаи минтақаи сурх: Нишондиҳандаҳои дарозмуддати вазифа, вақти басташавӣ, рӯйхати сусти масир.
Огоҳии таназзули INP/LCP/TTFB.
Санҷишҳои сенария: сабти вақти истинод "click → change DOM".

12) Хусусиятҳои IGaming

• UI: тасҳеҳи фаврии ҳолати тугма (пахш → банд), дукарата - вудкои "Қабулшуда".
• Пуштибонӣ: калиди idempotent аз рӯи суръат; статус - тавассути Веб-Сокет; Вақти корӣ → шаффоф "интизорӣ".
• Буҷаи UI: FUF ≤ 100 мс, тасдиқи ниҳоӣ ≤ 1 с (агар дарозтар бошад, мо вақтсанҷ/сабабро нишон медиҳем).

• Шитоб ≤ 200 мс, гардиши ягона, афтидан 300-500 мс; бе давраҳои беохир.
• Stubs ғолиб - нест strobe, матн/маблағи хондан (AAA).

• Delta ҳар як 250-1000 мс, қассоб;
• diff визуалӣ (тир/ранг/ғафсӣ) бе ҷаҳиши тарҳ;
• навсозиҳои зидди-bounce оид ба hover/фокус.

• зиёд кардани ҳисоб аз рӯи маҷмӯаҳо 40-60 мс, рақамҳои ҷадвал;
• сарлавҳаи часпанда, виртуализатсияи сатр.

13) Анти-намунаҳо

Ҷавоби фаврӣ ба клик (интизори шабака) нест.
Аниматсияҳои вазнин 'филтр/қуттии соя' дар садҳо унсурҳо.
Як бастаи бузурги JS> 1-2 МБ дар як роҳи интиқодӣ.
Spinner дар Void беш аз 1-2 аст, бе пешрафт/скелет.
Тарҳбандии хондан/навиштан дар як моҳ (партофтани тарҳ).
Хусусиятҳои танҳо Hover дар мобилӣ.

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 мс; → вуруди echo ≤ 50ms.
• Таъхири 300 мс дар мобилӣ.
• INP p75 ≤ 200ms; Ҳиссаи вазифаҳои дароз ≤ 5%.

Боркунӣ

• TTFB ≤ 200ms; LCP ≤ 2. 5 с; CLS ≤ 0. 1.
• Скелетҳо/пешрафт ба ҷои "овезон".

Намоиш

• Танҳо 'табдил/шаффофият' дар аниматсияҳо; дар массивҳо сояи "вазнин" вуҷуд надорад.
• намоиши мундариҷа/виртуализатсия барои рӯйхатҳои дароз.

Шабака

• Кэши канорӣ, преконнект, префикси ният.
• Номутобиқатӣ ва ақибнишинӣ барои амалҳои интиқодӣ.

A11y

• 'дастгирии-кам-кам' дастгирӣ карда мешавад.
• Мундариҷаи Hover тавассути фокус/клавиатура дастрас аст.

16) Ҳуҷҷатҳои системаи тарроҳӣ

"Буҷаҳои ниҳоӣ": ҷадвали ҳадди ниҳоӣ (ламс, hover, модалӣ, тост, шакл).
"Фикрҳои фаврӣ": намунаҳои амали оптимистӣ + бозпас гирифтан.
"Prefetch by Intent": роҳнамо ва хидматрасонӣ.
"Playbook Performance": рӯйхати профилҳо ва огоҳиҳои RUM.
"Иҷро кунед/накунед": Намунаҳои скриптҳои зуд/суст бо рақамҳо.

Хулосаи мухтасар

Суръати ҳамкорӣ вокуниши фаврӣ + таҳвили пешгӯишавандаи натиҷа мебошад. 100 метрро ҳамчун буҷаи муқаддас барои фикру мулоҳизаҳои аввал нигоҳ доред, шабакаро оптимизатсия кунед (Edge/кэш/префикс), ҷараёни асосиро бор кунед, танҳо хусусиятҳои арзонро зинда кунед ва намунаҳои оптимистиро ба кор баред. Он гоҳ интерфейс худро зинда, фаҳмо ва тобовар ҳис мекунад - алахусус дар сенарияҳои баланд, дар вақти воқеӣ IGaming.