请求合并适合首屏加载阶段存在大量独立小接口的场景，但必须先确认瓶颈确实在网络握手开销而非后端处理耗时。
先说结论：请求合并能减少 HTTP 握手开销，但会增加单个请求的等待时间和后端聚合复杂度，不建议盲目使用。
- 先定位：通过浏览器开发者工具确认是否真的存在大量串行或并发小请求阻塞渲染。
- 先做：优先优化缓存策略和接口粒度，再考虑引入 GraphQL 或 BFF 层进行物理合并。
- 再验证：对比合并前后的首屏加载时间（FCP）和总请求数，确保没有因 payload 过大导致延迟增加。
瓶颈定位与诊断
在实施合并前，需通过浏览器开发者工具确认请求瀑布流。若发现大量小接口串行加载或并发数触及浏览器上限（HTTP/1.1 同域名通常限制 6 个），才考虑合并。
检查步骤：
- 打开页面，按 F12 进入开发者工具，切换到 Network 标签。
- 刷新页面，观察 Waterfall 列，检查是否有大量请求处于排队（Queued）状态。
- 统计首屏独立 API 请求数量，若超过 20 个且多为小数据量接口，通常值得优化。
后端聚合层实现方案
前端代码调整较少，核心在于后端 BFF 层或聚合接口的实现。以下提供 Node.js 实现示例，包含并发调用、超时控制及缓存头设置。
1. Node.js 聚合接口示例
const express = require('express');
const axios = require('axios');
const app = express();app.post('/api/dashboard', async (req, res) => {const timeout = 2000; // 单个下游服务超时设置try {// 使用 Promise.all 并发调用下游服务，避免串行等待const [userRes, orderRes] = await Promise.all([axios.get('http://user-service/info', { timeout }),axios.get('http://order-service/list', { timeout })]);// 设置缓存策略：公共缓存 5 分钟res.setHeader('Cache-Control', 'public, max-age=300');res.setHeader('Content-Type', 'application/json');// 部分失败降级处理示例res.json({user: userRes.data,orders: orderRes.data,success: true});} catch (error) {// 记录错误日志，返回降级数据console.error('Aggregation error:', error.message);res.status(500).json({ success: false, message: 'Partial data unavailable' });}
});app.listen(3000);2. GraphQL Schema 定义示例
若使用 GraphQL，可通过 Schema 精确控制字段，避免过度获取：
type Dashboard {user: Userorders: [Order]
}type User {id: ID!name: Stringavatar: String
}type Query {dashboard: Dashboard
}验证与监控
合并后需对比实际加载性能，而非仅看请求数。
检查点：
- Network 面板：确认总请求数下降，且 DOMContentLoaded 时间提前。
- Performance 面板：记录页面加载，查看 Main 线程是否有因解析过大 JSON 导致的长时间阻塞。
- 后端监控：观察聚合接口的 P99 耗时，确保下游某个服务慢不会拖垮整体响应（需配合上述超时设置）。
若合并后首屏时间（FCP）无明显优化甚至变慢，说明序列化开销或等待最慢接口的时间超过了节省的握手时间，应回滚方案。
常见风险与规避
1. 过度合并导致 Payload 过大
前端仅需列表字段却返回全部详情会增加传输时间。支持字段筛选（如 GraphQL 的 query 选择）很重要。
2. 缓存穿透与失效
合并接口使得缓存粒度变粗。例如用户信息和订单信息合并，当只有订单更新时，用户信息的缓存也被迫失效。建议设计更细粒度的缓存键或采用客户端缓存合并。
3. 后端 N+1 与雪崩
在聚合层实现时，务必在内部使用并发调用（如示例中的 Promise.all），并设置超时熔断。避免一个下游服务故障导致整个页面不可用。
4. 调试复杂度增加
合并后单个接口失败可能导致整个页面数据缺失。需设计部分失败处理机制，例如在返回体中标记哪些子查询失败，让前端能降级展示。
原文链接：https://www.zjcp.cc/ask/10977.html