前端高并发请求该怎么做？手摸手做实践

相信大家或多或少都遇到过前端高并发的场景，需要发送大量的http请求，如果直接将所有的请求都放入浏览器queue中排队的话，势必会造成浏览器卡顿或者崩溃，这时候就需要一种机制来做控制。

模拟实现

假设场景：需要发送100个请求，每个请求的时间不固定。

1、简单的前端请求

js

复制代码

const fetchData = () => { fetch('http://127.0.0.1:3000').then(res => { return res }) } for (let i = 0; i < 100; i++) { fetchData() }

2、简单启动个服务

js

复制代码

const http = require('http') const server = http.createServer((req, res) => { // 简单cors res.writeHead(200, { 'Content-Type': 'text/plain', 'Access-Control-Allow-Origin': '*' }) // 0~1s 随机时间 setTimeout(() => { res.end('Hello World!') }, Math.random() * 1000) }) server.listen(3000, () => { console.log('Server is running on port 3000'); })

正常不做控制

发动机点火！！！

可以看到后面的请求 Stalled 时间比较长了，已经达到8秒，说明有大量的请求在queue中排队等待sent，会阻塞后续一些重要的请求，可能导致超时失败等问题。由于我们模拟请求数量不多且接口数据量小，所以浏览器并没有出现崩溃的情况，如果数量和数据量上去了，卡顿或崩溃的情况势必会发生！

串行控制

1、逐条发送

稍微改造一下前端代码

js

复制代码

const fetchData = async () => { await fetch('http://127.0.0.1:3000').then(res => { return res }) } const sent = async () => { for (let i = 0; i < 100; i++) { await fetchData() } }

启动~~~

从图中可以看出请求是一条发送完成才会接着下一条发送，上面的时间看板显示请求是在一条线上的，因为用了keep-alive，复用同一条TCP链接，超长的 stalled 已经不存在了，但是这么请求的效率显然太慢了。

2、分组发送

将五个请求分为一组，一组接着一组串行发送。这个“五”是怎么怎么得出来的呢，chrome默认限制同时最多开启六条TCP链接，所以我将其分为五条一组，留一条处理别的请求。

改造一下请求代码

js

复制代码

const sent = async () => { for (let i = 0; i < 100; i+= 5) { // 分组执行 const exec = [ fetchData(i), fetchData(i + 1), fetchData(i + 2), fetchData(i + 3), fetchData(i + 4) ] await Promise.all(exec) } }

再次启动~~~

可以看出请求确实是按照五条一组的方式进行发送了，速度也比之前逐条发送快了不少，但是从时间看板上显示一组中有些请求快有些请求慢，需要等到最慢的请求完成了才会发送下一组。

如图中所示，如果每组中画红框这些时间也能利用起来，并发请求效率又将上升一个层级。

并发控制

我们能不能像控制一个执行队列一样，控制队列中执行数量也就是队列长度，每当有一条执行完成时出队，同时入队下一条，从而充分利用开启的每一条TCP链接。

我们将使用一个叫 p-limit 的库，源码行数不多，感兴趣的可以去看看，核心思路跟我们说的维护一个执行队列差不多。

安装

bash

复制代码

npm install p-limit

改造一下请求代码

js

复制代码

import PLimit from 'p-limit' // 限制五条并发 const pLimit = PLimit(5) const execList = [] const sent = async () => { for (let i = 0; i < 100; i++) { execList.push(pLimit(fetchData)) } await Promise.all(execList) }

跑来起验证效果~~~~

至此达到我们最终想要的效果，一个可控的并发请求，即能控制并发数也不会出现超长的 stalled 阻塞后续请求。

总结

1、高并发请求不做限制时，会导致后续请求阻塞，甚至浏览器卡顿或崩溃

2、串行逐条发送，并发请求慢，整体耗时太长

3、串行五条一组发送，还可以进一步提升，更高效的利用TCP链接空闲时间

4、并发控制，目前较好的处理方式

如果大家有更好的方式的话可以分享出来！