交互速度和延迟的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场景中。