h5-game-perf

H5游戏性能优化

使用场景

优化H5游戏的加载速度和运行性能。

优化清单

1. 资源加载优化

• 图片压缩（WebP格式优先）
• 图片懒加载
• 资源预加载关键路径
• 使用CDN分发
• 开启Gzip/Brotli压缩
• 合并小图标为雪碧图

2. Canvas渲染优化

• 减少绘制调用（batch rendering）
• 使用脏矩形渲染（只重绘变化区域）
• 离屏Canvas缓存静态内容
• 控制绘制分辨率
• 避免在渲染循环中创建对象

// 脏矩形渲染
class DirtyRectRenderer {
    constructor(canvas) {
        this.canvas = canvas;
        this.ctx = canvas.getContext('2d');
        this.dirtyRects = [];
    }
    
    markDirty(x, y, w, h) {
        this.dirtyRects.push({ x, y, w, h });
    }
    
    render(drawFunc) {
        if (this.dirtyRects.length === 0) return;
        
        // 合并脏矩形
        const bounds = this.mergeDirtyRects();
        
        // 只重绘脏区域
        this.ctx.save();
        this.ctx.beginPath();
        this.ctx.rect(bounds.x, bounds.y, bounds.w, bounds.h);
        this.ctx.clip();
        drawFunc();
        this.ctx.restore();
        
        this.dirtyRects = [];
    }
}

3. 内存管理

• 使用对象池
• 及时释放不用的资源
• 避免内存泄漏（事件监听清理）
• 控制纹理内存

// 对象池
class ObjectPool {
    constructor(createFn, resetFn, initialSize = 10) {
        this.createFn = createFn;
        this.resetFn = resetFn;
        this.pool = [];
        for (let i = 0; i < initialSize; i++) {
            this.pool.push(createFn());
        }
    }
    
    get() {
        if (this.pool.length > 0) {
            return this.pool.pop();
        }
        return this.createFn();
    }
    
    release(obj) {
        this.resetFn(obj);
        this.pool.push(obj);
    }
}

4. 游戏逻辑优化

• 使用requestAnimationFrame
• 固定时间步长
• 空间分区碰撞检测
• 避免每帧GC

5. 移动端优化

• 控制Canvas分辨率
• 减少透明度使用
• 避免阴影和模糊效果
• 使用WebGL（如果需要）

性能监控

// FPS监控
class FPSMonitor {
    constructor() {
        this.fps = 0;
        this.frames = 0;
        this.lastTime = performance.now();
    }
    
    update() {
        this.frames++;
        const now = performance.now();
        if (now - this.lastTime >= 1000) {
            this.fps = this.frames;
            this.frames = 0;
            this.lastTime = now;
        }
    }
}