ურთიერთქმედების სიჩქარე და latence UI

1) რა არის ინტერფეისის სიჩქარე

1. Input latency - ჟესტიდან დაწყებული ღონისძიების დამამუშავებლამდე.

2. ქსელის ლიტერატურა - ზურგჩანთა/კეშის პასუხამდე.

3. Render latence - ძირითადი ნაკადის დამუშავება (JS/CSS/layout/paint).

4. ანიმაციის ლიტერატურა - გლუვი და სტაბილური პერსონალი.

მიზანი: მომხმარებელი მყისიერად ხედავს, რომ მოქმედება დაიწყო და სად მოძრაობს პროცესი; რეალური შედეგი პროგნოზირებულია.

2) ადამიანის აღქმის ბარიერები

50 ms - „ელვისებური სისქე“ (ბეჭდვის ექო, კლავიშების დაჭერით).
100 ms - „მყისიერად“ (კლიკი - ვიზუალური პასუხი).
200 ms დასაშვებია UI რეაქციების უმეტესობისთვის.
1000 ms - ტოლერანტული აშკარა პროგრესიით/ჩონჩხი.

3) სარკინიგზო მოდელი და მიზნობრივი ბიუჯეტები

R (Response): პასუხი შეყვანის შესახებ

კლიკი/tap - ვიზუალური პასუხი 100 ms.
ფოკუს/ჰოვერი 80-120 ms.

ანიმაცია: გლუვი

60 FPS ჩარჩო 16. 7 ms; მძიმე ოპერაციების გაკეთება ჩარჩოდან.
ჩვენ ანიმაციას მხოლოდ "ტრანსფორმაციას "/' opacity".

I (Idle): ფონის დავალებები

ჩვენ დავყოფთ 50 ms-ს, ვიყენებთ idle ფანჯრებს.

L (Load): დატვირთვა

TTFB 200 ms, LCP-2. 5 გვ, INP - 200 ms, CLS - 0. 1.

4) KPI და სიჩქარის ალერტები

INP (შემდეგი პაინტი): p75 <200 ms (კარგი), 200-500 (უნდა გაუმჯობესდეს).
Long Tasks (> 50 ms): პერსონალის წილი LT <5% -ით.

TTFB p75 <200 ms (ქეში/Edge), LCP p75 <2. 5 ს

First User Feedback (FUF): მოქმედების პირველი ვიზუალური დადასტურების დრო 100 ms.
დრო ფორმებისთვის: 1 ევრო პირველი ველის შესვლამდე.

5) მყისიერი პასუხის ნიმუშები

1. ოპტიმისტური განახლებები: ჩვენ დაუყოვნებლივ ვცვლით UI- ს (ბალანსი/განაკვეთი/მოწონება), შეცდომით ვბრუნდებით.
2. სპინერის ნაცვლად ჩონჩხი, თუ სტრუქტურა ცნობილია.
3. პროგრესი/ეტაპები: დეტერმინისტული პროგრესირებადი, თუ პროცესის სიგრძე ცნობილია.
4. ადგილობრივი რჩევები: მყისიერი სადღეგრძელოები/სტატი „გამოგიგზავნეთ“... 100 ms.
5. განზრახვის წინასწარ დატვირთვა: hover/ხილვადობა 'prefetch '/' preload'.

6) შეფერხებების შემცირების ტექნიკური ტექნიკა

6. 1 Input → Render

ამოიღეთ 300 ms delay მობილური: '<meta name = "viewport" შინაარსი = "width = device-width, initial-scale = 1"> ".
AddeVentListener ('touchstart', handler, {passive: ნამდვილი) ".
დაწკაპუნების დამუშავება - მიკროავტობუსში ან 'requestAnimationFrame' სწრაფი დადასტურებისთვის.
თავიდან აიცილეთ layout-thrash: წაიკითხეთ/ჩაწერა layout - batch.

6. 2 JS და მთავარი ნაკადი

გამოყავით ბანდები, ატვირთეთ მარშრუტები.
მძიმე გამოთვლები Web Worker.
გამოიყენეთ 'scheduler. postTask '/' requestIDE Callback 'ფონური დავალებებისთვის.
კრიტიკული CSS - inline; JS с `defer`/`async`.
სიების ვირტუალიზაცია, 'შინაარსის ხედვა: auto', 'contain: შინაარსი'.

6. 3 რენდერი და ანიმაცია

ანიმაცია 'ტრანსფორმაცია/ანაზღაურება'; ნუ ანიმაცია 'height/left/ყუთი' ასობით ელემენტზე.
'will-change' განთავსება დროებით ანიმაციამდე; გაწმენდის შემდეგ.
სპრიტები/ვექტორი უზარმაზარი PNG- ის ნაცვლად; თავიდან აიცილეთ მძიმე ბლური.

6. 4 ქსელი და ქეში

Edge-кеш (CDN), `cache-control`, `stale-while-revalidate`.
Preconnect კრიტიკულ დომენებზე; Early Hints (103), HTTP/2/3.
განზრახვა (hover/viewport).
Streaming/SSR + პროგრესული ჰიდრაცია/კუნძულები.

7) დებაუნსი/trottling და რიგები

Debowns - ძებნისთვის შეყვანის დროს (150-300 ms).
Trotling - skroll/resize (100-200 ms).
ხაზები/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) დატვირთვისა და გამოხმაურების ნიმუშები

Skeleton - შინაარსი (ძაბვის გარეშე, ფიქსირებული სიმაღლეები).
Shimmer 1200-1600 ms, ამპლიტუდა - 20%.
ოპტიმისტური ბარათი: ნაცრისფერი გრადუსი + ტექსტი - მონაცემების მოსვლისას შეცვალეთ.
შეცდომა: მოკლე გამეორების ბანერი, გამეორების იდუმალი გასაღებები.

9) ქსელის სტრატეგიები სწრაფი პასუხისთვის

• UI- ს დადასტურება დაუყოვნებლივ (ოპტიმისტური), ზურგჩანთა - idempotent;
• ტაიმუთის დროს (3-5 გვ), სტატუსის ჩვენება „მივიღეთ, ვამუშავებთ“ + ფონის რეტრატებს;
• WebSocket/SSE სტატუსებისთვის, backoff 1-2-4-8.

წინასწარი მონაცემები: warm-up ქეში გრაფიკის მიხედვით, პოპულარული მარშრუტების წინამორბედი.

Edge ფუნქციები: ვალიდაცია/აგრეგაცია უფრო ახლოს არის მომხმარებელთან.

10) სწრაფი UI snippets

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 '.
„წითელი ზონების“ მარკირება: გრძელი ტასკის მარკერები, ბლოკირების დრო, სლეუ-მარშრუტი.
ალერტები INP/LCP/TTFB დეგრადაციისთვის.
სცენარის ტესტები: საცნობარო დროის ჩაწერა „დაწკაპუნება - DOM ცვლილება“.

12) iGaming სპეციფიკა

• UI: ღილაკის მდგომარეობის მყისიერი დაფიქსირება (პრესა), დუბლი - სადღეგრძელო „ჩვეულებრივ“.
• Back: idempotent განაკვეთის გასაღები; სტატუსი - WebSocket- ის საშუალებით; ტაიმუთი გამჭვირვალე „pending“.
• UI ბიუჯეტი: FUF-100 ms, საბოლოო დადასტურება 1 წმ (უფრო მეტხანს - ჩვენ ვაჩვენებთ ტაიმერს/მიზეზს).

• აჩქარება 200 ms, ერთიანი როტაცია, 300-500 ms შემცირება; უსასრულო ციკლების გარეშე.
• გამარჯვების დანამატები - სტაგნაციის გარეშე, ტექსტი/თანხა იკითხება (AAA).

• დელტა პატჩი ერთხელ 250-1000 ms, batching;
• ვიზუალური (ისარი/ფერი/სისქე) layout- ის გადახტომის გარეშე;
• განახლებების ანთება hover/focus.

• ანგარიშის ვადა 40-60 ms, ცხრილის ნომრები;
• sticky ქუდი, სტრიქონების ვირტუალიზაცია.

13) ანტი შაბლონები

დაწკაპუნებაზე მყისიერი რეაქციის არარსებობა (ქსელის მოლოდინი).
ასობით ელემენტზე 'filter/box-shadow' მძიმე ანიმაციები.
ერთი უზარმაზარი JS-bandle> 1-2 MB კრიტიკულ გზაზე.
„სპინერი სიცარიელეში“ 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; Echo- ს შეყვანა 50 ms.
• მობილური 300 ms შეფერხება არ არის.
• INP p75-200 ms; Long Tasks- ის წილი 5% -ს შეადგენს.

ჩატვირთვა

• TTFB 200 ms; LCP ≤ 2. 5 გვ; CLS ≤ 0. 1.
• ჩონჩხი/პროგრესი „ჩამოკიდებული“ სპინერების ნაცვლად.

რენდერი

• მხოლოდ „ტრანსფორმირება/კონტროლი“ ანიმაციებში; მასივებში არ არის „მძიმე“ ჩრდილები.
• შინაარსის ხედვა/ვირტუალიზაცია გრძელი სიებისთვის.

ქსელი

• Edge-cash, preconnect, განზრახვა.
• Idempotence და retrais კრიტიკული ქმედებებისთვის.

A11y

• prefers-reduced-motion 'მხარს უჭერს.
• Hover შინაარსი ხელმისაწვდომია ფოკუსით/კლავიატურით.

16) დიზაინის სისტემის დოკუმენტაცია

„Latency Budgets“: რეიდების ცხრილი (tap, hover, modal, toast, ფორმა).
Instant Feedback: ოპტიმისტური მოქმედებების ნიმუშები + გამოტოვება.
„Prefetch by Intent“: ჰაიდი და კომუნალური მომსახურება.
„Performance Playbook“: პროფილის ჩეკი და RUM ალერტები.
„Do/Don 't“: სწრაფი/ნელი სცენარების მაგალითები ციფრებით.

მოკლე რეზიუმე

ურთიერთქმედების სიჩქარე არის მყისიერი პასუხი + შედეგის პროგნოზირებადი მიტანა. შეინარჩუნეთ 100 ms, როგორც წმინდა ბიუჯეტი first-feedback- ისთვის, ოპტიმიზაცია მოახდინეთ ქსელზე (Edge/cash/prefetch), გადმოტვირთეთ მთავარი ნაკადი, გამოიყენეთ მხოლოდ იაფი თვისებები და გამოიყენეთ ოპტიმისტური ნიმუშები. შემდეგ ინტერფეისი იგრძნობა ცოცხალი, გასაგები და სტაბილური - განსაკუთრებით iGaming სცენარებში მაღალი მაჩვენებლებით და რეალური დროით.