如何在JavaScript中检测HTTP/1.1、HTTP/2与HTTP/3协议？附多长时请求阻塞问题解决方案探讨

我之前处理过类似的资源加载场景，针对你遇到的两个核心痛点——HTTP/1.1连接限制导致的请求挂起，以及准确检测HTTP协议版本，这里分享几个更优的思路：

一、优化长时ND-JSON请求的连接阻塞问题 #

你的临时方案（轮询别名域名）虽然能绕开HTTP/1.1的并行连接限制，但确实会浪费HTTP/2/3的多路复用优势。可以试试以下方案：

1. 用WebSocket替代长时ND-JSON请求 #

如果你的ND-JSON请求是服务器主动推送数据流的场景，WebSocket是更合适的选择：

• WebSocket使用独立的TCP连接，不占用HTTP连接池，完全不受HTTP/1.1的6个并行连接限制；
• 全双工通信，能更高效地传输ND-JSON格式的流式数据，无需反复建立请求；
• 即使在HTTP/1.1环境下也能稳定运行，同时在HTTP/2/3环境下也能兼容（部分浏览器支持HTTP/2上的WebSocket）。
  唯一需要注意的是前后端需要配合改造，将原本的ND-JSON请求逻辑迁移到WebSocket通信上。

2. 单连接多路复用模拟（HTTP/1.1专属方案） #

如果无法切换到WebSocket，可以在单个HTTP长连接上模拟多路复用：

• 前后端约定好分隔规则（比如用特殊字符或长度前缀标记每个ND-JSON消息的边界）；
• 客户端发起一个长连接请求，服务器在这个连接上同时传输多个ND-JSON流的内容，客户端收到数据后按约定规则拆分出不同的数据流；
• 这样只占用1个HTTP连接，就能承载所有长时请求，剩余的连接可以留给短请求使用。
  这个方案需要前后端做一定的开发工作，但能保留HTTP协议的兼容性，同时避免多域名轮询的性能损耗。

3. 请求优先级与连接预留 #

调整请求发起顺序，优先发起短请求，再启动长时ND-JSON请求：

• 浏览器的HTTP/1.1连接池是先到先得，短请求先占用连接后，长请求会排队，但短请求完成后会释放连接给长请求；
• 可以给长请求设置较低的优先级（通过fetch的priority: 'low'参数），让浏览器优先处理关键的短请求，避免它们被无限挂起。

二、准确检测当前使用的HTTP协议版本 #

针对你提到的Performance API失效、服务器告知不准确的问题，推荐以下几种综合方案：

1. 基于HTTP/2多路复用特性的检测 #

利用HTTP/2和HTTP/1.1的核心差异做特性测试：

async function isHTTP2OrHigher() {
  const url = '/ping'; // 后端提供一个极短的响应接口
  const start = performance.now();
  
  // 同时发起2个请求
  const [res1, res2] = await Promise.all([
    fetch(url),
    fetch(url)
  ]);
  
  const end = performance.now();
  const duration = end - start;
  
  // HTTP/2下两个请求会几乎同时完成，总耗时接近单个请求的时间；HTTP/1.1下如果连接池满了，会有明显的串行延迟
  return duration < 100; // 阈值根据实际网络情况调整
}

这个方法不需要服务器配合，纯前端就能实现，而且能准确反映浏览器和服务器之间的实际协议（因为中间件如果支持HTTP/2，多路复用特性是真实存在的）。

2. 让中间件传递真实协议版本 #

如果你的架构中有负载均衡器等中间件，可以配置中间件将客户端与中间件之间的协议版本通过响应头传递给前端：

• 比如Nginx可以设置add_header X-Forwarded-Proto $scheme;，将前端请求的协议（http/1.1、http/2、h3）放在响应头里；
• 后端读取这个头，再通过接口或响应头返回给前端；
• 这种方式能避免后端和中间件之间的协议不匹配问题，拿到的是客户端实际使用的协议。

3. 结合HTTP/3的QUIC特性检测 #

如果需要检测HTTP/3，可以尝试使用WebTransport API（部分现代浏览器支持）：

async function isHTTP3() {
  try {
    const transport = new WebTransport('https://your-domain.com/quic-endpoint');
    await transport.ready;
    transport.close();
    return true;
  } catch (e) {
    return false;
  }
}

WebTransport基于QUIC协议，只有HTTP/3环境下才能正常建立连接，所以可以作为HTTP/3的检测手段。

总结 #

优先推荐用WebSocket解决长时请求阻塞问题，既能兼容HTTP/1.1，又能发挥HTTP/2/3的性能；协议检测可以结合特性测试和中间件传递的头信息，确保准确性。

内容的提问来源于stack exchange，提问作者AI0867