背景分析：网页端射击游戏的性能挑战

开发网页版FPS练枪模拟器时，我们面临三个核心挑战：

• 渲染性能：传统Canvas 2D在绘制大量动态元素（如弹道、粒子效果）时帧率骤降
• 输入延迟：浏览器事件循环机制导致鼠标移动响应延迟可达50-100ms
• 物理模拟：实时碰撞检测在JavaScript单线程环境中容易造成卡顿

技术选型：Canvas 2D vs WebGL

我们使用同一射击场景进行基准测试（Chrome 115）：

| 指标 | Canvas 2D | WebGL | |---------------|----------|---------| | 平均FPS(100目标) | 32 | 58 | | 首帧渲染时间 | 120ms | 210ms | | GPU内存占用 | 15MB | 45MB |

虽然WebGL初始加载稍慢，但在复杂场景下优势明显。通过纹理压缩可将内存占用降低30%。

核心实现方案

1. 帧率控制与渲染优化

// 使用requestAnimationFrame + 动态帧率控制
let lastTime = 0;
const targetFPS = 60;

export function gameLoop(timestamp: number) {
  const deltaTime = timestamp - lastTime;

  if (deltaTime >= 1000 / targetFPS) {
    updateGameState(deltaTime);
    renderScene();
    lastTime = timestamp;
  }

  requestAnimationFrame(gameLoop);
}

2. 碰撞检测Worker化

// 主线程
const physicsWorker = new Worker('physics.worker.ts');

// 接收计算结果
physicsWorker.onmessage = (e) => {
  applyCollisionResults(e.data);
};

// physics.worker.ts中实现分离轴定理(SAT)检测
function checkCollision(hitboxes: Hitbox[]) {
  // ...精简化碰撞检测逻辑
  postMessage(collisionResults);
}

3. 输入优化方案

• 事件防抖：合并高频mousemove事件
• 预测算法：客户端先行渲染，服务器校验修正

性能优化关键点

1. 内存管理：
2. 对象池复用弹道和粒子对象

3. 按需加载纹理资源

4. 网络优化：

5. 采用UDP-like传输协议(WebRTC DataChannel)
6. 60ms延迟补偿阈值

避坑指南

• 纹理尺寸：保持为2的幂次方(512x512优于500x500)
• GC压力：避免在游戏循环中创建新对象
• 事件监听：使用passive事件监听器提升滚动性能

进阶：多人在线扩展方案

1. 状态同步架构设计
2. 基于WebSocket的帧同步实现
3. 延迟补偿算法(插值+回溯)

思考题

1. 如何实现不同网络环境下的动态延迟补偿？
2. WebAssembly能否进一步提升物理计算性能？
3. 移动端触控操作如何优化瞄准体验？