161 lines
3.9 KiB
Markdown
161 lines
3.9 KiB
Markdown
|
# 内存优化说明
|
|||
|
|
|
|||
|
|
## 优化内容
|
|||
|
|
|
|||
|
|
### 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. 切换到其他页面，确认定时器已停止
|