主题
React 性能优化
React 应用如何消除数据请求瀑布并设计请求缓存？
请求优化的核心是识别依赖关系，让无依赖请求并行，并用缓存、取消和失效策略保持正确性。
面试官想考什么
- 什么是请求瀑布？ 考察网络链路意识。
- 哪些请求可以并行？ 考察依赖图建模。
- 缓存多久和何时失效如何决定？ 考察一致性取舍。
- 如何避免旧请求覆盖新结果？ 考察异步正确性。
一句话回答
text
先画请求依赖图，把无依赖请求并行化，再通过请求去重、缓存、取消和精确失效减少等待，同时保证用户和租户数据隔离。面试回答详解
1. 请求瀑布
text
页面请求 -> 父组件请求 -> 子组件请求 -> 孙组件请求把所有请求都放在多个 useEffect 中，常会让渲染、hydration 和网络请求逐层等待。
2. 并行策略
- 用
Promise.all或查询层并行获取无依赖数据。 - 对强依赖数据保留顺序，避免为了并行制造错误。
- 让数据读取靠近使用方，同时避免重复请求。
- 使用 Suspense 或 loading 边界改善渐进展示。
3. 缓存策略
缓存 key 应包含资源、参数、用户/租户和版本维度；定义 stale time、失效动作、重试和错误恢复。mutation 后可以精确更新、乐观更新回滚或失效重取。
4. 竞态和安全
取消旧请求、使用请求序号或 key 校验，防止旧响应覆盖新输入。用户数据不能因为共享缓存或预取跨身份泄露。
可直接背诵的 30 秒回答
text
我会先画出请求依赖图，能并行的请求用 Promise.all 或查询层并行，强依赖保持顺序；避免所有请求都在 useEffect 中层层触发。缓存 key 要包含参数和用户/租户维度，定义新鲜度和 mutation 失效策略，快速输入时用取消或请求序号防止旧响应覆盖新结果。扩展知识
请求优化模型
text
依赖图 -> 并行化 -> 去重 -> 缓存 -> 取消 -> 失效 -> 监控面试官追问链
追问一：请求越并行越好吗？
- 考察点：是否理解数据依赖和资源竞争。
- 回答方向：无依赖请求可以并行，但要考虑数据库压力、带宽、权限和关键路径，不应无限并发。
追问二：缓存如何避免跨用户泄露？
- 考察点：安全边界。
- 回答方向：缓存 key 纳入身份/租户，敏感数据不使用共享公共缓存，服务端再次校验授权并测试切换身份场景。
追问三：为什么请求少了但页面更慢？
- 考察点：整体性能意识。
- 回答方向：可能单请求变大、关键请求被延迟、序列化变重或缓存命中下降，要看关键路径总耗时而非请求数量。