mirror of
https://github.com/jxxghp/MoviePilot-Frontend.git
synced 2026-09-07 08:46:40 +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
@@ -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
-1
@@ -1,6 +1,6 @@
|
|||||||
{
|
{
|
||||||
"name": "moviepilot",
|
"name": "moviepilot",
|
||||||
"version": "2.6.2",
|
"version": "2.6.3",
|
||||||
"private": true,
|
"private": true,
|
||||||
"type": "module",
|
"type": "module",
|
||||||
"bin": "dist/service.js",
|
"bin": "dist/service.js",
|
||||||
|
|||||||
@@ -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
@@ -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倍
|
|
||||||
|
|
||||||
这些补丁可以在有时间时逐步应用，每个都是独立的优化，不会相互影响。
|
|
||||||
@@ -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