缓存
每一个不必要的 API 调用，都是对性能的“犯罪”。
-
浏览器缓存：合理使用
Cache-Control header浏览器缓存 -
客户端缓存：把获取到的数据存在 context、Redux，或使用 React Query / TanStack Query，不要反复请求同样的东西。
-
CDN：如果是静态内容，就交给 CDN
使用防抖与节流
输入框输入字符调用接口使用
- 防抖（Debounce）：等待用户停止输入（300–500ms）后再发起请求。
- 节流（Throttle）：对于滚动加载等场景，限制请求频率（每隔 X ms 执行一次）。
批量处理请求
- 如果后端支持，将多个查询合并为一次请求
- 使用 GraphQL，只取你真正需要的数据，一次 payload 解决
- 至少将相似请求合并分组
后台刷新
并不是所有 API 调用都需要阻塞页面渲染
- 先渲染已有数据
- 然后在后台静默刷新数据
- 只更新变化的部分，而不是整个页面
Instagram、Twitter、Medium 等平台使用
失败以后如何进行处理
- 展示缓存的或上一次成功的数据
- 友好提示，并提供重试机制
- 实现指数退避策略，别在服务器已经崩溃时还不断重试
前端进行监控
不要等后端监控面板报警才发现问题。
使用前端监控工具（如 Sentry、LogRocket、Datadog RUM 等）来跟踪：
- API 错误率
- 延迟
- 重试次数
后端协作
有时候，问题不在前端。
如果一个页面需要发出 10 个 API 请求才能渲染完，那肯定不合理。这时要推动后端改进 API 设计：
- 为前端场景定制接口
- 支持数据进行聚合处理
- 提供更合理的限流和缓存策略
