Vue应用打开7个及以上标签页时请求挂起问题排查与解决

问题根源 #

这是浏览器同源并发连接数限制导致的：现代浏览器默认对同一域名的HTTP/1.1并发连接数限制为6个左右（不同浏览器略有差异）。当打开第7个标签页时，新发起的请求会因达到连接上限进入pending队列，直到已有连接释放（比如关闭标签页），队列中的请求才能继续执行。

结合你的package.json来看，项目使用的vue-resource@1.0.3是停止维护的旧版本，它默认采用HTTP/1.1且未做连接复用优化，进一步放大了这个问题。

解决方案 #

1. 升级到HTTP/2

HTTP/2支持多路复用，同一域名下的所有请求可共用一个TCP连接，彻底突破HTTP/1.1的并发连接限制。

• 从你的部署脚本看，应用托管在Heroku，Heroku默认支持HTTP/2，只需确保应用使用HTTPS（Heroku默认域名已启用HTTPS），即可自动切换到HTTP/2。

2. 替换请求库并优化连接复用

替换停止维护的vue-resource为axios，它支持HTTP/1.1的连接池复用，能更高效利用现有连接：

• 安装axios：

  npm install axios --save
  

• 在Vue项目中全局配置axios，开启长连接复用：

  import axios from 'axios'
  const httpAgent = new require('http').Agent({ keepAlive: true })
  const httpsAgent = new require('https').Agent({ keepAlive: true })
  
  axios.defaults.httpAgent = httpAgent
  axios.defaults.httpsAgent = httpsAgent
  Vue.prototype.$http = axios
  

3. 合并请求减少并发量

将多个独立的小请求合并为一个请求，比如后端提供批量查询接口，一次性返回多个接口的数据，降低同时发起的请求数量。

4. 临时方案：域名分片（不推荐）

将API请求或静态资源分散到不同子域名（如api1.yourdomain.com、api2.yourdomain.com），绕过浏览器的同源连接限制。但此方案会增加维护成本，在HTTP/2普及后无必要使用。

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