2

I make a 10 request to the server with fetch and reload that every 5 sec. After 1 minute the browser is frozen.
Chrome only works with 6 requests at the same time and hold all other request stalled.
everything is frozen (scrolling the page, zoom in a map) till the request finished.
Is there a way that Chrome work with all request at the same time?

Is there anything that I make wrong?

I tried to work with async fetch and with Xhr request but everywhere the same result.

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

recnac
  • 3,744
  • 6
  • 24
  • 46
Max Zelger
  • 21
  • 3
  • Most browsers not just Chrome, limit the number concurrent requests to the same domain. Map servers often get around this by having multiple domains, eg.. `map1.mapper.com, map2.mapper.com, etc.` https://blog.bluetriangle.com/blocking-web-performance-villain – Keith Apr 24 '19 at 13:15
  • If I am right, it's not the amount of concurrent requests but the whole page blocking during those requests. IMHO multiple domains doesn't solve this? – webmonkey Apr 24 '19 at 15:11

1 Answers1

2

Try to make fewer requests

I assume you have control of the server-side code, and that all requests are going to the same server. In which case, what are the requests for?

These 10 requests you are making every 5 seconds, are they getting different bits of data from the same source? For example... is one request getting the newest comment, another request getting the newest registered user's name, another request getting a top ten, and so on? If this is the case, then do all 10 of those actions on the server side in one request and return them to the client all at once. The single request might take a little longer to process, but you massively reduce bandwidth and load on the client.

Alternatively, or additionally, address the fact that you're making the same request(s) over and over again. If you're asking for the same data every 5 seconds, and you're only interested in when those change, try using websockets. Instead of repeating the requests every 5 seconds, open one websocket connection, and have the server send you that data, either every 5 seconds, or whenever the server knows that it's changed.

Keiji
  • 880
  • 5
  • 12