49 lines
1.2 KiB
Markdown
49 lines
1.2 KiB
Markdown
|
# 页面加载速度优化方案
|
|||
|
|
|
|||
|
|
## 当前加载流程分析
|
|||
|
|
|
|||
|
|
1. **数据获取顺序**：
|
|||
|
|
- useDataCutoffDate hook 获取截止日期
|
|||
|
|
- 等待截止日期返回
|
|||
|
|
- useSpaceData hook 获取天体位置数据
|
|||
|
|
- 渲染 3D 场景
|
|||
|
|
|
|||
|
|
2. **潜在优化点**：
|
|||
|
|
|
|||
|
|
### 优化1：并行加载数据（推荐）
|
|||
|
|
当前是串行加载（先获取日期，再获取位置），可以改为并行或使用默认日期。
|
|||
|
|
|
|||
|
|
### 优化2：减少不必要的日志输出
|
|||
|
|
大量 console.log 会影响性能。
|
|||
|
|
|
|||
|
|
### 优化3：延迟加载非关键组件
|
|||
|
|
- InterstellarTicker（音效）
|
|||
|
|
- MessageBoard（留言板）
|
|||
|
|
- BodyDetailOverlay（详情覆盖层）
|
|||
|
|
|
|||
|
|
### 优化4：优化 API 响应
|
|||
|
|
后端可以：
|
|||
|
|
- 减少返回字段
|
|||
|
|
- 只返回活跃天体
|
|||
|
|
- 启用 gzip 压缩
|
|||
|
|
|
|||
|
|
### 优化5：前端缓存
|
|||
|
|
- 使用 React Query 或 SWR 缓存 API 响应
|
|||
|
|
- 使用 localStorage 缓存最近的数据
|
|||
|
|
|
|||
|
|
## 实施建议
|
|||
|
|
|
|||
|
|
### 立即可做（不需要大改）：
|
|||
|
|
1. ✅ 删除大量 console.log
|
|||
|
|
2. ✅ 使用 lazy loading 加载非关键组件
|
|||
|
|
3. ✅ 添加骨架屏提升体验
|
|||
|
|
|
|||
|
|
### 需要架构调整：
|
|||
|
|
1. 重构数据获取流程（使用 React Query）
|
|||
|
|
2. 实现前端缓存策略
|
|||
|
|
3. 优化后端 API 响应
|
|||
|
|
|
|||
|
|
## 当前最快优化方案
|
|||
|
|
|
|||
|
|
删除冗余日志 + 延迟加载非关键组件：
|