javascript - fetch 和 chrome 的多个请求一次只能处理 6 个文件，其他请求将被停止

Question

我向服务器发出 10 次请求，每 5 秒获取一次并重新加载一次。 1 分钟后浏览器卡住。
Chrome 只能同时处理 6 个请求，并暂停所有其他请求。
一切都被卡住(滚动页面，放大 map )直到请求完成。
有没有办法让 Chrome 同时处理所有请求？

我有什么地方做错了吗？

我尝试使用异步获取和 Xhr 请求，但到处都是相同的结果。

const headers = new Headers();
headers.set('Content-Type', 'application/json');

let _options = {
  credentials: 'include',
  cache: 'no-cache',
  mode: 'cors',
  redirect: 'follow',
  referrer: 'no-referrer',
  headers
};


fetch(url, _options).then(
  response => {
    if (response.status !== 200) {
      console.log(`Looks like there was a problem. Status Code: ${
        response.status}`);
      return;
    }

    // Examine the text in the response
    response.json().then(data => data);
  }
)
  .catch(err => {
    console.log('Fetch Error :-S', err);
  });

enter image description here

Answer 1

尽量减少请求

我假设您可以控制服务器端代码，并且所有请求都将发送到同一台服务器。在这种情况下，请求是什么？

您每 5 秒发出的这 10 个请求，它们是否从同一来源获取不同位的数据？例如……一个请求获得最新的评论，另一个请求获得最新的注册用户名，另一个请求获得前十名，等等？如果是这种情况，则在一个请求中在服务器端执行所有 10 个这些操作，然后将它们一次性全部返回给客户端。单个请求可能需要更长的时间来处理，但您会大大减少客户端的带宽和负载。

或者，或者另外，解决您一遍又一遍地提出相同请求的事实。如果您每 5 秒请求相同的数据，并且您只对这些数据何时发生变化感兴趣，请尝试使用 websockets。不要每 5 秒重复一次请求，而是打开一个 websocket 连接，并让服务器每 5 秒或每当服务器知道它已更改时向您发送该数据。