# 内存优化指南

## 概述

本指南介绍了身体平衡评估系统中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. 启动优化版本

确保使用最新的优化版本：
```bash
# 启动后端（已包含内存优化）
python backend/app.py

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

### 2. 监控内存使用

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

### 3. 手动优化

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

### 4. 配置调整

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

```python
# 前端配置
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. 根据硬件调整

**低配置设备**:
```python
MAX_FPS = 10
FRAME_SKIP_THRESHOLD = 4
JPEG_QUALITY = 40
MAX_FRAME_WIDTH = 240
```

**高配置设备**:
```python
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. 前端监控

在浏览器控制台中查看：
```javascript
// 查看内存使用
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 系统稳定性

---

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