نرخ تعامل و UI تاخیر

1) سرعت رابط چیست ؟

1. تأخیر ورودی - از ژست تا گرداننده رویداد.

2. تأخیر شبکه - قبل از پاسخ backend/cache.

3. تأخیر رندر - پردازش در جریان اصلی (JS/CSS/طرح/رنگ).

4. تاخیر انیمیشن - صاف بودن و ثبات فریم ها.

هدف: کاربر بلافاصله می بیند که عمل آغاز شده است و روند در حال حرکت است. نتیجه واقعی قابل پیش بینی است.

2) آستانه ادراک انسان

≤ 50 ms - «رعد و برق سریع» (چاپ اکو، مطبوعات کلیدی).
≤ 100 میلی ثانیه - «فورا» (کلیک کنید → پاسخ بصری).
≤ 200 میلی ثانیه - برای اکثر واکنش های UI قابل قبول است.
≤ 1000 میلی ثانیه - قابل تحمل با پیشرفت روشن/اسکلت.

3) مدل راه آهن و بودجه هدف

R (پاسخ): پاسخ ورودی

Click/tap → پاسخ تصویری ≤ 100 میلی ثانیه

تمرکز/شناور → ≤ 80-120 میلی ثانیه.

A (انیمیشن): صاف بودن

فریم ⇒ 60 FPS 16. 7 میلی ثانیه ؛ عملیات سنگین به خارج از قاب.
ما فقط «transform »/« opacity» را تحریک میکنیم.

I (بیکار): وظایف پس زمینه

تقسیم به اسلات ≤ 50 میلی ثانیه، استفاده از پنجره های بیکار.

L (بار): بارگیری

TTFB ≤ 200 میلی ثانیه، LCP ≤ 2. 5S، INP ≤ 200ms، CLS ≤ 0. 1.

4) KPI و هشدار سرعت

INP (تعامل با رنگ بعدی): p75 <200 ms (خوب)، 200-500 (بهبود یافته).
وظایف طولانی (> 50 ms): نسبت فریم ها با LT <5٪.
TTFB p75 <200 ms (حافظه پنهان/لبه)، LCP p75 <2. 5 پ.
اولین بازخورد کاربر (FUF): زمان تا اولین تایید بصری عمل 100 میلی ثانیه ≤.
زمان قابل استفاده برای فرم ها ≤ 1 ثانیه قبل از وارد شدن اولین فیلد.

5) الگوهای پاسخ فوری UX

1. به روز رسانی خوش بینانه: تغییر UI بلافاصله (تعادل/شرط/مانند)، بازگشت به خطا.
2. اسکلت به جای یک اسپینر اگر ساختار شناخته شده است.
3. پیشرفت/مراحل: نوار مترقی قطعی اگر طول فرآیند شناخته شده است.
4. راهنمایی های محلی: نان تست فوری/دولت «ارسال»... ≤ 100 میلی ثانیه.
5. قصد پیش بارگذاری: شناور/دید → 'prefetch '/' preload'.

6) تکنیک های کاهش تاخیر

6. 1 ورودی → رندر کردن

Shoot 300ms delay on mobile: '<meta name = "viewport" content = "width = device-width, initial-scale = 1"> ".
شنوندگان منفعل برای پیمایش/tach: 'addEventListener (' touchstart ', handler, {passive: true})'.
پردازش کلیک کنید - در یک کار میکرو و یا 'requestAnimationFrame' به سرعت رسم تایید.
اجتناب از طرح بندی: طرح خواندن/نوشتن - butch.

6. 2 JS و جریان اصلی

بسته های جداگانه (تقسیم کد)، در امتداد مسیرها بارگیری کنید.
محاسبات سنگین → Web Worker.
از ویرایشگر استفاده کنید. post 'Task '/' requestIdleCallback' برای وظایف پس زمینه.
CSS بحرانی - درون خطی ؛ JS с «تعویق »/« async».
مجازی سازی لیست، 'content-visibility: auto'، 'content: content'.

6. 3 رندر و انیمیشن

پویانمایی «تبدیل/کدورت» ؛ «ارتفاع/چپ/جعبه سایه» را بر روی صدها عنصر تحریک نکنید.
'will-change' به طور موقت قبل از انیمیشن قرار داده شده است ؛ تمیز کردن بعد از.

Sprites/بردار به جای PNG های بزرگ ؛ اجتناب از تاری شدید

6. 4 شبکه و کش

Edge- кеш (CDN), 'cache-control', 'stale-while-revalidate'.
پیش اتصال به حوزه های بحرانی ؛ نکات اولیه (103)، HTTP/2/3.
پیش فرض به قصد (شناور/نمایش).
جریان/SSR + هیدراتاسیون پیشرفته/جزایر.

7) debowns/throttling و صف

بحث - برای جستجو در طول ورودی (150-300 میلی ثانیه).
Throttling - برای پیمایش/تغییر اندازه (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٪.
کارت خوش بینانه: پیش نمایش خاکستری + متن - ما آن را جایگزین زمانی که داده ها می رسد.
خطا: بنر کوتاه تکرار، کلیدهای idemotency برای تکرارها.

9) استراتژی های شبکه برای پاسخ سریع

• تأیید UI بلافاصله (خوش بینانه)، backend - idempotent ؛
• هنگامی که زمان (3-5 ثانیه), نمایش وضعیت «دریافت, پردازش» + پس زمینه retrays;
• WebSocket/SSE برای وضعیت ها، بازپرداخت 1-2-4-8 s.

پیش داده: کش گرم کردن در یک برنامه، prefetch از مسیرهای محبوب.

توابع لبه: اعتبار سنجی/جمع آوری نزدیک به کاربر.

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 بر اساس کشور/شبکه/دستگاه.
روی «input → handler → network → paint» کلیک کنید.
نشانه گذاری منطقه قرمز: نشانگرهای وظیفه طولانی، زمان مسدود کردن، لیست مسیر آهسته.
هشدار تخریب INP/LCP/TTFB.
تست سناریو: ثبت زمان مرجع «کلیک → تغییر DOM».

12) ویژگی های iGaming

• UI: تثبیت فوری حالت دکمه (فشرده → مشغول)، دو - نان تست «پذیرفته شده».
• Backend: کلید idempotent با نرخ ؛ وضعیت - از طریق WebSocket ؛ timeout → شفاف «در انتظار».
• بودجه UI: FUF ≤ 100 میلی ثانیه، تأیید نهایی 1 ثانیه ≤ (در صورت طولانی تر، تایمر/دلیل را نشان می دهیم).

• شتاب ≤ 200 میلی ثانیه، چرخش یکنواخت، تضعیف 300-500 میلی ثانیه ؛ بدون چرخه های بی پایان
• برنده شدن - بدون بارق، متن/مقدار قابل خواندن (AAA).

• تکه های دلتا یک بار در هر 250-1000 میلی ثانیه، butching ؛
• تفاوت بصری (فلش/رنگ/ضخامت) بدون طرح جهش ؛
• به روز رسانی ضد گزاف گویی در شناور/تمرکز.

• افزایش حساب توسط دسته 40-60 میلی ثانیه، رقم جدول ؛
• هدر چسبنده، مجازی سازی رشته.

13) ضد الگوهای

بدون پاسخ فوری برای کلیک (انتظار برای شبکه).
انیمیشن های سنگین «فیلتر/جعبه سایه» در صدها عنصر.
یک بسته بزرگ JS> 1-2 مگابایت در هر مسیر بحرانی.
اسپینر در Void بیش از 1-2 بدون پیشرفت/اسکلت است.
خواندن/نوشتن طرح در یک تیک (thrashing طرح).
ویژگی های شناور تنها در تلفن همراه.

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 میلی ثانیه → ورودی اکو ≤ 50ms.
• تاخیر 300 میلی ثانیه در تلفن همراه.
• INP p75 ≤ 200ms ؛ وظایف طولانی ≤ 5٪ سهم دارند.

در حال بارگذاری

• TTFB ≤ 200ms ؛ ≤ LCP 2 5 ثانیه ؛ CLS ≤ 0 1.
• اسکلت/پیشرفت به جای «حلق آویز» اسپینر.

رندر کردن

• فقط «تبدیل/کدورت» در انیمیشن ها ؛ هیچ سایه «سنگین» در آرایه وجود دارد.
• محتوا دید/مجازی سازی برای لیست های طولانی.

شبکه

• کش لبه، preconnect، پیشوند قصد.
• ناتوانی و عقب نشینی برای اقدامات انتقادی.

A11y

• 'prefers-reduced-motion' پشتیبانی می شود.
• محتوای شناور توسط تمرکز/صفحه کلید در دسترس است.

16) مستندات سیستم طراحی

«بودجه تاخیر»: جدول آستانه (شیر، شناور، معین، نان تست، فرم).
«بازخورد فوری»: الگوهای عمل خوش بینانه + پولبک.
«Prefetch by Intent»: راهنمای و آب و برق.
«Playbook عملکرد»: لیست های پروفایل و هشدارهای RUM.
«انجام دادن/انجام ندادن»: نمونه هایی از اسکریپت های سریع/آهسته با اعداد.

خلاصه ای کوتاه

سرعت تعامل پاسخ فوری + تحویل قابل پیش بینی از نتیجه است. 100ms را به عنوان یک بودجه مقدس برای اولین بازخورد نگه دارید، شبکه را بهینه کنید (Edge/cache/prefix)، جریان اصلی را بارگیری کنید، فقط خواص ارزان را تحریک کنید و الگوهای خوش بینانه را اعمال کنید. سپس رابط کاربری پر جنب و جوش، قابل فهم و انعطاف پذیر است - به ویژه در سناریوهای iGaming در زمان واقعی.