前端性能优化之控制并发请求数量的理解

js异步队列的并发控制插件:

  • js-asyncpool
  • tiny-async-pool
  • 背景:大家在开发中或多或少会用到上面两个插件
  • 目的:理解一下这些插件做了什么事情,自己又该如何实现,为什么需要控制并发请求?

自己来实现一个并发请求函数concurrencyRequest(maxNum,urls),要求如下:

  • 要求最大并发数 maxNum
  • 每当有一个请求返回,就留下一个空位,可以增加新的请求
  • 所有请求完成后,结果按照urls里面的顺序依次打出(发送请求的函数可以直接使用fetch即可)

各大浏览器并发请求限制数量6-8(同一域名有效)

  1. Stalled(阻塞):也即是从TCP连接建立完成,到真正可以传输数据之间的时间差(过长的请求是被阻塞了,处在队列中等待tcp连接)
  2. DNS Lookup:域名解析时间
  3. Initial connection(初始化连接):TCP建立连接的三次握手时间
  4. Request sent(发送请求)
  5. Waiting(等待响应)
  6. Content Download(下载):收到响应的第一个字节,到接受完最后一个字节的时间,就是下载时间。下载HTTP响应的时间(包含头部和响应体)

简单代码实现(其实插件的源码写的比较好一点):

js 复制代码
// 并发请求函数
const concurrencyRequestTest = (poolLimit, urls, iteratorFn) => {
   return new Promise(resolve => {
       if (!urls || !urls.length) {
           resolve([])
       }
       let i = 0, count = 1, resArr = [];
       const request = async () => {
           /* 队列已经请求完 */
           if(i === urls.length) return
           let url = urls[i]
           i++;
           // const res = await fetch(url)
           const res = await iteratorFn(url)
           resArr.push(res)
           count++;
           // 已经执行完的请求数量
           if(count > urls.length) {
               resolve(resArr)
           }
           request()
   
       }
       const maxNum = Math.min(poolLimit, urls.length)
       for (let index = 0; index < maxNum; index++) {
           request()
       }
   })
}
疑问:既然浏览器已经对http并发请求个数有限制,为什么我们前端还需要自己限制?

我简单写了20个请求,在谷歌下面同时发起。

情况一:并行的请求最大http个数是6个

情况二:这里我node使用了http2,然后同样的代码20个请求可以同时进行

使用http2

原因在于浏览器限制的不是http请求个数,而是TCP连接个数。在http1.1的持久连接,多个请求建立一个TCP连接,按顺序返回,只能串行执行。所以1. 浏览器(谷歌)为每个域名最多同时维护 6 个 TCP 持久连接;但是http2一个域名只使用一个 TCP 长连接来传输数据,所以可以同时发送多个请求。

控制并发请求的必要性:

尽管HTTP/2已经允许并发请求,并且服务器和浏览器会在合适的情况下自动进行优化,但前端仍然需要关注并控制并发请求的数量,主要原因如下:

  1. 过多的请求同时进行时,可能会导致网络阻塞和资源竞争,从而降低页面加载速度和性能。通过在前端控制并发请求数量,可以确保页面中的关键资源优先加载,提高用户体验。
  2. 带宽限制: 尽管HTTP/2允许多路复用,但在某些情况下,客户端的带宽可能仍然是有限的。当并发请求过多时,可能会导致带宽过载,导致性能下降,甚至出现请求超时等问题。
  3. 服务器资源: 虽然HTTP/2减少了服务器和客户端之间的连接数量,但服务器仍然需要分配资源来处理请求。在高并发的情况下,服务器可能会面临负载过重的风险。因此,通过控制并发请求,可以避免服务器过载和性能下降。
  4. 请求优先级: HTTP/2允许为每个请求设置优先级,以指定请求的重要性。在某些情况下,一些请求可能比其他请求更重要。通过限制并发请求,可以更好地控制请求的优先级,确保重要的请求得到更快的响应。

因此,尽管HTTP/2已经改进了并发请求的处理能力,但前端仍然需要关注并控制并发请求数量,以确保最佳的性能和用户体验。在实际开发中,可以使用适当的技术和工具来限制并发请求,比如合并资源、延迟加载等,以提高网页的性能和加载速度。

相关推荐
杰九17 分钟前
【全栈】SprintBoot+vue3迷你商城(10)
开发语言·前端·javascript·vue.js·spring boot
Hopebearer_1 小时前
入门 Canvas:Web 绘图的强大工具
前端·javascript·es6·canva可画
m0_748254881 小时前
项目升级Sass版本或升级Element Plus版本遇到的问题
前端·rust·sass
WuwuwuwH_1 小时前
【问题解决】el-upload数据上传成功后不显示成功icon
前端·vue.js·elementui
就是个名称1 小时前
cesium相机
前端·3d
2401_897592642 小时前
星动纪元ERA-42:端到端原生机器人大模型的革命性突破
前端·机器人
李游Leo3 小时前
this、self、window、top 在 JavaScript 中的区别深入研究
前端
徐_三岁3 小时前
TypeScript 中的 object 和Object的区别
前端·javascript·typescript
我爱加班、、4 小时前
vue3表格数据分2个表格序号连续展示
前端·javascript·elementui
小林熬夜学编程4 小时前
【Python】第四弹---深入理解Python控制流:从顺序到循环的全面解析
开发语言·前端·python·算法