ERP/MEMORY_OPTIMIZATION.md

内存优化说明

优化内容

1. Dashboard 组件资源清理

清理策略（三重保护）：

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

清理内容：

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

数据过滤：

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

日志输出：

console.log('[资源清理] 清理缓存数据，更新次数:', count, '数据量:', pddLength, ytLength);

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

问题：

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

解决方案：

• 创建统一的事件监听器管理系统
• 使用 addListener() 替代 addEventListener()
• 页面切换时自动清理所有监听器

实现：

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%时发出警告

使用方法：

// 开发环境自动启动
// 生产环境手动启动
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
   • 拍摄快照对比内存变化

手动测试

// 在控制台执行
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：

// 修改清理条件
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. 切换到其他页面，确认定时器已停止