Angular+Spring预请求触发Chrome同源TCP连接限制的解决方案问询

核心疑问解答 #

1. Angular HttpClient是否支持同一HTTP连接发送多请求？ #

Angular HttpClient底层依赖浏览器原生的XMLHttpRequest/Fetch API，浏览器默认会自动管理Connection: Keep-Alive的TCP连接复用，不需要额外编写代码控制。只要服务器返回的响应头携带合法的Keep-Alive配置，同一个域名的多个请求会自动复用已建立的TCP连接。

2. Tomcat对同连接多请求的处理逻辑 #

处理逻辑和HTTP版本直接相关：

• HTTP/1.1版本：同一条TCP连接上的请求是串行处理的，必须等前一个请求的响应完全返回后才能处理下一个请求，存在队头阻塞问题。Tomcat默认支持HTTP/1.1的长连接，可通过server.xml中的keepAliveTimeout、maxKeepAliveRequests参数调整长连接配置。
• HTTP/2版本：支持多路复用，同一条TCP连接上可以并行处理多个请求，没有队头阻塞问题。Tomcat 8.5及以上版本原生支持HTTP/2，仅需配置HTTPS（浏览器端HTTP/2默认要求HTTPS环境）并开启HTTP/2协议即可。

3. 长连接思路能否解决当前问题？ #

仅用HTTP/1.1的长连接无法解决问题，反而可能因为串行处理让高优先级请求被排在前面的预请求阻塞，延迟更高。如果升级到HTTP/2，就可以彻底绕过同域6个TCP连接的限制，从根本上解决高优请求被阻塞的问题。

可行落地方案 #

按照实施成本从低到高排序：

• 方案1：缓存服务层实现优先级请求队列（改造成本最低）
  你已经有统一的缓存管理服务，直接在服务内增加请求调度逻辑即可：
  1. 给所有请求添加优先级标识，高优请求（UI渲染相关）标记为最高级，预请求标记为最低级
  2. 用RxJS的mergeMap操作符控制全局最大并发请求数为5（留1个连接余量应对突发请求）
  3. 高优请求进入队列时自动插队，若当前并发已满，可将队列中未发起的预请求延后，优先执行高优请求
• 方案2：升级支持HTTP/2（长期最优方案）
  仅需后端调整Tomcat配置：
  1. 配置HTTPS证书，开启443端口监听
  2. 在server.xml的Connector配置中添加http2Protocol="org.apache.coyote.http2.Http2Protocol"开启HTTP/2支持
     前端代码无需任何修改，升级后同域所有请求复用单条TCP连接，支持近百个请求并行处理，完全不会出现连接占满阻塞的问题。
• 方案3：预请求闲时分片触发
  调整预请求的触发逻辑，从源头上避免占满连接：
  1. 不要一次性批量发起所有预请求，用requestIdleCallbackAPI监听浏览器空闲状态，仅在浏览器无渲染任务时才发起预请求
  2. 预请求单独控制并发数，最多同时发起2个预请求，执行完成后再触发下一批
• 方案4：域名拆分隔离请求池
  将预请求和高优请求的域名拆分，比如高优请求走主业务域名，预请求走独立的预拉取域名，两个域名的浏览器连接池互相独立，预请求占满自身的6个连接也不会影响高优请求的执行，仅需后端配置跨域CORS规则即可。

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