How To Deal With Browser's Limit Of Parallel Requests Per Domain In Case Of A Priority Ajax Request?

Imagine as given the following situation: There are about 20 requests (or even more) which has been triggered by our website. These can be any kind of requests - we don't know how

Solution 1:

You can actually keep using the same XmlHttpRequest instance after aborting the request, calling the open and send methods again, and the event listeners remain attached. Updated the snippet with overloading the xhr open/send method to save the url and payload:

var pending_requests = [], 
    XHRBase = {
      open: XMLHttpRequest.prototype.open, 
      send: XMLHttpRequest.prototype.send
    };

XMLHttpRequest.prototype.open = function() {

  pending_requests.push(xhr._data = {xhr: this, open: arguments});
  XHRBase.open.apply(this, arguments);
  // add event listener to pop on finish
}

XMLHttpRequest.prototype.send = function() {
  xhr._data.send = arguments;
  XHRBase.send.apply(this, arguments);
}

functionpriority_call(params, callback) {
  pending_requests.forEach((req) => req.xhr.abort());
  // do vip xhr
  pending_requests.forEach((req) => {
    XHRBase.open.apply(req.xhr, req.open); 
    XHRBase.send.apply(req.xhr, req.send);
  })
}