你知道浏览器并发请求的最大数量和机制吗？

本文已参与「新人创作礼」活动，一起开启掘金创作之路。 点击查看活动详情

写在前面

由于业务的需要，我们在A页面同时发起了多个请求，此时突然跳转到B页面，由于前面的请求大部分都还在pending中，导致B页面的请求也要阻塞很久。那么浏览器（特指chrome）发起请求的机制是怎么算的，最大的并发数又是多少呢？

6

6是什么，什么是6，浏览器最大的并发请求数就是6，同时发起多个请求，处理中的请求只有6个，未处理完，后面的请求始终在pending状态，只有在前面的请求响应了，后面的请求才会开始处理（前面释放一个，后面进来一个）

几个测试

我们先准备一堆响应时长不等的请求，为了更直观，请求的数字就代表响应的时间，在A页面发起数量不等的请求后，直接跳转到B页面，B页面只有一个直接响应的请求，我们看B页面的请求什么时候会处理

axios.get("/api/list5")
axios.get("/api/list9")
axios.get("/api/list3")
axios.get("/api/list3")
axios.get("/api/list4")
setTimeout(() => {
    this.$router.push({
        path: "/b",
    });
    // b页面一加载就请求list接口，直接返回
}, 1000);

发现同时发6个以下的请求，B页面的请求是不会阻塞的，直接响应

再增加A页面的请求数，B页面的请求就开始阻塞了，那会一直等到A页面全部请求完才开始处理B页面的吗？也不是的，B页面的请求只等待了4s，这是为什么呢

axios.get("/api/list5")
axios.get("/api/list9")
axios.get("/api/list3")
axios.get("/api/list3")
axios.get("/api/list4")
axios.get("/api/list4")
axios.get("/api/list1")
axios.get("/api/list1")

this.$router.push({
    path: "/b",
});

根据响应时间，很显然A页面的593344一直占用着请求数，直到两个3s的请求释放资源，2个1s的请求才进入处理，而等到这2个1s的请求也处理完，B页面的请求才得到响应

再来一个极端点的例子，A页面的请求不仅会阻塞B页面的，A页面自己靠后的请求它也不放过

axios.get("/api/list9")
axios.get("/api/list9")
axios.get("/api/list9")
axios.get("/api/list9")
axios.get("/api/list9")
axios.get("/api/list9")
axios.get("/api/list9")
axios.get("/api/list1")
axios.get("/api/list1")

this.$router.push({
    path: "/b",
});

可以看到，A页面的两个1s的请求，硬生生的等了9s才开始进入请求池

结论和注意事项

由此可以得出结论

1. chrome最大请求并发处理数量是6个
2. 会根据请求的时间进行排队
3. 处理完的请求释放资源，排队的依次进入处理

那么根据以上结论

1. 如果确实有很多请求，尽量先发起请求时间短的
2. 有切换页面交互的，切换之前要取消等待的请求