अंतःक्रिया दर और विलंबता UI

1) इंटरफ़ेस गति क्या है

1. इनपुट विलंबता - इशारे से इवेंट हैंडलर तक।

2. नेटवर्क विलंबता - बैकेंड/कैश अनुक्रिया से पहले।

3. मुख्य धारा (जेएस/सीएसएस/लेआउट/पेंट) पर रेंडर लेटेंसी - प्रोसेसिंग।

4. एनीमेशन विलंबता - फ्रेम की चिकनाई और स्थिरता।

उद्देश्य: उपयोगकर्ता तुरंत देखता है कि कार्रवाई शुरू हो गई है और प्रक्रिया कहां चल रही है; वास्तविक परिणाम अनुमानित रूप से आता है।

2) मानव धारणा के थ्रेसहोल्ड

≤ 50 ms - "बिजली तेज़" (प्रिंट गूंज, कुंजी प्रेस)।

100 ms - "तुरंत" (दृश्य प्रतिक्रिया पर क्लिक करें)।

≤ 200 एमएस - अधिकांश यूआई प्रतिक्रियाओं के लिए स्वीकार्य।

≤ 1000 ms - स्पष्ट प्रगति/कंकाल के साथ सहनीय।

3) रेल मॉडल और लक्ष्य बजट

आर (प्रतिक्रिया): इनपुट प्रतिक्रिया

→ दृश्य अनुक्रिया ≤ 100 ms पर क्लिक/टैप करें।

फोकस/होवर → ≤ 80-120 एमएस।

ए (एनीमेशन): चिकनाई

60 एफपीएस ⇒ फ्रेम 16। 7 एमएस; फ्रेम से बाहर निकालने के लिए भारी ऑपरेशन।

हम सिर्फ 'रूपांतरण '/' अपारदर्शिता' को चेतन करते हैं।

I (Idle): पृष्ठभूमि कार्य

स्लॉट ≤ 50 ms में विभाजित करें, निष्क्रिय विंडो का उपयोग करें।

L (लोड): लोड हो रहा है

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

4) केपीआई और स्पीड अलर्ट

INP (नेक्स्ट पेंट के लिए बातचीत): p75 <200 ms (अच्छा), 200-500 (बेहतर होने के लिए)।

लंबे कार्य (> 50 ms): एलटी <5% के साथ फ्रेम का अनुपात।

TTFB p75 <200 ms (कैश/एज), LCP p75 <2। 5 पी।

पहला उपयोगकर्ता प्रतिक्रिया (FUF): कार्रवाई ≤ 100 ms की पहली दृश्य पुष्टि तक समय।

पहला क्षेत्र दर्ज होने से पहले forms 1 s के लिए समय-से-प्रयोज्य।

5) UX त्वरित प्रतिक्रिया पैटर्न

1. आशावादी अपडेट: यूआई को तुरंत बदलें (बैलेंस/शर्त/जैसे), त्रुटि पर वापस रोल करें।

2. यदि संरचना ज्ञात हो तो स्पिनर के बजाय कंकाल।

3. प्रगति/चरण: यदि प्रक्रिया की लंबाई ज्ञात है तो नियतात्मक प

4. स्थानीय सुझाव: तत्काल टोस्ट/राज्य "भेजें"... ≤ 100 एमएस।

5. इरादा प्रीलोड: होवर/दृश्यता → 'प्रीफेच '/' प्रीलोड'।

6) विलंब शमन तकनीक

6. 1 इनपुट → रेंडर

मोबाइल पर 300 एमएस की देरी शूट करें: '<मेटा नाम = "व्यूपोर्ट" सामग्री = "चौड़ाई = डिवाइस-चौड़ाई, प्रारंभिक-स्केल = 1 ">'।

स्क्रॉलिंग/टैच के लिए श्रोता निष्क्रिय: 'AddeventListener (' टचस्टार्ट ', हैंडलर, {passive: true})'।

प्रोसेसिंग क्लिक करें - एक माइक्रो कार्य में या 'एनिमेशनफ्रेम' में जल्दी से पुष्टि आरेखित करने के लिए।

लेआउट-थ्रैश से बचें: लेआउट पढ़ें/लिखें - बुच।

6. 2 जेएस और मुख्य स्ट्रीम

अलग बंडल (कोड-विभाजन), मार्गों के साथ लोड करें।

भारी कंप्यूटिंग - वेब कार्यकर्ता।

'scheduler का उपयोग करें। पृष्ठभूमि कार्यों के लिए पोस्टटास्क '/' IdleCallback '।

क्रिटिकल सीएसएस - इनलाइन; JS с 'स्थगित करें '/' async'।

वर्चुअलाइजेशन की सूची, 'सामग्री-दृश्यता: स्वतः', 'समाहित करें: सामग्री'.

6. 3 रेंडरिंग और एनिमेशन

एनिमेट 'रूपांतरण/अपारदर्शिता'; सैकड़ों तत्वों पर 'ऊंचाई/बाएं/बॉक्स-छाया' को एनिमेट न करें।

एनीमेशन से पहले अस्थायी रूप से 'will-change' put; के बाद साफ करें।

विशाल पीएनजी के बजाय स्प्राइट्स/वेक्टर; भारी धब्बा से बचें।

6. 4 नेटवर्क और कैश

Edge- кеш (CDN), 'कैश-कंट्रोल', 'बासी-जबकि-पुनर्नवीनीकरण'।

महत्वपूर्ण डोमेन के लिए प्रीकनेक्ट क प्रारंभिक संकेत (103), HTTP/2/3।

इरादे से प्रीफेच (होवर/व्यूपोर्ट)।

स्ट्रीमिंग/एसएसआर + प्रगतिशील जलयोजन/द्वीप।

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%।

आशावादी कार्ड: ग्रे पूर्वावलोकन + पाठ - हम डेटा आने पर इसे बदल देते हैं।

त्रुटि: संक्षिप्त पुनरावृत्ति बैनर, पुनरावृत्ति के लिए पहचान कुंजी।

9) तेजी से प्रतिक्रिया के लिए नेटवर्क रणनीति

• यूआई की तुरंत पुष्टि (आशावादी), बैकेंड - पहचान;
• जब टाइमआउट (3-5 एस), "प्राप्त, संसाधित" + पृष्ठभूमि रीट्रे स्थिति प्रदर्शित करना;
• स्टेटस के लिए वेबसॉकेट/एसएसई, बैकऑफ 1-2-4-8 एस।

प्री-डेटा: एक शेड्यूल पर वार्म-अप कैश, लोकप्रिय मार्गों का प्रीफेच।

एज फ़ंक्शन: उपयोगकर्ता के करीब सत्यापन/एकत्रीकरण।

10) फास्ट यूआई स्निपेट कोड

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 देश/नेटवर्क/उपकरण द्वारा।

ट्रेस 'इनपुट → हैंडलर → नेटवर्क → पेंट' पर क्लिक करें।

रेड ज़ोन मार्कअप: लॉन्ग टास्क मार्कर, ब्लॉकिंग-टाइम, स्लो-रूट सूची।

INP/LCP/TTFB गिरावट अलर्ट।

परिदृश्य परीक्षण: संदर्भ समय का रिकॉर्ड "क्लिक करें → DOM बदलें।"

12) iGaming की बारीकियाँ

• UI: बटन स्थिति का त्वरित निर्धारण (दबाया → व्यस्त), डबल - टोस्ट "स्वीकृत"।
• बैकेंड: दर से पहचान कुंजी; स्थिति - वेबसॉकेट के माध्यम से; टाइमआउट → पारदर्शी "लंबित"।
• UI बजट: FUF ≤ 100 ms, अंतिम पुष्टि ≤ 1 s (यदि लंबे समय तक, हम टाइमर/कारण दिखाते हैं)।

• त्वरण ≤ 200 एमएस, समान रोटेशन, क्षीणन 300-500 एमएस; अनंत चक्र के बिना।
• जीत स्टब्स - कोई स्ट्रोब, पाठ/राशि पढ़ ने योग्य (एएए)।

• डेल्टा प्रत्येक 250-1000 ms में एक बार पैच करता है, कसाई;
• लेआउट कूद के बिना दृश्य डिफ़ (तीर/रंग/मोटाई);
• होवर/फोकस पर एंटी-बाउंस अपडेट।

• 40-60 एमएस, टेबल अंकों द्वारा खाता वृद्धि;
• चिपचिपा हेडर, स्ट्रिंग वर्चुअलाइजेशन।

13) एंटी-पैटर्न

क्लिक करने के लिए कोई तत्काल प्रतिक्रिया नहीं (नेटवर्क

सैकड़ों तत्वों पर भारी 'फ़िल्टर/बॉक्स-छाया' एनिमेशन।

एक विशाल जेएस बंडल> 1-2 एमबी प्रति महत्वपूर्ण पथ।

शून्य में स्पिनर 1-2 से अधिक है जिसमें कोई प्रगति/कंकाल नहीं है।

एक टिक में लेआउट पढ़ ना/लिखना (लेआउट थ्रैशिंग)।

मोबाइल पर केवल हॉवर फीचर्स।

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) क्यूए चेकलिस्ट ऑफ स्पीड

प्रतिक्रिया

• क्लिक करें/टैप करें → दृश्य प्रतिक्रिया ≤ 100 ms; → इको इनपुट ≤ 50 ms।
• मोबाइल पर कोई 300 एमएस देरी नहीं।
• INP p75 ≤ 200 ms; लॉन्ग टास्क शेयर ≤ 5%।

लोड हो रहा है

• TTFB ≤ 200ms; LCP ≤ 2। 5 एस; सीएलएस ≤ 0। 1.
• कंकाल/प्रगति "हैंगिंग" स्पिनरों के बजाय।

रेंडर

• एनिमेशन में केवल 'रूपांतरण/अपारदर्शिता'; सरणियों पर कोई "भारी" छाया नहीं है।
• लंबी सूचियों के लिए सामग्री-दृश्यता/वर्चुअलाइजेशन।

नेटवर्क

• एज कैश, प्रीकनेक्ट, इरादा उपसर्ग।
• महत्वपूर्ण कार्यों के लिए पहचान और पीछे हटता है।

A11y

• 'पसंद-कम-गति' समर्थित।
• होवर सामग्री फोकस/कीबोर्ड द्वारा उपलब्ध है।

16) डिजाइन प्रणाली प्रलेखन

"लेटेंसी बजट": थ्रेसहोल्ड की तालिका (टैप, होवर, मोडल, टोस्ट, फॉर्म)।

"इंस्टेंट फीडबैक": आशावादी एक्शन पैटर्न + पुलबैक।

"प्रीफेच बाय इंटेंट": गाइड और यूटिलिटीज।

"प्रदर्शन प्लेबुक": प्रोफाइलिंग चेकलिस्ट और आरयूएम अलर्ट।

"डू/डोंट": संख्याओं के साथ तेज/धीमी स्क्रिप्ट के उदाहरण।

संक्षिप्त सारांश

बातचीत की गति परिणाम की त्वरित प्रतिक्रिया + पूर्वानुमानित वितरण है। प्रथम-प्रतिक्रिया के लिए एक पवित्र बजट के रूप में 100 एमएस रखें, नेटवर्क (एज/कैश/उपसर्ग) का अनुकूलन करें, मुख्य धारा को बंद करें, केवल सस्ते गुणों को चेतन करें और आशावादी पैटर्न लागू करें। फिर इंटरफ़ेस जीवंत, समझने योग्य और लचीला लगता है - विशेष रूप से उच्च-दांव, वास्तविक समय के iGaming परिदृश्यों में।