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并发控制

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

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即可实现。

额外

具体看看请求的详细信息

名称	指标含义
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

promise-async-await异步编程

浏览器进程和线程