# 内存优化说明

## 优化内容

### 1. Dashboard 组件资源清理

**清理策略（三重保护）：**
- **策略1**: 每5次更新清理一次（约50秒）
- **策略2**: 数据量超过500条时自动清理
- **策略3**: 超过1分钟强制清理

**清理内容：**
- 拼多多和圆通审计数据缓存
- Canvas 画布内容
- 趋势图数据对象
- 触发浏览器垃圾回收（如果支持）

**数据过滤：**
- 只缓存最近30天的数据
- 自动过滤超过30天的旧数据
- 减少内存占用

**日志输出：**
```javascript
console.log('[资源清理] 清理缓存数据，更新次数:', count, '数据量:', pddLength, ytLength);
```

### 2. Upload 组件事件监听器管理

**问题：**
- 每次渲染页面都添加新的事件监听器
- 旧的监听器没有被移除
- 导致内存泄漏

**解决方案：**
- 创建统一的事件监听器管理系统
- 使用 `addListener()` 替代 `addEventListener()`
- 页面切换时自动清理所有监听器

**实现：**
```javascript
const eventListeners = [];
const addListener = (element, event, handler) => {
  if(element){
    element.addEventListener(event, handler);
    eventListeners.push({element, event, handler});
  }
};
const cleanupListeners = () => {
  eventListeners.forEach(({element, event, handler}) => {
    element.removeEventListener(event, handler);
  });
  eventListeners.length = 0;
};
```

### 3. 内存监控工具

**功能：**
- 实时监控 JavaScript 堆内存使用情况
- 每10秒输出一次内存状态
- 内存使用超过70%时发出警告

**使用方法：**
```javascript
// 开发环境自动启动
// 生产环境手动启动
MemoryMonitor.start(10000); // 每10秒监控

// 查看当前内存状态
MemoryMonitor.logCurrent();

// 停止监控
MemoryMonitor.stop();
```

**输出示例：**
```
[内存监控] 使用: 45.23 MB / 2048.00 MB (2.21%)
[内存警告] 内存使用率超过70%，建议清理资源
```

## 监控方法

### 浏览器开发者工具

1. **打开控制台**：F12 → Console
2. **查看内存日志**：
   - `[资源清理]` - 缓存清理日志
   - `[内存监控]` - 内存使用情况
   - `[内存警告]` - 内存使用过高警告

3. **性能监控**：F12 → Performance
   - 点击 Record 开始录制
   - 使用应用一段时间
   - 停止录制查看内存曲线

4. **内存快照**：F12 → Memory
   - 选择 Heap snapshot
   - 拍摄快照对比内存变化

### 手动测试

```javascript
// 在控制台执行
MemoryMonitor.logCurrent();

// 查看缓存状态
console.log('Dashboard缓存:', window.__auditCache);

// 查看定时器
console.log('定时器ID:', window.__auditTimer);
```

## 预期效果

### 优化前
- 内存持续增长
- 30秒清理无明显效果
- 长时间使用后内存占用过高

### 优化后
- 内存使用稳定在合理范围
- 每50秒或数据量达到500条时自动清理
- 超过1分钟强制清理
- 只保留最近30天数据
- 事件监听器正确清理

## 注意事项

1. **浏览器支持**：
   - `performance.memory` API 仅在 Chrome/Edge 中可用
   - Firefox/Safari 不支持此 API

2. **垃圾回收**：
   - `window.gc()` 需要浏览器启动时添加 `--js-flags="--expose-gc"` 参数
   - 正常情况下浏览器会自动进行垃圾回收

3. **开发环境**：
   - 内存监控工具在 localhost 自动启动
   - 生产环境需要手动启动

## 调整参数

如需调整清理策略，修改 `frontend/js/components/dashboard.js`：

```javascript
// 修改清理条件
const shouldClean = cache.updateCount >= 5 ||  // 改为10次
                   (cache.pdd && cache.pdd.length > 500) ||  // 改为1000条
                   (now - cache.lastClean > 60000);  // 改为120000（2分钟）
```

## 测试建议

1. 打开浏览器控制台
2. 进入 Dashboard 页面
3. 观察内存监控日志
4. 等待约1分钟查看清理日志
5. 切换到其他页面，确认定时器已停止