在优先级AJAX请求的情况下,如何处理浏览器对每个域的并行请求的限制？

Question

想象一下,给出以下情况:

我们的网站已经触发了大约20个请求(甚至更多).这些可以是任何类型的请求 - 我们不知道如何再次触发它们.在此网站上,所有请求都以同一网址为目标.请求可以具有订阅的事件侦听器.

如果使用Chrome,则会发送前6个请求,其他请求将在队列中等待发送(因为每个域的并行请求限制).

此时网页触发一个非常重要的请求(称之为"VIR"),该请求具有更高的优先级,然后发送到服务器,然后发送前20个请求.其他请求(及其事件监听器)也很重要,因此我们不能只是中止它们立即发送VIR.

我们需要一个解决方案来获取所有待处理的请求(6个已发送+ 14个队列中),中止它们,然后发送VIR,然后使用之前附加的相同事件侦听器再次发送其他请求.

如果没有其他(开箱即用)解决方案,2个基本问题是:

• 是否可以引用所有待处理的请求(包括队列)？
• 是否有可能中止xhr然后再次发送(通过某种方式克隆它们,或者我不知道)？

还有一个相关问题:

• 我记得每个主机名的并行请求限制是浏览器的限制,而不是仅限当前选项卡.是否有一个神奇的解决方案来处理它？如果是的话,我真的想写吗？:)

请注意,所有请求都必须在同一个域中发送.(意味着使用VIR定位不同的域不是此处的选项).但是,使用websocket或http/2可以解决基本问题,这些不是当前问题中的选项.

我很欣赏这个想法!Thx提前!

pm.:是的,这是一个javascript问题:)

Answer 1

XmlHttpRequest实际上，您可以在中止请求后继续使用同一实例，再次调用 open 和 send 方法，并且事件侦听器保持附加状态。通过重载 xhr open/send 方法更新了代码片段以保存 url 和有效负载：

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);
}

function priority_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);
  })
}