303 lines
7.8 KiB
Markdown
303 lines
7.8 KiB
Markdown
# 网络诊断功能增强完成报告
|
||
|
||
## 📋 任务概述
|
||
|
||
**目标**: 增强网络诊断功能，添加预览文件加载速度检测，帮助精准定位预览文件加载慢的问题
|
||
|
||
**完成时间**: 2025-12-22
|
||
|
||
**部署状态**: ✅ 已部署到影子系统(5320)
|
||
|
||
---
|
||
|
||
## ✨ 新增功能
|
||
|
||
### 1. 预览图片加载测试
|
||
- **功能**: 测试真实的3D场景预览图片加载速度
|
||
- **检测指标**:
|
||
- 图片加载时间（秒）
|
||
- 文件大小（MB）
|
||
- 下载速度（MB/s）
|
||
- **警告阈值**: 加载时间 > 3秒
|
||
|
||
### 2. 预览视频加载测试
|
||
- **功能**: 测试主图视频/安装视频/种草视频的加载性能
|
||
- **检测指标**:
|
||
- 视频元数据加载时间（首字节时间）
|
||
- 文件大小（MB）
|
||
- 视频URL
|
||
- **警告阈值**: 元数据加载时间 > 5秒
|
||
|
||
### 3. 音频文件加载测试
|
||
- **功能**: 测试音乐素材的加载性能
|
||
- **检测指标**:
|
||
- 音频元数据加载时间
|
||
- 文件大小（MB）
|
||
- 音频URL
|
||
- **警告阈值**: 元数据加载时间 > 3秒
|
||
|
||
### 4. DNS和连接测试
|
||
- **功能**: 测试网络连接的底层性能
|
||
- **检测指标**:
|
||
- DNS解析时间（ms）
|
||
- TCP连接时间（ms）
|
||
- 首字节时间/TTFB（ms）
|
||
- 总耗时（ms）
|
||
- **警告阈值**: 总耗时 > 1000ms
|
||
|
||
---
|
||
|
||
## 🔧 技术实现
|
||
|
||
### 测试顺序
|
||
1. DNS和连接测试（基础网络性能）
|
||
2. 下载测速（通用下载速度）
|
||
3. 上传测速（通用上传速度）
|
||
4. 存储连通性（MinIO S3连接）
|
||
5. **预览图片加载**（新增）
|
||
6. **预览视频加载**（新增）
|
||
7. **音频文件加载**（新增）
|
||
|
||
### 关键技术点
|
||
|
||
#### 1. 使用Performance API测量加载时间
|
||
```typescript
|
||
const startTime = performance.now()
|
||
// 加载资源
|
||
const endTime = performance.now()
|
||
const loadTime = endTime - startTime
|
||
```
|
||
|
||
#### 2. 使用Resource Timing API获取详细网络时序
|
||
```typescript
|
||
const entries = performance.getEntriesByType('resource') as PerformanceResourceTiming[]
|
||
const entry = entries.find(e => e.name.includes('/api/network-status'))
|
||
|
||
if (entry) {
|
||
dnsTime = entry.domainLookupEnd - entry.domainLookupStart
|
||
connectTime = entry.connectEnd - entry.connectStart
|
||
ttfb = entry.responseStart - entry.requestStart
|
||
}
|
||
```
|
||
|
||
#### 3. 测试真实素材文件
|
||
- 从API获取真实的素材数据
|
||
- 测试实际的预览URL
|
||
- 模拟用户真实的加载场景
|
||
|
||
#### 4. 状态分类
|
||
- **success**: 测试成功，性能良好
|
||
- **warning**: 测试成功但性能较差（黄色警告）
|
||
- **error**: 测试失败（红色错误）
|
||
- **testing**: 正在测试中
|
||
|
||
---
|
||
|
||
## 📊 诊断报告格式
|
||
|
||
### 复制结果包含的信息
|
||
|
||
```
|
||
=== 网络诊断报告 ===
|
||
时间: 2025-12-22 14:30:00
|
||
浏览器: Mozilla/5.0 ...
|
||
当前URL: http://192.168.58.20:5320
|
||
|
||
=== 测试结果 ===
|
||
DNS和连接测试: ✓ 成功
|
||
总耗时: 150ms
|
||
详细信息: DNS解析: 10ms, TCP连接: 20ms, 首字节时间: 50ms, 总耗时: 150ms
|
||
|
||
下载测速: ✓ 成功
|
||
下载速度: 15.23 MB/s
|
||
|
||
上传测速: ✓ 成功
|
||
上传速度: 8.45 MB/s
|
||
|
||
存储连通性: ✓ 成功
|
||
存储服务连接正常
|
||
|
||
预览图片加载: ⚠ 警告
|
||
加载时间: 3.50秒 (2.15 MB/s)
|
||
详细信息: 总耗时: 3500ms, 文件大小: 7.52MB, URL: https://...
|
||
|
||
预览视频加载: ✓ 成功
|
||
元数据加载: 2.30秒 (文件: 15.20MB)
|
||
详细信息: 首字节时间: 2300ms, 总耗时: 2300ms, 文件大小: 15.20MB, URL: https://...
|
||
|
||
音频文件加载: ✓ 成功
|
||
元数据加载: 1.20秒 (文件: 5.50MB)
|
||
详细信息: 首字节时间: 1200ms, 总耗时: 1200ms, 文件大小: 5.50MB, URL: https://...
|
||
|
||
=== 网络环境信息 ===
|
||
在线状态: 在线
|
||
连接类型: 4g
|
||
下行速度: 10 Mbps
|
||
RTT延迟: 50 ms
|
||
|
||
=== 性能分析 ===
|
||
⚠ 预览图片加载较慢或失败，可能影响用户体验
|
||
|
||
提示: 请将此报告提供给技术支持以便快速定位问题
|
||
```
|
||
|
||
---
|
||
|
||
## 🎯 使用方法
|
||
|
||
### 1. 打开网络诊断
|
||
- 点击右上角用户头像
|
||
- 选择"网络诊断"菜单项
|
||
|
||
### 2. 开始诊断
|
||
- 点击"开始诊断"按钮
|
||
- 等待所有测试完成（约10-20秒）
|
||
|
||
### 3. 查看结果
|
||
- 绿色✓：测试成功，性能良好
|
||
- 黄色⚠：测试成功但性能较差
|
||
- 红色✗：测试失败
|
||
|
||
### 4. 复制报告
|
||
- 点击"复制结果"按钮
|
||
- 将报告提供给AI或技术支持
|
||
- AI可以根据详细的性能指标精准定位问题
|
||
|
||
---
|
||
|
||
## 🔍 问题诊断指南
|
||
|
||
### 预览图片加载慢
|
||
**可能原因**:
|
||
1. S3存储访问慢（检查存储连通性测试）
|
||
2. 图片文件过大（检查文件大小）
|
||
3. 网络带宽不足（检查下载测速）
|
||
4. DNS解析慢（检查DNS解析时间）
|
||
|
||
**解决方案**:
|
||
- 如果在内网，切换到内网地址(192.168.58.20)
|
||
- 优化图片大小和格式
|
||
- 使用CDN加速
|
||
- 检查MinIO配置
|
||
|
||
### 预览视频加载慢
|
||
**可能原因**:
|
||
1. 视频文件过大
|
||
2. 转码未完成（检查videoProcessingStatus）
|
||
3. 网络带宽不足
|
||
4. 首字节时间过长
|
||
|
||
**解决方案**:
|
||
- 等待视频转码完成
|
||
- 使用压缩后的预览视频
|
||
- 优化视频编码参数
|
||
- 检查服务器性能
|
||
|
||
### 音频文件加载慢
|
||
**可能原因**:
|
||
1. 音频文件过大
|
||
2. 存储访问慢
|
||
3. 网络延迟高
|
||
|
||
**解决方案**:
|
||
- 压缩音频文件
|
||
- 使用更高效的音频格式
|
||
- 检查存储服务性能
|
||
|
||
---
|
||
|
||
## 📝 修改的文件
|
||
|
||
### 1. `components/NetworkDiagnoseModal.tsx`
|
||
**修改内容**:
|
||
- 扩展`TestResult`接口，添加新的测试类型和详细信息字段
|
||
- 新增`testPreviewImageLoad()`函数 - 预览图片加载测试
|
||
- 新增`testPreviewVideoLoad()`函数 - 预览视频加载测试
|
||
- 新增`testPreviewAudioLoad()`函数 - 音频文件加载测试
|
||
- 新增`testDNSAndConnection()`函数 - DNS和连接测试
|
||
- 更新`startDiagnose()`函数 - 按顺序执行所有测试
|
||
- 增强`copyResults()`函数 - 生成更详细的诊断报告
|
||
- 更新UI显示 - 支持warning状态，显示详细信息
|
||
|
||
**代码行数**: 约700行（新增约300行）
|
||
|
||
---
|
||
|
||
## ✅ 测试验证
|
||
|
||
### 部署信息
|
||
- **目标环境**: 影子系统
|
||
- **访问地址**: http://192.168.58.20:5320
|
||
- **部署时间**: 2025-12-22
|
||
- **构建状态**: ✅ 成功
|
||
|
||
### 功能验证清单
|
||
- [x] DNS和连接测试正常运行
|
||
- [x] 下载测速正常运行
|
||
- [x] 上传测速正常运行
|
||
- [x] 存储连通性测试正常运行
|
||
- [x] 预览图片加载测试正常运行
|
||
- [x] 预览视频加载测试正常运行
|
||
- [x] 音频文件加载测试正常运行
|
||
- [x] 复制结果功能正常
|
||
- [x] 警告状态正确显示（黄色背景）
|
||
- [x] 详细信息正确显示（DNS、TTFB等）
|
||
|
||
---
|
||
|
||
## 🎉 预期效果
|
||
|
||
### 1. 精准定位问题
|
||
通过详细的性能指标，可以快速定位：
|
||
- 是网络问题还是服务器问题
|
||
- 是DNS问题还是带宽问题
|
||
- 是文件过大还是存储慢
|
||
|
||
### 2. 方便AI分析
|
||
复制的诊断报告包含：
|
||
- 完整的测试结果
|
||
- 详细的性能指标
|
||
- 网络环境信息
|
||
- 性能分析建议
|
||
|
||
AI可以根据这些信息快速给出解决方案。
|
||
|
||
### 3. 提升用户体验
|
||
- 用户可以自助诊断网络问题
|
||
- 技术支持可以快速定位问题
|
||
- 减少问题排查时间
|
||
|
||
---
|
||
|
||
## 📌 注意事项
|
||
|
||
1. **测试时间**: 完整测试需要10-20秒，请耐心等待
|
||
2. **网络消耗**: 测试会下载真实的预览文件，消耗一定流量
|
||
3. **测试准确性**: 测试结果受当前网络状况影响，建议多次测试
|
||
4. **警告阈值**: 当前阈值是根据经验设置的，可能需要根据实际情况调整
|
||
|
||
---
|
||
|
||
## 🚀 后续优化建议
|
||
|
||
1. **添加历史记录**: 保存诊断历史，对比不同时间的性能
|
||
2. **自动诊断**: 在页面加载慢时自动触发诊断
|
||
3. **性能监控**: 持续监控预览文件加载性能
|
||
4. **智能建议**: 根据诊断结果自动给出优化建议
|
||
5. **批量测试**: 测试多个预览文件，获得更准确的平均值
|
||
|
||
---
|
||
|
||
## 📞 技术支持
|
||
|
||
如果遇到问题，请：
|
||
1. 运行网络诊断
|
||
2. 复制完整的诊断报告
|
||
3. 提供给AI或技术支持
|
||
4. 说明具体的问题现象
|
||
|
||
---
|
||
|
||
**报告生成时间**: 2025-12-22
|
||
**报告生成人**: Kiro AI Assistant
|