שיעור אינטראקציה ואיחור UI

1) מהי מהירות הממשק

1. איחור קלט - ממחווה למפעיל אירוע.

2. איחור רשת - לפני תגובת גב/מטמון.

3. Denter latency - עיבוד על הזרם הראשי (JS/CSS/priout/paint).

4. איחור בהנפשה - החלקה ויציבות של מסגרות.

המטרה: המשתמש רואה מיד שהפעולה החלה ולאן התהליך זז; התוצאה האמיתית מגיעה כצפוי.

2) סף התפיסה האנושית

50 ms - ”מהר ברק” (הדפסה הד, עיתונות מפתח).
100 ms - ”באופן מיידי” (לחץ תגובה חזותית).
200 גב-מקובל על רוב התגובות UI.
1000 גברת - נסבל עם התקדמות ברורה/שלד.

3) מודל רכבת ותקציבי יעד

R (תגובה): תגובת קלט

לחץ/סטפס = תגובה חזותית מצורפת 100 ms.
מיקוד/ריחוף כפול 80-120 מ "מ.

A (אנימציה): שייק

60 FPS מסגרת 16. 7 ms; פעולות כבדות כדי להוציא את המסגרת.
אנחנו מחיים רק ”לשנות צורה ”/” אופיות”.

אני (סרק): משימות רקע

לחלק לחריצים קלויים 50 ms, להשתמש בחלונות בטלים.

L (טעינה): טעינה

TFB על 200ms, LCP על 2. 5, INP/200ms, CLS/0. 1.

4) KPI והתראות מהירות

INP (אינטראקציה לצבע הבא): p75 <200 ms (טוב), 200-500 (להשתפר).
משימות ארוכות (> 50 ms): פרופורציה של מסגרות עם LT <5%.
TFB p75 <200 ms (מטמון/Edge), LCP p75 <2. 5 p.
First User Feedback (FUF): זמן עד האישור הוויזואלי הראשון של פעולה בלוגר 100 ms.
Time to-Usable עבור טפסים בלום 1 s לפני שהשדה הראשון נכנס.

5) דפוסי תגובה מיידית UX

1. עדכונים אופטימיים: שינוי UI באופן מיידי (שיווי משקל/הימור/כמו), רול חזרה על שגיאה.
2. שלדים במקום ספינר אם המבנה ידוע.
3. התקדמות/צעדים: סרגל פרוגרסיבי דטרמיניסטי אם אורך התהליך ידוע.
4. טיפים מקומיים: הרמת כוסית מיידית/מדינה ”שלח”...
5. כוונה טעינה: ריחוף/ראות = ”prefetch ”/” preload”.

6) טכניקות להקלה בעיכוב

6. 1 קלט @ render

השהייה של 300ms בנייד: "<meta name =" viewport' תוכן = "רוחב התקן-רוחב, סולם ראשוני = 1"> ".
מאזינים פסיביים לגלילה/טאץ ': "Adderportance Listener (" Touchstart', מטפל, [פסיבי: נכון] ".
לחץ על עיבוד - במשימה זעירה או ” אנימציה” כדי לצייר אישור במהירות.
הימנע פריסה-thrash: לקרוא/לכתוב פריסה - בוץ.

6. 2 JS וזרם ראשי

חבילות נפרדות (פיצול קוד), טעינה לאורך המסלולים.
מחשוב כבד מספר עובד רשת.
תשתמש בשדולר. Postplasion '/' IdleCallback 'למשימות רקע.
Critical CSS - inline; JS 'emper '/' async'.
רשימת וירטואליזציה, ”תוכן-ראות: אוטומטי”, ”מכיל: תוכן”.

6. 3 עיבודים ואנימציות

אנימציה ”שינוי צורה/אפיון”; לא להחיות 'גובה/שמאל/תיבה-צל' על מאות אלמנטים.
"וויל-שינוי 'לשים זמנית לפני אנימציה; לנקות אחרי.
ספריטים/וקטור במקום PNG ענק; הימנע מטשטוש כבד.

6. 4 רשת ומטמון

אדג '(Edge-cultieve (CDN),' מטמון-שליטה ',' מעופש בזמן-חידוש '.
התחברות מראש לתחומים קריטיים; רמזים מוקדמים (103), HTTP/2/3.
Prefetch by כוונה (ריחוף/צפייה).
הזרמה/SSR + הידרציה פרוגרסיבית/איים.

7) דבלונס/מצערת ותורים

דיון - לחיפוש בזמן קלט (150-300 ms).
חנק - לגלילה/שינוי גודל (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 # Content (ללא תוספות, גבהים קבועים).
נצנוץ 1200-1600 מ "ר, משרעת 20%.
כרטיס אופטימי: תצוגה מקדימה אפורה + טקסט - אנחנו מחליפים אותו כאשר המידע מגיע.
שגיאה: כרזה קצרה, מפתחות אידמפוטנטיות לחזרה.

9) אסטרטגיות רשת לתגובה מהירה

• אישור של UI באופן מיידי (אופטימי), backend-idempotent;
• כאשר פסק זמן (3-5 אס), הצגת המעמד ”התקבל, מעובד” + מגשי רקע;
• שקע אינטרנט/SSE לסטטוסים, לסגת 1-2-4-8 s.

טרום נתונים: מטמון חימום על לוח זמנים, טרום טיפת מסלולים פופולריים.

פונקציות קצה: אימות/צבירה קרוב יותר למשתמש.

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 על ידי מדינה/רשת/התקן.
לחץ עקבות 'קלט action ac.l. רשת = צבע'.
סימון אזור אדום: סמני משימה ארוכה, חסימה בזמן, רשימת מסלול איטי.
התראות הידרדרות INP/LCP/TFB.
בדיקות תרחיש: תיעוד זמן ההתייחסות ”לחץ על שינוי DOM”.

12) הפרטים של iGaming

• UI: קיבעון מיידי של מצב הכפתור (לחץ = עסוק), פעמיים טוסט ”מקובל”.
• Backend: מפתח אידמפוטנטי לפי קצב; סטטוס - באמצעות שקע אינטרנט; timeout שקוף ”תלוי ועומד”.
• תקציב UI: FUF (ראשי תיבות של 100 ms), אישור סופי ל-1 S (אם יותר, נראה את מד הזמן/סיבה).

• תאוצה שנמשכה 200 ms, סיבוב אחיד, נטישה 300-500 ms; ללא מחזורים אינסופיים.
• זכייה בבגדים - אין סטוב, טקסט/כמות קריא (AAA).

• טלאי דלתא פעם אחת כל 250-1000 ms, חבטות;
• דיפ חזותי (חץ/צבע/עובי) ללא קפיצות פריסה;
• עדכונים נגד הקפצה על ריחוף/מיקוד.

• הגדלת חשבון על ידי חבורות 40-60 ms, ספרות שולחן;
• כותרת דביקה, וירטואליזציה מחרוזת.

13) אנטי דפוסים

אין תגובה מיידית לחיצה (מחכה לרשת).
אנימציית ”מסנן/צל קופסה” כבדה על מאות אלמנטים.
צרור JS אחד גדול> 1-2 MB לכל מסלול קריטי.
ספינר בריק הוא מעל 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) בדיקת QA של מהירות

תגובה

[ ] לחצו/טפיחו * תגובה חזותית שצורפה ל-100 ms; = אקו קלט 50ms.

[ ] אין עיכוב של 300 קמ "ש בנייד.

[ ] INP p75 INP 200ms; משימות ארוכות חולקות 5%.

טעינה

[ ] TTFB) 200ms; בדיקת LCP 2. 5 אס; CLS תחת 0. 1.

[ ] שלדים/התקדמות במקום ”תלייה” ספינרים.

render

[ ] רק ”שינוי צורה/אפיון” באנימציות; אין צללים ”כבדים” על המערכים.

[ ] ראות תוכן/וירטואליזציה לרשימות ארוכות.

רשת

[ מטמון ] אדג ', קדימות, קידומת כוונה.

[ ] אידמפוטנטיות ונסיגה לפעולות קריטיות.

A11y

[ ] 'מעדיף-מופחת תנועה' נתמך.

[ תוכן ] Hover זמין על ידי מיקוד/מקלדת.

16) תיעוד מערכת עיצוב

"Latency Budgets': שולחן הסף (ברז, ריחוף, מודאלי, טוסט, טופס).
”משוב מיידי”: דפוסי פעולה אופטימיים + נסיגה.
”Prefetch by Intelligence”: מדריך ושירותים.
”Performance Playbook”: פרופיל רשימות צ 'קים והתראות רום.
”דו/אל”: דוגמאות לתסריטים מהירים/איטיים עם מספרים.

תקציר

מהירות האינטראקציה היא התגובה המיידית + המשלוח הצפוי של התוצאה. שמור 100 מ "מ כתקציב מקודש למשוב ראשון, ייעל את הרשת (Edge/cache/prefix), יפרק את הזרם הראשי, יחיה רק תכונות זולות וייישם תבניות אופטימיות. אז הממשק מרגיש תוסס, מובן וגמיש - במיוחד בתרחישי iGaming בסיכון גבוה, בזמן אמת.