最近在开发一个FPS（每秒帧数）反射弧测试的在线打气球网站，过程中积累了一些经验，今天就来分享一下从技术选型到性能优化的完整思路。

1. 背景与挑战

FPS反射弧测试是通过测量用户从看到视觉刺激（气球出现）到做出反应（点击气球）的时间差，来评估反应速度的工具。主要技术挑战包括：

• 实时性要求高：需要精确到毫秒级的时间记录
• 高并发处理：多人同时测试时的服务器压力
• 渲染性能：频繁的气球生成和消失需要流畅的动画效果

2. 技术选型

通信方案对比

• WebSocket
• 优点：全双工通信，延迟极低（1-2ms）

• 缺点：服务器资源占用较高

• HTTP轮询

• 优点：实现简单
• 缺点：平均延迟高（100-300ms），带宽浪费严重

最终选择WebSocket，因为反射弧测试对延迟极度敏感。

3. 核心实现

Canvas基础渲染

// 气球渲染类
class Balloon {
  constructor(x, y, radius, color) {
    this.x = x;
    this.y = y;
    this.radius = radius;
    this.color = color;
    this.bornTime = Date.now(); // 记录生成时间戳
  }

  draw(ctx) {
    ctx.beginPath();
    ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2);
    ctx.fillStyle = this.color;
    ctx.fill();
  }
}

点击事件处理

// 记录点击时间差
canvas.addEventListener('click', (e) => {
  const clickTime = Date.now();
  const balloon = findClickedBalloon(e.offsetX, e.offsetY);

  if(balloon) {
    const reactionTime = clickTime - balloon.bornTime;
    ws.send(JSON.stringify({
      type: 'reaction',
      time: reactionTime 
    }));
  }
});

反射弧计算算法

1. 服务端记录气球生成时间T1
2. 接收客户端点击时间T2
3. 计算Δt = T2 - T1
4. 排除异常值（Δt <50ms或>1000ms）
5. 取最近10次有效测试的平均值

4. 性能优化

Canvas优化技巧

• 使用requestAnimationFrame替代setInterval
• 离屏Canvas预渲染静态元素
• 减少绘制区域：

  // 只重绘发生变化区域
  ctx.clearRect(
    balloon.x - balloon.radius,
    balloon.y - balloon.radius,
    balloon.radius * 2,
    balloon.radius * 2
  );

WebSocket优化

• 连接池大小 = CPU核心数 × 2
• 心跳包间隔设置为15秒
• 使用MsgPack替代JSON减少数据量

5. 避坑指南

浏览器兼容性

• iOS Safari需要polyfill performance.now()
• 旧版Edge不支持WebSocket压缩

高并发处理

• 使用Redis存储会话状态
• 采用分布式锁处理分数更新

6. 实测数据

优化前后对比（100并发用户）：

| 指标 | 优化前 | 优化后 | |--------------|--------|--------| | 平均延迟 | 86ms | 12ms | | CPU占用 | 78% | 32% | | 内存消耗 | 1.2GB | 560MB |

后续改进方向

• WebAssembly加速物理计算
• WebRTC实现P2P通信
• 机器学习异常检测

这次开发让我深刻体会到，即使是简单的交互应用，在精度和性能要求下也会变得很有挑战。希望对准备开发类似应用的同行有所帮助！