BodyBalanceEvaluation/MEMORY_OPTIMIZATION_GUIDE.md

内存优化指南

概述

本指南介绍了身体平衡评估系统中WebSocket视频流的内存优化功能，帮助您解决浏览器内存占用缓慢增长的问题。

问题描述

在长时间运行WebSocket视频流时，可能会遇到以下问题：

• 浏览器内存使用量持续增长
• 页面响应速度逐渐变慢
• 系统资源占用过高
• 可能导致浏览器崩溃

优化方案

1. 前端优化

1.1 帧率控制

• 最大FPS限制: 默认15fps，可根据需要调整
• 跳帧机制: 每3帧显示1帧，减少处理负担
• 自适应帧率: 根据内存使用情况动态调整

1.2 内存监控

• 实时监控: 每10秒检查一次内存使用情况
• 自动清理: 内存使用率超过80%时自动垃圾回收
• 手动控制: 提供手动垃圾回收按钮

1.3 图像缓存优化

• 缓存复用: 重用Image对象，避免频繁创建
• 及时清理: 及时释放不再使用的图像资源
• 强制重绘: 使用requestAnimationFrame优化渲染

2. 后端优化

2.1 图像压缩

• 尺寸压缩: 最大分辨率320x240
• 质量压缩: JPEG质量设为50%
• 编码优化: 禁用渐进式JPEG，启用优化

2.2 内存管理

• 内存限制: 后端最大内存使用100MB
• 定期检查: 每50帧检查一次内存使用
• 强制清理: 内存超限时强制垃圾回收

2.3 帧处理优化

• 跳帧处理: 每3帧处理1帧
• 队列管理: 队列大小限制为1，确保实时性
• 及时释放: 处理完成后立即释放帧内存

使用方法

1. 启动优化版本

确保使用最新的优化版本：

# 启动后端（已包含内存优化）
python backend/app.py

# 打开前端页面
# 访问 frontend_websocket_example.html

2. 监控内存使用

在前端页面中：

1. 点击 "内存使用情况" 按钮查看当前内存状态
2. 观察以下指标：
   • 已使用内存
   • 总分配内存
   • 内存使用率
   • 接收帧数和跳帧率

3. 手动优化

当发现内存使用过高时：

1. 点击 "强制垃圾回收" 按钮
2. 观察内存使用情况的变化
3. 如果问题持续，考虑刷新页面

4. 配置调整

编辑 memory_config.py 文件来调整优化参数：

# 前端配置
MAX_FPS = 15  # 降低可减少内存使用
FRAME_SKIP_THRESHOLD = 2  # 增加可减少处理负担
MAX_MEMORY_USAGE_PERCENT = 80  # 调整自动清理阈值

# 后端配置
JPEG_QUALITY = 50  # 降低可减少内存使用
MAX_FRAME_WIDTH = 320  # 降低可减少内存使用
MAX_BACKEND_MEMORY_MB = 100  # 调整内存限制

性能调优建议

1. 根据硬件调整

低配置设备:

MAX_FPS = 10
FRAME_SKIP_THRESHOLD = 4
JPEG_QUALITY = 40
MAX_FRAME_WIDTH = 240

高配置设备:

MAX_FPS = 20
FRAME_SKIP_THRESHOLD = 1
JPEG_QUALITY = 60
MAX_FRAME_WIDTH = 480

2. 根据网络调整

慢速网络:

• 降低帧率和质量
• 增加跳帧比例
• 减小图像尺寸

快速网络:

• 可适当提高帧率和质量
• 减少跳帧比例

3. 长时间运行优化

对于需要长时间运行的场景：

1. 设置更严格的内存限制
2. 增加自动清理频率
3. 定期刷新页面（建议每2-4小时）

故障排除

1. 内存仍然增长

可能原因:

• 浏览器不支持强制垃圾回收
• 其他页面或扩展占用内存
• 系统内存不足

解决方案:

1. 使用Chrome浏览器并启用 --enable-precise-memory-info 标志
2. 关闭其他不必要的标签页
3. 降低优化参数设置
4. 定期刷新页面

2. 视频卡顿

可能原因:

• 帧率设置过低
• 跳帧比例过高
• 网络延迟

解决方案:

1. 适当提高MAX_FPS
2. 减少FRAME_SKIP_THRESHOLD
3. 检查网络连接
4. 优化后端处理性能

3. 图像质量差

可能原因:

• JPEG质量设置过低
• 图像尺寸压缩过度

解决方案:

1. 提高JPEG_QUALITY（建议不超过70）
2. 增加MAX_FRAME_WIDTH和MAX_FRAME_HEIGHT
3. 平衡质量和内存使用

监控和日志

1. 前端监控

在浏览器控制台中查看：

// 查看内存使用
console.log(performance.memory);

// 查看优化统计
console.log('帧数:', frameCount);
console.log('跳帧数:', frameSkipCount);

2. 后端日志

查看后端日志中的内存相关信息：

[INFO] 内存使用: 45.2MB
[WARNING] 内存使用过高: 105.3MB，强制清理
[INFO] 垃圾回收完成，内存降至: 38.7MB

最佳实践

1. 定期监控: 每隔一段时间检查内存使用情况
2. 合理配置: 根据实际需求调整优化参数
3. 及时清理: 发现内存异常时及时进行清理
4. 版本更新: 保持使用最新的优化版本
5. 硬件匹配: 根据硬件配置调整参数

技术原理

1. 内存泄漏原因

• 频繁创建Image对象
• Base64字符串累积
• 事件监听器未正确清理
• 浏览器垃圾回收不及时

2. 优化原理

• 对象复用减少创建开销
• 及时释放减少内存占用
• 跳帧处理减少处理负担
• 强制垃圾回收释放内存

3. 性能平衡

• 内存使用 vs 视频质量
• 实时性 vs 资源占用
• 用户体验 vs 系统稳定性

---

如有其他问题，请查看项目文档或联系技术支持。