cosmo/frontend/PERFORMANCE_OPTIMIZATION.md

页面加载速度优化方案

当前加载流程分析

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 响应

当前最快优化方案

删除冗余日志 + 延迟加载非关键组件：