一线大厂高级前端编写,前端初中阶面试题,帮助初学者应聘,需要联系微信:javadudu

超简单的前端http异步请求并发控制

http并发请求

浏览器的HTTP请求数量是有限制的,具体数量取决于不同的浏览器和版本。一般来说,浏览器对同一域名下的并发请求数量有限制,这个限制通常在 6-8 个之间,但也可能更多或更少。

function loadSceneNode (sceneNode, pageData) {
    ...
    for (let i = 0; i < list1.length; i++) {
        fileLoader.loadFile(list1[i]).then(() => {})
    }
    for (let i = 0; i < list2.length; i++) {
        fileLoader.loadFile(list2[i]).then(() => {})
    }
    ...
}

假设有以上代码;因为http请求是异步的,所以上述代码会同时发送很多请求,即并发

超简单的前端http异步请求并发控制

可以看到请求的起点都是同一时间,然后灰色是等待执行http请求,由于浏览器本身的优化,会控制并发数量,然后一个请求成功了,后面排队的请求会接上去

http并发控制

如何控制并发数呢,很简单,只需要加入一些判断就可实现

async function loadSceneNode (sceneNode, pageData) {
    ...
    let promiseArray = [];
    
    for (let i = 0; i < list1.length; i++) {
        let promise = fileLoader.loadFile(list1[i]).then(() => {});
        promiseArray.push(promise);
        
        if (promiseArray.length === 6 || i === list1.length - 1) {
            await Promise.all(promiseArray);
            promiseArray = [];
        }
    }
    for (let i = 0; i < list2.length; i++) {
        let promise = fileLoader.loadFile(list2[i]).then(() => {});
        promiseArray.push(promise);
        
        if (promiseArray.length === 6 || i === list2.length - 1) {
            await Promise.all(promiseArray);
            promiseArray = [];
        }
    }
    ...
}

看了网上其他关于并发的封装,很是麻烦。其实只需要并发数的判断控制和Promise.all即可实现。

超简单的前端http异步请求并发控制

额外

具体看看请求的详细信息

超简单的前端http异步请求并发控制

名称 指标含义
Queued at(准备去排队) 浏览器与同一个域名建立的TCP连接数是有限制的,chrome设置的6个,如果说同一时间,发起的同一域名的请求超过了6个,这时候就需要排队了,也就是这个Queued at时间。
Queueing(排队中) 获取到执行资格之后进行准备。 如: 浏览器正在硬盘上分配空间。
Start at(开始) 分配到的线程开始执行。
Stalled 是浏览器得到要发出这个请求的指令,到请求可以发出的等待时间。一般是等待代理商释放资源的时间。
Proxy negotiation 代理协商所用时间。
Initial Connection / Connecting 建立连接:TCP协议对应于传输层,HTTP协议对应于应用层。WEB项目中,HTTP协议是建立在TCP的基础上的。先建立TCP连接,再发起http请求。如果Connection为close,则一个TCP连接只对应一个HTTP请求。 如果Connection为Keep-alive,则一个TCP连接可对应一个到多个HTTP请求。
SSL 如果网站使用了 HTTPS,这个就是浏览器与服务器建立安全性连接的时间。
Request sent/sending 请求时间
Waiting 等待初始响应所花费的时间,也称为Time To First Byte(接收到第一个字节所花费的时间)。这个时间除了等待服务器传递响应所花费的时间之外,还包括 1 次往返延迟时间及服务器准备响应所用的时间(服务器发送数据的延迟时间)
Content Download 下载资源的时间

异步http请求线程

异步http请求线程是XMLHttpRequest连接后浏览器开的一个线程。

它是浏览器的一个单独进程,它负责处理所有的网络请求,包括http请求

当异步http请求线程发出一个Ajax请求时,它会将请求发送给网络进程,由网络进程去和服务器通信。当网络进程收到服务器的响应后,它会将响应结果返回给异步http请求线程。

如果有回调函数,异步http请求线程就会将回调函数放到事件队列中,等待JS引擎线程执行。

更多资料

从异步概念到callback回调函数到promise

juejin.cn/post/684490…

promise-async-await异步编程

juejin.cn/post/698016…

浏览器进程和线程

juejin.cn/post/724069…

原文链接:https://juejin.cn/post/7255626932494106679 作者:山河木马

(0)
上一篇 2023年7月15日 上午10:56
下一篇 2023年7月15日 上午11:06

相关推荐

发表评论

登录后才能评论