交互速度和延遲的UI

1）接口速度是什麼

1.Input latency-從手勢到事件處理程序。

2.Network latency-在後端/kesh響應之前。

3.Render latency-主流（JS/CSS/layout/paint）上的處理。

4.動畫後退-幀的平滑性和穩定性。

目的：用戶立即看到動作已經開始，過程在哪裏移動；實際結果可以預見。

2）人類感知閾值

≤ 50毫秒是「閃電」（打印回聲，按鍵）。
≤ 100毫秒-「瞬間」（點擊→視覺響應）。
≤ 200毫秒-對於大多數UI反應是允許的。
≤ 1000毫秒-可以容忍明顯進步/骨架。

3）鐵路模型和目標預算

R（響應）： 輸入響應

點擊→視覺響應≤ 100毫秒。
焦點/hover → ≤ 80-120毫秒。

A（動畫）： 流暢

60 FPS ⇒框架16。7毫秒；從框架中進行重型操作。
我們只動畫「變形」/「opacity」。

I （Idle）： 背景任務

分為50毫秒≤插槽，使用idle窗口。

L （Load）： 下載

TTFB ≤ 200毫秒，LCP ≤ 2。5 s，INP ≤ 200毫秒，CLS ≤ 0。1.

4）KPI和速度差

INP （Interaction to Next Paint）： p75 <200 ms（良好）,200-500（需要改進）。
Long Tasks（>50 ms）： LT <5%的幀比例。
TTFB p 75<200 ms （kesh/Edge）, LCP p 75<2.5頁。
First User Feedback （FUF）：第一次視覺確認動作的時間≤ 100毫秒。
表單的時間可用：在輸入第一個字段之前的≤ 1。

5） UX即時響應模式

1.樂觀更新：我們立即更改UI（平衡/投註/喜歡）,在錯誤時回滾。
2.如果知道結構，則使用骨架代替旋轉器。
3.進度/階段：確定性進度，如果過程長度已知。
4.本地提示：即時烤面包/state「發送」……≤ 100毫秒。
5.預裝意圖：hover/可見性 → 「prefetch」/「preload」。

6）減少延誤的技術技巧

6.1 Input → Render

在移動上拍攝300毫秒的延遲：'<meta name="viewport" content="width=device-width，initial-scale=1">"。

Skroll/tach： 'addEventListener（'touchstart「,handler, {passive： true}」）.

點擊處理-進入微調或「requestAnimationFrame」以快速渲染確認。
避免layout-thrash：讀取/寫入layout-戰鬥。

6.2 JS和主流

拆分樂隊（代碼分割）,按路線加載。
重型計算→ Web Worker。
使用'scheduler。後臺任務的postTask"/"requestIdleCallback"。

關鍵CSS-inline；JS с `defer`/`async`.

列表虛擬化，「內容可見：自動」，「內容：內容」。

6.3渲染和動畫

動畫「轉換/操作性」；不要在數百個元素上動畫「height/left/box-shadow」。
「will-change」暫時放在動畫之前；然後清理。
精靈/矢量代替巨大的PNG；避免重創。

6.4網絡和kesh

Edge-кеш (CDN), `cache-control`, `stale-while-revalidate`.

Preconnect到關鍵域；Early Hints (103), HTTP/2/3.

意向預告（hover/viewport）。
Streaming/SSR+漸進水合/島嶼。

7） Debowns/trottling和隊列

Debowns-用於輸入時搜索（150-300毫秒）。
Trottling-用於滾動/重組（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）下載和反饋模式

Skeleton → Content（無剪切、固定高度）。
Shimmer 1200-1600 ms，振幅≤ 20％。
樂觀卡：灰色預覽+文本-我們在數據到來時替換。
錯誤：短回程橫幅，重播的idempotency密鑰。

9）網絡策略快速響應

• 立即確認UI（樂觀），後端-偶像；
• 在taymout（3-5 c）中，狀態顯示「已獲得，正在處理」+背景中繼；
• WebSocket/SSE用於狀態，backoff 1-2-4-8。

Pre-dobs：按計劃交換緩存,預告流行路由。

邊緣功能：驗證/聚合更接近用戶。

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降解的Alerts。
腳本測試：記錄參考時間「點擊→更改DOM」。

12） iGaming的細節

• UI：即時鎖定按鈕狀態（pressed → busy）,雙打-敬酒「接受」。
• 後端：按利率計算的偶數鍵；狀態-通過WebSocket；taymaut →透明的「pending」。
• UI預算：FUF ≤ 100毫秒，最終確認≤ 1 c（如果更長-顯示計時器/原因）。

Spin/Reveal:

加速≤ 200毫秒，均勻旋轉，衰減300-500毫秒；沒有無限循環。
獲勝存根-無頻率，可讀文本/總和（AAA）。

• Delta補丁每250-1000毫秒一次，戰鬥；
• 視覺diff（箭頭/顏色/厚度），沒有布局跳躍；
• 對hover/focus的更新進行反破壞。

• batchami 40-60毫秒帳戶的生成，表格；
• 粘貼帽，行虛擬化。

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支票速度清單

反應

• Click/tap →視覺響應≤ 100毫秒；→輸入回聲≤ 50毫秒。
• 移動上沒有300毫秒的延遲。
• INP p 75 ≤ 00毫秒；Long Tasks的份額≤ 5％。

下載

• TTFB ≤ 200毫秒；LCP ≤ 2.5 c；CLS ≤ 0.1.
• 骨架/進步代替「懸掛」旋轉器。

渲染

• 僅動畫中的「轉換/opacity」；陣列上沒有「重」陰影。
• content-visibility/虛擬化長列表。

網絡

• Edge-kesh, preconnect, prefettch是出於意圖。
• 針對關鍵行動的偶然性和回避性。

A11y

• 「prefers-reduced-motion」得到了支持。
• Hover內容可通過焦點/鍵盤訪問。

16）設計系統文檔

「Latency Budgets」：閾值表（tap，hover，modal，toast，形式）。
「即時反饋」：樂觀動作+回滾模式。
「Prefetch by Intent」：海德和實用程序。
「Performance Playbook」：性能表和RUM Alerta。
「Do/Do n't」：帶數字的快速/慢速腳本示例。

簡短摘要

交互速度是即時響應+可預測的結果傳遞。保持100毫秒為第一反饋神聖的預算，優化網絡（Edge/kesh/prefetch），卸載主流，只動畫，並應用樂觀的模式。然後，界面感覺生動、清晰和穩定--尤其是在高風險和真實時間的iGaming場景中。