背景与痛点

在游戏开发和性能优化中，FPS（每秒帧数）是最直观的性能指标之一。传统FPS测试方法通常依赖本地工具或简单的浏览器API，存在几个明显缺陷：

• 精度不足：requestAnimationFrame等基础API受浏览器任务调度影响，误差可达±5帧
• 高延迟：传统轮询方式数据延迟常在100ms以上，无法满足实时分析需求
• 扩展性差：单机测试难以模拟多用户并发场景

技术选型

WebRTC vs WebSocket

1. WebRTC
2. 优势：P2P直连，延迟<50ms；支持UDP传输

3. 挑战：NAT穿透需要STUN/TURN服务器

4. WebSocket

5. 优势：兼容性好，开发简单
6. 局限：基于TCP，高延迟（100-300ms）

最终选择混合方案： - 关键帧数据走WebRTC - 控制信号用WebSocket兜底

核心实现

1. Canvas帧率采集

class FPSCounter {
  private lastTime = performance.now()
  private frameCount = 0

  // 通过Canvas动画触发精确计时
  measure(canvas: HTMLCanvasElement) {
    const ctx = canvas.getContext('2d')!  
    const animate = () => {
      const now = performance.now()
      this.frameCount++

      if (now - this.lastTime >= 1000) {
        const fps = this.frameCount * 1000 / (now - this.lastTime)
        this.emit('fps', fps)  // 触发数据上报
        this.frameCount = 0
        this.lastTime = now
      }

      ctx.clearRect(0, 0, canvas.width, canvas.height)
      requestAnimationFrame(animate)
    }
    animate()
  }
}

2. WebRTC数据通道

关键配置参数：

const pc = new RTCPeerConnection({
  iceServers: [{ urls: 'stun:stun.l.google.com:19302' }],
  bundlePolicy: 'max-bundle',
  rtcpMuxPolicy: 'require'
})

// 创建数据通道
const dc = pc.createDataChannel('fps', {
  ordered: false,  // 允许乱序
  maxRetransmits: 0  // 不重传
})

dc.onmessage = (e) => {
  const data = JSON.parse(e.data)
  // 处理实时数据
}

性能优化

内存管理三原则

1. 对象池技术：复用数据对象减少GC
2. TypedArray应用：二进制传输比JSON节省30%内存
3. Worker隔离：将计算密集型任务移到Web Worker

// 使用共享内存优化
const sharedBuffer = new SharedArrayBuffer(1024)
const fpsArray = new Float32Array(sharedBuffer)

// Worker中更新数据
Atomics.store(fpsArray, 0, currentFPS)

避坑指南

实战踩坑记录

1. ICE协商失败
2. 现象：20%用户无法建立P2P连接

3. 解决：增加TURN服务器备用方案

4. Safari帧率跳变

5. 现象：iOS设备FPS周期性下降
6. 根因：浏览器节能模式干扰
7. 方案：添加<meta name="apple-mobile-web-app-capable">

进阶方向

WebGPU带来新可能：

• 计算着色器实现实时FFT分析
• 硬件加速的帧时间统计
• 多视角同步渲染测试

// WebGPU示例代码片段
const commandEncoder = device.createCommandEncoder()
const passEncoder = commandEncoder.beginComputePass()
passEncoder.setPipeline(computePipeline)
passEncoder.dispatchWorkgroups(Math.ceil(bufferSize / 64))
passEncoder.end()

结语

经过三个迭代版本的优化，我们的FPS测试平台实现了： - 平均延迟从120ms降低到35ms - 数据精度误差<0.5帧 - 支持500+并发连接

这套方案已稳定运行在多个游戏公司的CI流程中，后续计划接入WebCodecs API进一步降低编码开销。