反应力测试游戏必须用performance.now()而非date.now()，因其精度达微秒级、单调递增且不受系统时钟影响；需配对keydown/keyup、禁用被动事件监听、显式清除定时器，否则会导致计时错误或负值。
反应力测试游戏的核心不是炫酷动画，而是精确的时间捕捉和状态隔离——performance.now() 必须用，keydown 和 keyup 必须配对使用，否则“按住不放就计时”或“松开才触发”这类逻辑错误会直接废掉整个测试结果。
为什么不能用 Date.now() 测反应时间
它精度只有毫秒级，且受系统时钟调整影响（比如 NTP 同步瞬间跳变）。真实反应测试要求亚毫秒级稳定性，尤其在多次连续测试中，误差会累积放大。Chrome/Firefox/Edge 现代浏览器都支持 performance.now()，返回的是高精度浮点数（单位毫秒，精度可达微秒级），且从页面加载起单调递增，不受系统时间干扰。
常见错误是写成：startTime = Date.now(); ... reactionTime = Date.now() - startTime; —— 这在 90% 的简单 demo 里“看起来能跑”，但实测偏差常达 10–30ms，尤其在低端设备或后台标签页恢复时更明显。
- ✅ 正确写法：
startTime = performance.now();，后续所有时间差都基于它 - ⚠️ 注意：不要混用
performance.now()和Date.now()计算差值 - ⚠️ Safari 旧版（performance.now() 在非用户交互后首次调用有延迟，需在
click或keydown回调中首次触发一次“热身”
keydown vs keyup：触发时机决定测试类型
反应力测试分两类场景，选错事件就测偏了：
- 「视觉刺激 → 按键响应」型（如红屏出现后按空格）：必须监听
keydown，因为用户肌肉动作始于按键按下瞬间；keyup会多出 50–150ms 延迟（取决于键盘回弹与用户释放习惯） - 「按住等待 → 松开响应」型（如背景变红时松开鼠标）：必须监听
keyup或mouseup，否则用户还没松手就已计时，结果虚低
典型错误：用 click 代替 keydown 测按键反应——click 是合成事件，至少比 keydown 晚 30–100ms，且在移动端可能被延迟或吞掉。
实操建议：document.addEventListener('keydown', handler, { once: true }); 配合 { once: true } 防止重复触发，尤其在快速重试时。
状态管理混乱导致“假反应时间”
多数失败案例不是时间不准，而是状态没切干净：上一轮的 waiting 状态残留，新轮次还没开始就收到旧按键；或者 isTesting = true 没重置，导致第二次点击直接跳过准备阶段。
推荐用明确的三态机控制流程：
-
idle：初始态，显示“点击开始”，监听click -
waiting：随机延时（1000–3000ms）后切换为ready，此时 UI 变色/播放提示音，但**不监听任何输入** -
ready：立即监听keydown，记录performance.now()，触发后立刻进入idle并清空所有事件监听器
关键点：waiting → ready 切换必须用 setTimeout 或 Promise.resolve().then()，不能用 requestAnimationFrame——后者帧率波动会导致准备时间不稳，直接影响反应时间基线。
移动端触摸事件的特殊处理
手机端没有 keydown，也不能依赖 click（300ms 延迟）。必须用 touchstart，且要禁用默认行为防止滚动干扰：
- 给
body加touch-action: manipulation;（兼容 iOS/Android） - 监听
touchstart时调用event.preventDefault()，但仅限测试区域元素，避免全局锁死 - 避免同时绑定
click和touchstart，否则安卓 Chrome 可能触发两次
示例代码片段：
const testArea = document.getElementById('test-area');
testArea.addEventListener('touchstart', (e) => {
e.preventDefault();
if (state === 'ready') {
const now = performance.now();
recordReactionTime(now - readyTime);
resetState();
}
}, { passive: false });
注意：{ passive: false } 是必需的，否则 preventDefault() 无效。
最易被忽略的点：所有定时器（setTimeout、setInterval）和事件监听器，必须在每次测试结束时显式清除。残留的 setTimeout 可能在下一轮 ready 状态前意外触发，把“等待期”误判为“响应期”，得出负数或极小值（如 2ms）——这不是用户快，是代码失控。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
