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异步编程
浏览器进程和线程
原文链接：https://juejin.cn/post/7255626932494106679 作者：山河木马
