mirror of
https://github.com/jxxghp/MoviePilot-Frontend.git
synced 2026-07-20 20:11:39 +08:00
Bump version to 2.6.3 and remove optimization documentation files
Co-authored-by: jxxghp <jxxghp@163.com>
This commit is contained in:
Cursor Agent
276
PWA后台优化完整实施报告.md
276
PWA后台优化完整实施报告.md
@@ -1,276 +0,0 @@
|
||||
# PWA后台优化完整实施报告
|
||||
|
||||
## 项目概述
|
||||
本次优化针对MoviePilot PWA应用在iOS设备上频繁被系统杀掉后台进程的问题，通过全面优化SSE连接和定时器管理，显著提升应用在后台的生存能力。
|
||||
|
||||
## 核心优化工具
|
||||
|
||||
### 1. 后台管理器 (`src/utils/backgroundManager.ts`)
|
||||
- **功能**: 统一管理所有定时器的生命周期
|
||||
- **特性**:
|
||||
- 自动检测应用前台/后台状态
|
||||
- 后台时自动暂停定时器，前台时恢复
|
||||
- 提供定时器状态监控和调试接口
|
||||
- 支持用户活跃状态检测
|
||||
|
||||
### 2. SSE管理器 (`src/utils/sseManager.ts`)
|
||||
- **功能**: 优化SSE连接管理
|
||||
- **特性**:
|
||||
- 后台5秒后自动关闭连接
|
||||
- 前台时自动重连
|
||||
- 连接错误自动重试
|
||||
- 防止连接泄露
|
||||
|
||||
### 3. 组合函数 (`src/composables/useBackgroundOptimization.ts`)
|
||||
- **提供的功能**:
|
||||
- `useSSE`: 基础SSE连接管理
|
||||
- `useDelayedSSE`: 延迟启动的SSE连接
|
||||
- `useProgressSSE`: 进度监听专用SSE
|
||||
- `useTimer`: 优化的定时器
|
||||
- `useDataRefresh`: 数据刷新定时器
|
||||
|
||||
## 完成的组件优化
|
||||
|
||||
### SSE连接优化（8个组件）
|
||||
|
||||
#### 1. UserNotification.vue
|
||||
- **优化前**: 永久SSE连接监听用户通知
|
||||
- **优化后**: 使用`useDelayedSSE`，3秒延迟启动，后台自动关闭
|
||||
- **影响**: 减少后台网络活动，提升电池续航
|
||||
|
||||
#### 2. MessageView.vue
|
||||
- **优化前**: 永久SSE连接监听消息
|
||||
- **优化后**: 使用`useSSE`管理连接生命周期
|
||||
- **影响**: 后台时自动断开连接，前台时重连
|
||||
|
||||
#### 3. LoggingView.vue
|
||||
- **优化前**: 永久SSE连接监听日志
|
||||
- **优化后**: 使用优化的SSE管理器，保留缓冲区逻辑
|
||||
- **影响**: 后台时停止日志流，减少资源占用
|
||||
|
||||
#### 4. resource.vue
|
||||
- **优化前**: 永久SSE连接监听搜索进度
|
||||
- **优化后**: 使用`useProgressSSE`，进度结束时自动关闭
|
||||
- **影响**: 避免无用的长期连接
|
||||
|
||||
#### 5. TransferQueueDialog.vue
|
||||
- **优化前**: 对话框中的SSE连接监听传输进度
|
||||
- **优化后**: 使用`useProgressSSE`，后台自动暂停
|
||||
- **影响**: 对话框后台时不消耗资源
|
||||
|
||||
#### 6. FileList.vue
|
||||
- **优化前**: 文件操作进度SSE连接
|
||||
- **优化后**: 使用`useProgressSSE`管理连接
|
||||
- **影响**: 文件操作后台时自动优化
|
||||
|
||||
#### 7. ReorganizeDialog.vue
|
||||
- **优化前**: 整理进度SSE连接
|
||||
- **优化后**: 使用`useProgressSSE`，后台自动暂停
|
||||
- **影响**: 整理进度后台时不占用资源
|
||||
|
||||
#### 8. App.vue (主应用)
|
||||
- **优化前**: 系统通知SSE连接
|
||||
- **优化后**: 已在前期优化中处理
|
||||
- **影响**: 主应用后台时减少网络活动
|
||||
|
||||
### 定时器优化（11个组件）
|
||||
|
||||
#### 1. App.vue
|
||||
- **优化前**: 10秒轮换背景图片
|
||||
- **优化后**: 使用`addBackgroundTimer`，后台时自动暂停
|
||||
- **影响**: 后台时停止图片轮换，节省内存和CPU
|
||||
|
||||
#### 2. pwaStateManager.ts
|
||||
- **优化前**: 30秒保存PWA状态
|
||||
- **优化后**:
|
||||
- 间隔改为60秒
|
||||
- 后台时不保存
|
||||
- 添加活跃状态检测
|
||||
- **影响**: 减少50%的状态保存频率
|
||||
|
||||
#### 3. AnalyticsMemory.vue
|
||||
- **优化前**: 2秒刷新内存使用数据
|
||||
- **优化后**: 使用`useDataRefresh`，后台自动暂停
|
||||
- **影响**: 后台时完全停止内存监控
|
||||
|
||||
#### 4. AnalyticsCpu.vue
|
||||
- **优化前**: 2秒刷新CPU使用数据
|
||||
- **优化后**: 使用`useDataRefresh`，后台自动暂停
|
||||
- **影响**: 后台时完全停止CPU监控
|
||||
|
||||
#### 5. AnalyticsSpeed.vue
|
||||
- **优化前**: 3秒刷新速度数据
|
||||
- **优化后**: 使用`useDataRefresh`，后台自动暂停
|
||||
- **影响**: 后台时完全停止速度监控
|
||||
|
||||
#### 6. DownloadingListView.vue
|
||||
- **优化前**: 3秒刷新下载列表
|
||||
- **优化后**: 使用`useDataRefresh`，后台自动暂停
|
||||
- **影响**: 后台时停止下载状态查询
|
||||
|
||||
#### 7. AccountSettingService.vue
|
||||
- **优化前**: 5秒刷新定时任务状态
|
||||
- **优化后**: 使用`useDataRefresh`，后台自动暂停
|
||||
- **影响**: 后台时停止服务状态查询
|
||||
|
||||
#### 8. AnalyticsProcesses.vue
|
||||
- **优化前**: 5秒刷新进程列表
|
||||
- **优化后**: 使用`useDataRefresh`，后台自动暂停
|
||||
- **影响**: 后台时停止进程监控
|
||||
|
||||
#### 9. AnalyticsScheduler.vue
|
||||
- **优化前**: 60秒刷新调度器状态
|
||||
- **优化后**: 使用`useDataRefresh`，后台自动暂停
|
||||
- **影响**: 后台时停止调度器状态查询
|
||||
|
||||
#### 10. AnalyticsNetwork.vue
|
||||
- **优化前**: 2秒刷新网络流量数据
|
||||
- **优化后**: 使用`useDataRefresh`，后台自动暂停
|
||||
- **影响**: 后台时完全停止网络监控
|
||||
|
||||
#### 11. DownloaderCard.vue
|
||||
- **优化前**: 3秒查询下载器状态
|
||||
- **优化后**: 使用`useDataRefresh`，后台自动暂停
|
||||
- **影响**: 后台时停止下载器状态查询
|
||||
|
||||
## 优化效果对比
|
||||
|
||||
### 资源占用改善
|
||||
|
||||
| 资源类型 | 优化前 | 优化后 | 改善幅度 |
|
||||
|----------|--------|--------|----------|
|
||||
| SSE连接数 | 8个永久连接 | 后台0个 | 100%减少 |
|
||||
| 定时器数量 | 11个持续运行 | 后台0个 | 100%减少 |
|
||||
| 网络请求频率 | 高频持续请求 | 后台完全停止 | 100%减少 |
|
||||
| CPU使用率 | 持续消耗 | 后台极低 | 90%减少 |
|
||||
| 内存使用 | 持续增长 | 后台稳定 | 60%改善 |
|
||||
|
||||
### 具体数值对比
|
||||
|
||||
| 组件 | 优化前频率 | 优化后状态 | 节省资源 |
|
||||
|------|------------|------------|----------|
|
||||
| UserNotification | 永久连接 | 后台关闭 | 100% |
|
||||
| MessageView | 永久连接 | 后台关闭 | 100% |
|
||||
| LoggingView | 永久连接 | 后台关闭 | 100% |
|
||||
| 背景图片轮换 | 10秒/次 | 后台暂停 | 100% |
|
||||
| PWA状态保存 | 30秒/次 | 60秒/次+后台暂停 | 50%+ |
|
||||
| 内存监控 | 2秒/次 | 后台暂停 | 100% |
|
||||
| CPU监控 | 2秒/次 | 后台暂停 | 100% |
|
||||
| 速度监控 | 3秒/次 | 后台暂停 | 100% |
|
||||
| 网络监控 | 2秒/次 | 后台暂停 | 100% |
|
||||
| 下载列表 | 3秒/次 | 后台暂停 | 100% |
|
||||
| 进程监控 | 5秒/次 | 后台暂停 | 100% |
|
||||
|
||||
## 技术实现特色
|
||||
|
||||
### 1. 渐进式优化
|
||||
- 保持原有功能完整性
|
||||
- 可逐步部署，不影响现有功能
|
||||
- 向后兼容性良好
|
||||
|
||||
### 2. 智能状态管理
|
||||
- 自动检测前台/后台状态
|
||||
- 基于用户活跃度的智能调度
|
||||
- 状态切换时的平滑过渡
|
||||
|
||||
### 3. 资源自动清理
|
||||
- 应用卸载时自动清理所有后台资源
|
||||
- 防止内存泄漏和僵尸进程
|
||||
- 连接错误时的自动重试机制
|
||||
|
||||
### 4. 调试友好
|
||||
- 开发环境提供丰富的调试工具
|
||||
- 实时状态监控
|
||||
- 详细的日志记录
|
||||
|
||||
## 调试工具
|
||||
|
||||
### 开发环境调试命令
|
||||
```javascript
|
||||
// 查看后台管理器状态
|
||||
window.debugBackground()
|
||||
|
||||
// 查看所有定时器信息
|
||||
window.backgroundManager.getTimersInfo()
|
||||
|
||||
// 查看SSE连接状态
|
||||
window.sseManagerSingleton.getConnectionsInfo()
|
||||
|
||||
// 查看用户活跃状态
|
||||
window.backgroundManager.getActiveStatus()
|
||||
```
|
||||
|
||||
### 生产环境监控
|
||||
- 性能指标实时监控
|
||||
- 资源使用情况统计
|
||||
- 异常情况自动报告
|
||||
|
||||
## 部署验证
|
||||
|
||||
### 1. 基础功能验证
|
||||
- ✅ 所有原有功能正常工作
|
||||
- ✅ 前台时数据实时更新
|
||||
- ✅ 后台时资源自动释放
|
||||
- ✅ 状态切换时平滑过渡
|
||||
|
||||
### 2. 性能验证
|
||||
- ✅ 后台时CPU使用率降低90%
|
||||
- ✅ 后台时网络活动停止
|
||||
- ✅ 内存使用保持稳定
|
||||
- ✅ 电池续航明显改善
|
||||
|
||||
### 3. 兼容性验证
|
||||
- ✅ iOS设备兼容性良好
|
||||
- ✅ Android设备正常工作
|
||||
- ✅ 桌面浏览器功能完整
|
||||
- ✅ PWA安装后正常运行
|
||||
|
||||
## 预期效果
|
||||
|
||||
### 1. 后台生存能力
|
||||
- **预期提升**: 3-5倍
|
||||
- **主要改善**: 系统杀掉应用的概率大幅降低
|
||||
- **用户体验**: 从后台恢复时响应更快
|
||||
|
||||
### 2. 资源使用优化
|
||||
- **CPU使用**: 后台时降低90%
|
||||
- **内存占用**: 后台时保持稳定
|
||||
- **网络流量**: 后台时完全停止
|
||||
- **电池续航**: 提升30-50%
|
||||
|
||||
### 3. 系统稳定性
|
||||
- **内存泄漏**: 完全消除
|
||||
- **连接堆积**: 自动清理
|
||||
- **异常恢复**: 自动重试
|
||||
- **状态一致**: 保持同步
|
||||
|
||||
## 维护建议
|
||||
|
||||
### 1. 定期监控
|
||||
- 监控后台管理器状态
|
||||
- 检查SSE连接健康度
|
||||
- 统计资源使用情况
|
||||
- 收集用户反馈
|
||||
|
||||
### 2. 持续优化
|
||||
- 根据使用情况调整定时器间隔
|
||||
- 优化SSE重连策略
|
||||
- 改进状态检测逻辑
|
||||
- 添加更多调试工具
|
||||
|
||||
### 3. 功能扩展
|
||||
- 支持更多组件类型
|
||||
- 添加更智能的调度算法
|
||||
- 集成系统级别的优化
|
||||
- 提供更详细的性能分析
|
||||
|
||||
## 总结
|
||||
|
||||
本次PWA后台优化项目已全面完成，共优化了19个组件，包括8个SSE连接和11个定时器。通过建立完善的后台管理体系，实现了以下核心目标：
|
||||
|
||||
1. **资源使用优化**: 后台时CPU使用率降低90%，网络活动完全停止
|
||||
2. **电池续航改善**: 预期提升30-50%的电池使用时间
|
||||
3. **系统稳定性**: 消除内存泄漏，防止连接堆积
|
||||
4. **用户体验提升**: 应用后台生存能力提升3-5倍
|
||||
|
||||
这套优化方案不仅解决了iOS设备上的后台杀掉问题，还为整个PWA应用建立了可持续的资源管理体系，为后续的功能扩展奠定了坚实基础。
|
||||
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "moviepilot",
|
||||
"version": "2.6.2",
|
||||
"version": "2.6.3",
|
||||
"private": true,
|
||||
"type": "module",
|
||||
"bin": "dist/service.js",
|
||||
|
||||
179
优化实施总结.md
179
优化实施总结.md
@@ -1,179 +0,0 @@
|
||||
# PWA 后台优化实施总结
|
||||
|
||||
## ✅ 已完成的优化
|
||||
|
||||
### 1. 核心优化工具已创建
|
||||
|
||||
#### SSE管理器 (`src/utils/sseManager.ts`)
|
||||
- ✅ 自动检测前台/后台状态
|
||||
- ✅ 后台5秒后自动关闭连接
|
||||
- ✅ 前台时自动重连
|
||||
- ✅ 支持多个监听器管理
|
||||
- ✅ 连接错误自动重试
|
||||
|
||||
#### 后台管理器 (`src/utils/backgroundManager.ts`)
|
||||
- ✅ 统一管理所有定时器
|
||||
- ✅ 后台时自动暂停定时器
|
||||
- ✅ 前台时自动恢复定时器
|
||||
- ✅ 用户活跃状态检测
|
||||
- ✅ 定时器状态监控
|
||||
|
||||
#### 组合函数 (`src/composables/useBackgroundOptimization.ts`)
|
||||
- ✅ `useSSE` - 优化的SSE连接
|
||||
- ✅ `useDelayedSSE` - 延迟SSE连接
|
||||
- ✅ `useProgressSSE` - 进度监听SSE
|
||||
- ✅ `useTimer` - 优化的定时器
|
||||
- ✅ `useDataRefresh` - 数据刷新定时器
|
||||
|
||||
### 2. SSE连接优化已完成
|
||||
|
||||
#### ✅ UserNotification.vue
|
||||
- **原来**: 3秒延迟后创建EventSource，后台一直保持连接
|
||||
- **现在**: 使用`useDelayedSSE`，后台5秒后自动关闭，前台自动重连
|
||||
- **影响**: 减少后台网络活动80%
|
||||
|
||||
#### ✅ MessageView.vue
|
||||
- **原来**: 在loadMessages中启动SSE连接
|
||||
- **现在**: 使用`useSSE`管理连接生命周期
|
||||
- **影响**: 后台自动断开，减少资源消耗
|
||||
|
||||
#### ✅ LoggingView.vue
|
||||
- **原来**: 直接创建EventSource，复杂的缓冲区处理
|
||||
- **现在**: 保持缓冲区逻辑，使用优化的SSE管理器
|
||||
- **影响**: 保持功能完整性的同时优化后台性能
|
||||
|
||||
#### ✅ resource.vue (搜索进度)
|
||||
- **原来**: 直接创建EventSource监听搜索进度
|
||||
- **现在**: 使用`useProgressSSE`，进度结束时自动关闭
|
||||
- **影响**: 进度监听更高效，减少不必要的连接
|
||||
|
||||
### 3. 定时器优化已完成
|
||||
|
||||
#### ✅ App.vue (背景图片轮换)
|
||||
- **原来**: 每10秒切换背景，使用setInterval
|
||||
- **现在**: 使用`addBackgroundTimer`，后台时自动暂停
|
||||
- **影响**: 后台时停止图片处理，显著降低CPU使用
|
||||
|
||||
#### ✅ PWA状态管理器优化
|
||||
- **原来**: 每30秒保存状态
|
||||
- **现在**: 每60秒保存，后台时不保存
|
||||
- **影响**: 减少后台I/O操作50%
|
||||
|
||||
#### ✅ AnalyticsMemory.vue
|
||||
- **原来**: 每3秒刷新内存数据，使用setInterval
|
||||
- **现在**: 使用`useDataRefresh`，后台时自动暂停
|
||||
- **影响**: 后台时停止API调用，减少服务器负载
|
||||
|
||||
#### ✅ AnalyticsCpu.vue
|
||||
- **原来**: 每2秒刷新CPU数据
|
||||
- **现在**: 使用优化的数据刷新定时器
|
||||
- **影响**: 后台时不刷新，减少API请求频率
|
||||
|
||||
#### ✅ AnalyticsSpeed.vue
|
||||
- **原来**: 每3秒刷新下载器数据
|
||||
- **现在**: 使用优化的数据刷新定时器
|
||||
- **影响**: 后台时暂停数据更新
|
||||
|
||||
### 4. 主应用初始化优化
|
||||
|
||||
#### ✅ main.ts 初始化
|
||||
- **新增**: 后台管理器初始化
|
||||
- **新增**: SSE管理器初始化
|
||||
- **新增**: 开发环境调试工具
|
||||
- **新增**: 应用卸载时的资源清理
|
||||
|
||||
## 📊 预期优化效果
|
||||
|
||||
### 立即收益 (已实现)
|
||||
- **SSE连接优化**: 减少后台网络活动 80%
|
||||
- **定时器优化**: 降低后台CPU使用率 60%
|
||||
- **API调用优化**: 减少后台API请求 70%
|
||||
|
||||
### 具体数值对比
|
||||
|
||||
| 项目 | 优化前 | 优化后 | 改善幅度 |
|
||||
|------|--------|--------|----------|
|
||||
| SSE连接数量 | 5个永久连接 | 后台0个，前台按需 | 100%减少 |
|
||||
| 定时器频率 | 多个高频定时器 | 后台全部暂停 | 100%减少 |
|
||||
| 状态保存频率 | 30秒 | 60秒+活跃检测 | 50%减少 |
|
||||
| 背景图片轮换 | 后台继续运行 | 后台完全停止 | 100%减少 |
|
||||
| 仪表盘刷新 | 后台持续刷新 | 后台完全停止 | 100%减少 |
|
||||
|
||||
## 🔧 调试工具
|
||||
|
||||
### 开发环境调试
|
||||
在浏览器控制台中使用：
|
||||
```javascript
|
||||
// 查看后台管理器状态
|
||||
debugBackground()
|
||||
|
||||
// 查看所有定时器信息
|
||||
window.backgroundManager.getTimersInfo()
|
||||
|
||||
// 查看SSE连接状态
|
||||
window.sseManagerSingleton
|
||||
```
|
||||
|
||||
## 🚀 部署验证
|
||||
|
||||
### 验证方法
|
||||
1. **后台切换测试**
|
||||
- 切换到其他应用5秒以上
|
||||
- 回到PWA应用，观察是否快速恢复
|
||||
- 检查控制台SSE重连日志
|
||||
|
||||
2. **定时器暂停验证**
|
||||
- 在开发工具中运行`debugBackground()`
|
||||
- 切换到后台，再次运行查看定时器状态
|
||||
- 确认所有定时器都标记为"paused"
|
||||
|
||||
3. **内存使用监控**
|
||||
- 使用Chrome DevTools监控内存使用
|
||||
- 对比优化前后的内存增长曲线
|
||||
- 验证后台时内存使用趋于平稳
|
||||
|
||||
## 🎯 下一步优化建议
|
||||
|
||||
### 中优先级 (建议1-2周内完成)
|
||||
1. **剩余SSE连接优化**
|
||||
- TransferQueueDialog.vue
|
||||
- FileList.vue中的进度监听
|
||||
- ReorganizeDialog.vue
|
||||
|
||||
2. **剩余定时器优化**
|
||||
- AccountSettingService.vue
|
||||
- DownloadingListView.vue
|
||||
- 其他dashboard组件
|
||||
|
||||
3. **Service Worker缓存优化**
|
||||
- 后台时减少缓存操作
|
||||
- 优化网络请求处理策略
|
||||
|
||||
### 低优先级 (长期优化)
|
||||
1. **生命周期监听器整合**
|
||||
2. **PWA状态管理精简**
|
||||
3. **性能监控增强**
|
||||
|
||||
## 📋 验证清单
|
||||
|
||||
### ✅ 核心功能验证
|
||||
- [x] SSE连接在后台自动关闭
|
||||
- [x] 定时器在后台自动暂停
|
||||
- [x] 前台时所有功能正常恢复
|
||||
- [x] 用户体验无明显影响
|
||||
- [x] 控制台无错误信息
|
||||
|
||||
### ✅ 性能验证
|
||||
- [x] 后台内存使用稳定
|
||||
- [x] 后台网络活动显著减少
|
||||
- [x] 后台CPU使用率降低
|
||||
- [x] iOS设备后台存活时间延长
|
||||
|
||||
## 🔥 重要说明
|
||||
|
||||
1. **向后兼容**: 所有优化都保持了原有功能的完整性
|
||||
2. **渐进式优化**: 可以逐步部署，不影响现有功能
|
||||
3. **调试友好**: 开发环境提供了丰富的调试工具
|
||||
4. **自动清理**: 应用卸载时自动清理所有后台资源
|
||||
|
||||
这次优化预计可以显著提高PWA应用在iOS设备上的后台生存能力，减少被系统杀掉的概率。
|
||||
371
剩余组件优化补丁.md
371
剩余组件优化补丁.md
@@ -1,371 +0,0 @@
|
||||
# 剩余组件优化补丁
|
||||
|
||||
## 1. TransferQueueDialog.vue 优化
|
||||
|
||||
### 原始代码 (需要替换的部分)
|
||||
```typescript
|
||||
// 加载进度SSE
|
||||
const progressEventSource = ref<EventSource>()
|
||||
|
||||
// 使用SSE监听加载进度
|
||||
function startLoadingProgress() {
|
||||
progressEventSource.value = new EventSource(`${import.meta.env.VITE_API_BASE_URL}system/progress/filetransfer`)
|
||||
progressEventSource.value.onmessage = event => {
|
||||
const progress = JSON.parse(event.data)
|
||||
if (progress) {
|
||||
progressText.value = progress.text
|
||||
progressValue.value = progress.value
|
||||
progressEnabled.value = progress.enable
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 停止监听加载进度
|
||||
function stopLoadingProgress() {
|
||||
progressEventSource.value?.close()
|
||||
}
|
||||
```
|
||||
|
||||
### 优化后的代码
|
||||
```typescript
|
||||
import { useBackgroundOptimization } from '@/composables/useBackgroundOptimization'
|
||||
|
||||
const { useProgressSSE } = useBackgroundOptimization()
|
||||
|
||||
// 进度是否激活
|
||||
const progressActive = ref(false)
|
||||
|
||||
// 进度SSE消息处理函数
|
||||
function handleProgressMessage(event: MessageEvent) {
|
||||
const progress = JSON.parse(event.data)
|
||||
if (progress) {
|
||||
progressText.value = progress.text
|
||||
progressValue.value = progress.value
|
||||
progressEnabled.value = progress.enable
|
||||
}
|
||||
}
|
||||
|
||||
// 使用优化的进度SSE连接
|
||||
const progressSSE = useProgressSSE(
|
||||
`${import.meta.env.VITE_API_BASE_URL}system/progress/filetransfer`,
|
||||
handleProgressMessage,
|
||||
'transfer-queue-progress',
|
||||
progressActive
|
||||
)
|
||||
|
||||
// 使用SSE监听加载进度
|
||||
function startLoadingProgress() {
|
||||
progressActive.value = true
|
||||
progressSSE.start()
|
||||
}
|
||||
|
||||
// 停止监听加载进度
|
||||
function stopLoadingProgress() {
|
||||
progressActive.value = false
|
||||
progressSSE.stop()
|
||||
}
|
||||
```
|
||||
|
||||
## 2. AccountSettingService.vue 优化
|
||||
|
||||
### 原始代码 (需要替换的部分)
|
||||
```typescript
|
||||
let refreshTimer: NodeJS.Timeout | null = null
|
||||
|
||||
// 启动定时器
|
||||
refreshTimer = setInterval(() => {
|
||||
loadServiceData()
|
||||
}, 3000)
|
||||
|
||||
// 组件卸载时停止定时器
|
||||
onUnmounted(() => {
|
||||
if (refreshTimer) {
|
||||
clearInterval(refreshTimer)
|
||||
refreshTimer = null
|
||||
}
|
||||
})
|
||||
```
|
||||
|
||||
### 优化后的代码
|
||||
```typescript
|
||||
import { useBackgroundOptimization } from '@/composables/useBackgroundOptimization'
|
||||
|
||||
const { useDataRefresh } = useBackgroundOptimization()
|
||||
|
||||
// 使用优化的数据刷新定时器
|
||||
const { loading } = useDataRefresh(
|
||||
'account-service',
|
||||
loadServiceData,
|
||||
3000, // 3秒间隔
|
||||
true // 立即执行
|
||||
)
|
||||
```
|
||||
|
||||
## 3. DownloadingListView.vue 优化
|
||||
|
||||
### 原始代码 (需要替换的部分)
|
||||
```typescript
|
||||
let refreshTimer: NodeJS.Timeout | null = null
|
||||
|
||||
onMounted(() => {
|
||||
loadData()
|
||||
refreshTimer = setInterval(() => {
|
||||
loadData()
|
||||
}, 3000)
|
||||
})
|
||||
|
||||
onUnmounted(() => {
|
||||
if (refreshTimer) {
|
||||
clearInterval(refreshTimer)
|
||||
refreshTimer = null
|
||||
}
|
||||
})
|
||||
```
|
||||
|
||||
### 优化后的代码
|
||||
```typescript
|
||||
import { useBackgroundOptimization } from '@/composables/useBackgroundOptimization'
|
||||
|
||||
const { useDataRefresh } = useBackgroundOptimization()
|
||||
|
||||
// 使用优化的数据刷新定时器
|
||||
const { loading } = useDataRefresh(
|
||||
'downloading-list',
|
||||
loadData,
|
||||
3000, // 3秒间隔
|
||||
true // 立即执行
|
||||
)
|
||||
```
|
||||
|
||||
## 4. AnalyticsScheduler.vue 优化
|
||||
|
||||
### 原始代码 (需要替换的部分)
|
||||
```typescript
|
||||
let refreshTimer: NodeJS.Timeout | null = null
|
||||
|
||||
onMounted(() => {
|
||||
loadSchedulerData()
|
||||
refreshTimer = setInterval(() => {
|
||||
loadSchedulerData()
|
||||
}, 3000)
|
||||
})
|
||||
|
||||
onUnmounted(() => {
|
||||
if (refreshTimer) {
|
||||
clearInterval(refreshTimer)
|
||||
refreshTimer = null
|
||||
}
|
||||
})
|
||||
```
|
||||
|
||||
### 优化后的代码
|
||||
```typescript
|
||||
import { useBackgroundOptimization } from '@/composables/useBackgroundOptimization'
|
||||
|
||||
const { useDataRefresh } = useBackgroundOptimization()
|
||||
|
||||
// 使用优化的数据刷新定时器
|
||||
const { loading } = useDataRefresh(
|
||||
'analytics-scheduler',
|
||||
loadSchedulerData,
|
||||
3000, // 3秒间隔
|
||||
true // 立即执行
|
||||
)
|
||||
```
|
||||
|
||||
## 5. AnalyticsNetwork.vue 优化
|
||||
|
||||
### 原始代码 (需要替换的部分)
|
||||
```typescript
|
||||
let refreshTimer: NodeJS.Timeout | null = null
|
||||
|
||||
onMounted(() => {
|
||||
loadNetworkData()
|
||||
refreshTimer = setInterval(() => {
|
||||
loadNetworkData()
|
||||
}, 3000)
|
||||
})
|
||||
|
||||
onUnmounted(() => {
|
||||
if (refreshTimer) {
|
||||
clearInterval(refreshTimer)
|
||||
refreshTimer = null
|
||||
}
|
||||
})
|
||||
```
|
||||
|
||||
### 优化后的代码
|
||||
```typescript
|
||||
import { useBackgroundOptimization } from '@/composables/useBackgroundOptimization'
|
||||
|
||||
const { useDataRefresh } = useBackgroundOptimization()
|
||||
|
||||
// 使用优化的数据刷新定时器
|
||||
const { loading } = useDataRefresh(
|
||||
'analytics-network',
|
||||
loadNetworkData,
|
||||
3000, // 3秒间隔
|
||||
true // 立即执行
|
||||
)
|
||||
```
|
||||
|
||||
## 6. AnalyticsProcesses.vue 优化
|
||||
|
||||
### 原始代码 (需要替换的部分)
|
||||
```typescript
|
||||
let refreshTimer: NodeJS.Timeout | null = null
|
||||
|
||||
onMounted(() => {
|
||||
loadProcessesData()
|
||||
refreshTimer = setInterval(() => {
|
||||
loadProcessesData()
|
||||
}, 3000)
|
||||
})
|
||||
|
||||
onUnmounted(() => {
|
||||
if (refreshTimer) {
|
||||
clearInterval(refreshTimer)
|
||||
refreshTimer = null
|
||||
}
|
||||
})
|
||||
```
|
||||
|
||||
### 优化后的代码
|
||||
```typescript
|
||||
import { useBackgroundOptimization } from '@/composables/useBackgroundOptimization'
|
||||
|
||||
const { useDataRefresh } = useBackgroundOptimization()
|
||||
|
||||
// 使用优化的数据刷新定时器
|
||||
const { loading } = useDataRefresh(
|
||||
'analytics-processes',
|
||||
loadProcessesData,
|
||||
3000, // 3秒间隔
|
||||
true // 立即执行
|
||||
)
|
||||
```
|
||||
|
||||
## 7. FileList.vue 优化 (批量重命名进度)
|
||||
|
||||
### 原始代码 (需要替换的部分)
|
||||
```typescript
|
||||
// 加载进度SSE
|
||||
const progressEventSource = ref<EventSource>()
|
||||
|
||||
// 使用SSE监听加载进度
|
||||
function startProgress() {
|
||||
progressEventSource.value = new EventSource(`${import.meta.env.VITE_API_BASE_URL}system/progress/batchrename`)
|
||||
progressEventSource.value.onmessage = event => {
|
||||
const progress = JSON.parse(event.data)
|
||||
if (progress) {
|
||||
progressText.value = progress.text
|
||||
progressValue.value = progress.value
|
||||
progressEnabled.value = progress.enable
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function stopProgress() {
|
||||
progressEventSource.value?.close()
|
||||
}
|
||||
```
|
||||
|
||||
### 优化后的代码
|
||||
```typescript
|
||||
import { useBackgroundOptimization } from '@/composables/useBackgroundOptimization'
|
||||
|
||||
const { useProgressSSE } = useBackgroundOptimization()
|
||||
|
||||
// 进度是否激活
|
||||
const progressActive = ref(false)
|
||||
|
||||
// 进度SSE消息处理函数
|
||||
function handleProgressMessage(event: MessageEvent) {
|
||||
const progress = JSON.parse(event.data)
|
||||
if (progress) {
|
||||
progressText.value = progress.text
|
||||
progressValue.value = progress.value
|
||||
progressEnabled.value = progress.enable
|
||||
}
|
||||
}
|
||||
|
||||
// 使用优化的进度SSE连接
|
||||
const progressSSE = useProgressSSE(
|
||||
`${import.meta.env.VITE_API_BASE_URL}system/progress/batchrename`,
|
||||
handleProgressMessage,
|
||||
'file-batch-rename-progress',
|
||||
progressActive
|
||||
)
|
||||
|
||||
function startProgress() {
|
||||
progressActive.value = true
|
||||
progressSSE.start()
|
||||
}
|
||||
|
||||
function stopProgress() {
|
||||
progressActive.value = false
|
||||
progressSSE.stop()
|
||||
}
|
||||
```
|
||||
|
||||
## 批量应用优化的步骤
|
||||
|
||||
### 1. 准备工作
|
||||
确保已经创建了所有必要的优化工具文件：
|
||||
- `src/utils/sseManager.ts`
|
||||
- `src/utils/backgroundManager.ts`
|
||||
- `src/composables/useBackgroundOptimization.ts`
|
||||
|
||||
### 2. 应用补丁
|
||||
逐个文件应用上述优化补丁：
|
||||
|
||||
```bash
|
||||
# 示例：优化TransferQueueDialog.vue
|
||||
# 1. 添加import语句
|
||||
# 2. 替换SSE相关代码
|
||||
# 3. 测试功能是否正常
|
||||
```
|
||||
|
||||
### 3. 验证步骤
|
||||
每个组件优化后都需要验证：
|
||||
|
||||
1. **功能验证**：确保原有功能正常工作
|
||||
2. **后台测试**：切换到后台再回来，验证恢复正常
|
||||
3. **控制台检查**：无错误信息
|
||||
4. **性能监控**：使用`debugBackground()`查看状态
|
||||
|
||||
### 4. 批量验证脚本
|
||||
```javascript
|
||||
// 在浏览器控制台运行，检查所有优化是否生效
|
||||
function verifyOptimizations() {
|
||||
const timers = window.backgroundManager.getTimersInfo()
|
||||
const status = window.backgroundManager.getStatus()
|
||||
|
||||
console.log('=== 优化验证报告 ===')
|
||||
console.log(`当前状态: ${status.isBackground ? '后台' : '前台'}`)
|
||||
console.log(`定时器总数: ${status.timerCount}`)
|
||||
console.log(`用户活跃: ${status.isUserActive}`)
|
||||
|
||||
console.table(timers)
|
||||
|
||||
if (timers.length === 0) {
|
||||
console.warn('⚠️ 没有发现任何托管定时器，可能优化未完全应用')
|
||||
} else {
|
||||
console.log('✅ 发现托管定时器，优化正在生效')
|
||||
}
|
||||
}
|
||||
|
||||
// 运行验证
|
||||
verifyOptimizations()
|
||||
```
|
||||
|
||||
## 预期完整优化效果
|
||||
|
||||
应用所有补丁后的最终效果：
|
||||
|
||||
- **SSE连接**: 8个组件的SSE连接全部优化
|
||||
- **定时器**: 10+个定时器全部托管到后台管理器
|
||||
- **后台资源消耗**: 接近零（除了必要的系统监听器）
|
||||
- **iOS后台存活时间**: 预计提升3-5倍
|
||||
|
||||
这些补丁可以在有时间时逐步应用，每个都是独立的优化，不会相互影响。
|
||||
220
部署检查清单.md
220
部署检查清单.md
@@ -1,220 +0,0 @@
|
||||
# PWA 后台优化部署检查清单
|
||||
|
||||
## 🚀 部署前检查
|
||||
|
||||
### ✅ 文件确认
|
||||
确保以下文件已正确创建：
|
||||
|
||||
- [ ] `src/utils/sseManager.ts` - SSE管理器
|
||||
- [ ] `src/utils/backgroundManager.ts` - 后台管理器
|
||||
- [ ] `src/composables/useBackgroundOptimization.ts` - 组合函数
|
||||
- [ ] `src/main.ts` - 已添加初始化代码
|
||||
|
||||
### ✅ 核心组件优化确认
|
||||
以下组件已使用优化的实现：
|
||||
|
||||
- [ ] `src/layouts/components/UserNotification.vue` - 用户通知SSE
|
||||
- [ ] `src/views/system/MessageView.vue` - 消息视图SSE
|
||||
- [ ] `src/views/system/LoggingView.vue` - 日志视图SSE
|
||||
- [ ] `src/pages/resource.vue` - 搜索进度SSE
|
||||
- [ ] `src/App.vue` - 背景图片轮换定时器
|
||||
- [ ] `src/utils/pwaStateManager.ts` - PWA状态保存定时器
|
||||
- [ ] `src/views/dashboard/AnalyticsMemory.vue` - 内存监控定时器
|
||||
- [ ] `src/views/dashboard/AnalyticsCpu.vue` - CPU监控定时器
|
||||
- [ ] `src/views/dashboard/AnalyticsSpeed.vue` - 速度监控定时器
|
||||
|
||||
## 🔍 功能验证测试
|
||||
|
||||
### 1. 基础功能测试
|
||||
在开发环境中：
|
||||
|
||||
```bash
|
||||
# 启动开发服务器
|
||||
npm run dev
|
||||
# 或
|
||||
yarn dev
|
||||
```
|
||||
|
||||
#### ✅ 初始化验证
|
||||
1. 打开浏览器控制台
|
||||
2. 查看是否有 "初始化后台优化工具..." 日志
|
||||
3. 运行 `window.debugBackground` 应该存在
|
||||
4. 运行 `debugBackground()` 查看定时器状态
|
||||
|
||||
#### ✅ SSE连接验证
|
||||
1. 打开用户通知 - 查看控制台SSE连接日志
|
||||
2. 打开系统消息页面 - 验证消息实时接收
|
||||
3. 打开日志页面 - 验证日志实时显示
|
||||
4. 进行搜索 - 验证进度条正常显示
|
||||
|
||||
#### ✅ 定时器验证
|
||||
1. 进入仪表盘页面
|
||||
2. 观察CPU、内存等数据是否正常刷新
|
||||
3. 运行 `debugBackground()` 查看定时器列表
|
||||
|
||||
### 2. 后台优化验证
|
||||
|
||||
#### ✅ 后台切换测试
|
||||
1. **准备工作**
|
||||
```javascript
|
||||
// 在控制台运行，开启详细日志
|
||||
localStorage.setItem('debug', 'true')
|
||||
```
|
||||
|
||||
2. **执行测试**
|
||||
- 确保应用在前台正常运行
|
||||
- 切换到其他应用（保持5-10秒）
|
||||
- 切换回PWA应用
|
||||
- 观察控制台日志
|
||||
|
||||
3. **预期结果**
|
||||
- 看到 "Background: 进入后台，暂停定时器" 日志
|
||||
- 看到 "SSE: 后台关闭连接" 日志
|
||||
- 回到前台时看到 "Background: 回到前台，恢复定时器"
|
||||
- 看到 "SSE: 前台恢复连接" 日志
|
||||
|
||||
#### ✅ 定时器暂停验证
|
||||
```javascript
|
||||
// 测试脚本：验证定时器在后台暂停
|
||||
function testBackgroundPause() {
|
||||
console.log('=== 前台状态 ===')
|
||||
const frontStatus = window.backgroundManager.getStatus()
|
||||
const frontTimers = window.backgroundManager.getTimersInfo()
|
||||
console.log('后台状态:', frontStatus.isBackground)
|
||||
console.log('运行中定时器:', frontTimers.filter(t => t.status === 'running').length)
|
||||
|
||||
// 模拟切换到后台（需要实际切换应用）
|
||||
console.log('请切换到其他应用，然后切换回来再运行 checkBackgroundStatus()')
|
||||
}
|
||||
|
||||
function checkBackgroundStatus() {
|
||||
console.log('=== 当前状态 ===')
|
||||
const status = window.backgroundManager.getStatus()
|
||||
const timers = window.backgroundManager.getTimersInfo()
|
||||
console.log('后台状态:', status.isBackground)
|
||||
console.log('暂停定时器:', timers.filter(t => t.status === 'paused').length)
|
||||
console.log('运行定时器:', timers.filter(t => t.status === 'running').length)
|
||||
console.table(timers)
|
||||
}
|
||||
|
||||
// 开始测试
|
||||
testBackgroundPause()
|
||||
```
|
||||
|
||||
### 3. 性能验证
|
||||
|
||||
#### ✅ 内存使用测试
|
||||
1. 打开Chrome DevTools -> Performance
|
||||
2. 开始录制性能
|
||||
3. 正常使用应用2-3分钟
|
||||
4. 切换到后台30秒
|
||||
5. 切换回前台继续使用1分钟
|
||||
6. 停止录制，查看内存使用图表
|
||||
|
||||
**预期结果**: 后台期间内存使用趋于平稳，无明显增长
|
||||
|
||||
#### ✅ 网络活动测试
|
||||
1. 打开Chrome DevTools -> Network
|
||||
2. 清空网络日志
|
||||
3. 切换到后台30秒
|
||||
4. 观察网络请求
|
||||
|
||||
**预期结果**: 后台期间无SSE连接，无定时API请求
|
||||
|
||||
## 🐛 故障排除
|
||||
|
||||
### 常见问题
|
||||
|
||||
#### 问题1: 控制台出现导入错误
|
||||
```
|
||||
Cannot resolve '@/composables/useBackgroundOptimization'
|
||||
```
|
||||
**解决方案**: 确保文件路径正确，检查组合函数文件是否存在
|
||||
|
||||
#### 问题2: 定时器没有被管理
|
||||
```javascript
|
||||
// 检查是否正确使用了优化的定时器
|
||||
debugBackground()
|
||||
// 如果看不到定时器，检查是否正确调用了 useDataRefresh
|
||||
```
|
||||
|
||||
#### 问题3: SSE连接无法重连
|
||||
```javascript
|
||||
// 检查SSE管理器状态
|
||||
window.sseManagerSingleton
|
||||
// 手动测试重连
|
||||
const manager = window.sseManagerSingleton.getManager('test-url')
|
||||
```
|
||||
|
||||
#### 问题4: 后台状态检测不准确
|
||||
```javascript
|
||||
// 检查页面可见性API
|
||||
console.log('document.hidden:', document.hidden)
|
||||
console.log('visibilityState:', document.visibilityState)
|
||||
```
|
||||
|
||||
### 调试命令速查
|
||||
|
||||
```javascript
|
||||
// 查看所有定时器状态
|
||||
debugBackground()
|
||||
|
||||
// 查看后台管理器状态
|
||||
window.backgroundManager.getStatus()
|
||||
|
||||
// 查看SSE管理器
|
||||
window.sseManagerSingleton
|
||||
|
||||
// 手动暂停所有定时器（测试用）
|
||||
window.backgroundManager.pauseAllTimers()
|
||||
|
||||
// 手动恢复所有定时器（测试用）
|
||||
window.backgroundManager.resumeAllTimers()
|
||||
|
||||
// 清理所有资源（测试用）
|
||||
window.backgroundManager.destroy()
|
||||
window.sseManagerSingleton.closeAllManagers()
|
||||
```
|
||||
|
||||
## 📊 性能基准
|
||||
|
||||
### 优化前 vs 优化后
|
||||
|
||||
| 指标 | 优化前 | 优化后 | 改善 |
|
||||
|------|--------|--------|------|
|
||||
| 后台SSE连接 | 5个常驻 | 0个 | 100% ↓ |
|
||||
| 后台定时器 | 8个运行 | 0个运行 | 100% ↓ |
|
||||
| 后台API请求/分钟 | 20+ | 0 | 100% ↓ |
|
||||
| 状态保存频率 | 30秒 | 60秒 | 50% ↓ |
|
||||
| 平均CPU使用(后台) | 中等 | 极低 | 80% ↓ |
|
||||
|
||||
## ✅ 最终验收标准
|
||||
|
||||
### 必须通过的测试
|
||||
1. **功能完整性**: 所有原有功能正常工作
|
||||
2. **后台优化**: 切换后台后资源消耗显著降低
|
||||
3. **恢复能力**: 回到前台后所有功能快速恢复
|
||||
4. **稳定性**: 长时间使用无内存泄漏
|
||||
5. **用户体验**: 切换过程无明显延迟或卡顿
|
||||
|
||||
### iOS设备测试
|
||||
1. 在iPhone/iPad上安装PWA
|
||||
2. 正常使用后切换到其他应用
|
||||
3. 等待10-30分钟后回到PWA
|
||||
4. 验证应用仍在运行且功能正常
|
||||
|
||||
**成功标准**: PWA应用后台存活时间比优化前延长3-5倍
|
||||
|
||||
## 🎯 部署建议
|
||||
|
||||
### 渐进式部署
|
||||
1. **第一阶段**: 部署核心优化工具和主要组件
|
||||
2. **第二阶段**: 应用剩余组件优化补丁
|
||||
3. **第三阶段**: 根据使用情况进行细节调优
|
||||
|
||||
### 监控建议
|
||||
- 部署后密切关注用户反馈
|
||||
- 监控应用崩溃率和性能指标
|
||||
- 定期检查优化效果是否持续
|
||||
|
||||
优化实施完成后，您的PWA应用在iOS设备上的后台生存能力将得到显著提升！
|
||||
Reference in New Issue
Block a user