背景

有的时候我们需要批量调用接口来获取之前用户批量上传的文件数据，对上传的文件数据进行分析，如果文件数据有1W条，那就要调用1W次接口，那怎么对请求接口优化？

2 浏览器默认网络请求并发限制

1. 核心规则

浏览器对同一域名（同域）下的网络请求存在并发连接数限制，这是浏览器的原生安全机制，目的是防止单个客户端对服务器造成过大压力，同时避免客户端自身资源耗尽。

2. 具体并发数值
3. 大多数现代浏览器（Chrome、Firefox、Edge、Safari）的默认同域并发连接数为 6 个（HTTP/1.1、HTTP/1.0 协议）；
4. 部分旧版浏览器可能为 4 个，无统一的旧版标准，现已逐步被淘汰；

3. 注意

这个限制是按域名隔离的，不同域名的请求不会互相占用并发连接数。例如：向 a.com 发送请求最多同时 6 个，向 b.com 发送请求也最多同时 6 个，两者互不干扰。

3 优化手段

发送 1W 次请求不能直接批量触发（会被浏览器并发限制阻塞，且可能触发服务器限流、前端内存溢出），可以通过「减少请求数量」「控制请求并发」「优化请求链路」等优化方案

0. counter(h2) 减少请求总数量（最优解，从根源上优化）

这是最有效的优化方式，能直接降低前端和服务器的处理压力，优先采用。

1. 请求合并（批量接口改造）

• 核心思路：与后端协商，将多个零散请求合并为一个批量请求，前端一次性提交 1W 个请求的相关参数（如 ID 列表、数据项），后端批量处理后返回汇总结果，前端再在本地拆分处理数据。
• 示例场景：1W 次查询用户信息（按用户 ID），改为前端提交 1W 个用户 ID 的数组，后端返回 1W 条用户信息的数组，仅需 1 次请求即可完成。
• 优势：彻底规避浏览器并发限制，减少网络握手、传输开销，大幅提升处理效率。

2. 数据懒加载 / 按需加载

• 核心思路：不一次性发送 1W 次请求，而是根据用户需求、页面滚动、业务场景分批触发请求（如仅加载当前视图可见数据，后续数据按需加载）。
• 示例场景：1W 条商品数据请求，仅在用户滚动页面时，加载当前窗口的 20 条数据，后续滚动再触发下一批请求。
• 优势：分散请求压力，减少前端初始加载时间，提升用户体验。

0. counter(h2) 控制请求并发（无法减少请求数时，有序调度请求）

若无法与后端协商合并接口或者后端处理起来服务器上有限制等，需通过前端控制请求并发，避免请求阻塞，提升整体处理效率，核心方案是「并发池（节流并发）」。

1. 核心原理
2. 限制同时发送的请求数（如设置并发池大小为 10，不超过浏览器同域并发限制的倍数，避免无效排队），当某个请求完成（成功 / 失败）后，再从待请求队列中取出下一个请求补充，直到所有 1W 次请求处理完毕。
3. 实现思路
4. 准备待请求队列：将 1W 次请求的参数、接口地址等整理为数组队列；
5. 创建并发池：初始化指定数量的请求（如 10 个），启动执行；
6. 队列补位：每完成一个请求，就从队列中取出下一个请求执行，直到队列为空；
7. 错误处理：单独捕获单个请求的错误，避免影响整个并发池的执行。

0. counter(h2) . counter(h3) 伪代码示例

0. counter(h2) . counter(h3) 内存示意图

0. counter(h2) . counter(h3) 实际演练

这里使用koa作为后端服务器，vue3作为前端页面。

效果图：

vue代码：

utils/request_fn.js

koa服务代码：

0. counter(h2) 优化请求链路与配置（提升单个请求效率）

1. 使用 HTTP/2 或 HTTP/3 协议
2. 优势：HTTP/2 支持多路复用、头部压缩、服务器推送，单个 TCP 连接即可承载大量请求，无需担心浏览器同域并发限制（6 个），大幅提升批量请求的传输效率；HTTP/3 基于 QUIC 协议，进一步优化了丢包重传、连接建立速度，适合大规模请求场景。
3. 注意：需要服务器端支持 HTTP/2/3（如 Nginx、Apache 配置开启），前端无需额外修改代码，仅需保证接口地址为 https（HTTP/2 通常基于 HTTPS 部署）。
4. 开启请求压缩（gzip/brotli）
5. 核心思路：前端请求时通过 Accept-Encoding: gzip, deflate, br 告知服务器支持压缩，服务器将响应数据压缩后返回，前端浏览器自动解压。
6. 优势：减少网络传输的数据量（通常可压缩 60%-80%），提升请求响应速度，尤其适合批量请求返回大量数据的场景。
7. 注意：需要服务器端配置开启压缩（如 Nginx 开启 gzip），前端无需额外开发。

4 总结

1. 浏览器同域默认并发限制（HTTP/1.1）：6 个，HTTP/2 无此限制，不同域名并发数互不干扰；
2. 1W 次请求优化优先级：请求合并 > 并发池控制 > 协议 / 压缩优化 > 缓存；
3. 核心原则：尽量减少请求总数，无法减少时有序控制并发，避免给前端和服务器带来过大压力。