AngularJS中HTTP/2应用：数据查询请求适配及性能优化问询

嘿，很高兴你已经在着手利用HTTP/2提升Web性能了！针对你遇到的“静态资源走HTTP/2，但数据查询请求没跟上”的问题，咱们可以从以下几个方向排查和解决：

1. 先确认服务器端的HTTP/2配置是否全覆盖 #

HTTP/2的启用是服务器+浏览器双向支持的结果，浏览器支持只是其中一环：

• 检查你的服务器（Nginx、Apache、IIS等）是否为所有请求域名（包括数据接口的域名）开启了HTTP/2：
  • Nginx需要在listen指令中添加http2参数，比如listen 443 ssl http2;
  • Apache需要启用mod_http2模块，并在虚拟主机配置中添加Protocols h2 http/1.1
  • IIS需要在站点绑定中启用HTTP/2（Windows Server 2016+支持）
• 注意：几乎所有主流浏览器只支持HTTPS之上的HTTP/2，所以数据接口必须使用HTTPS协议，明文HTTP的请求大概率会降级到HTTP/1.1。

2. 排查AngularJS请求的潜在降级触发点 #

AngularJS的$http服务默认依赖浏览器原生的XMLHttpRequest或Fetch API，只要环境支持HTTP/2就会自动复用，但以下场景可能导致请求降级：

• 跨域请求的CORS配置问题：如果数据请求是跨域的，要确认CORS响应头是否符合HTTP/2规范，避免使用Access-Control-Allow-Origin: *搭配withCredentials: true（这本身就不合法），同时确保服务器没有返回HTTP/1.1特有的头部（比如Connection: keep-alive）。
• 自定义拦截器的干扰：检查你是否为$http添加了自定义拦截器，有没有手动注入HTTP/1.1专属的请求头（比如Proxy-Connection、Keep-Alive），这些头部会触发浏览器降级到HTTP/1.1。
• 第三方HTTP库的使用：如果你的数据请求没有用AngularJS原生的$http，而是用了老旧的第三方AJAX库（比如某些版本的jQuery.ajax），这些库可能底层实现不支持HTTP/2，建议切换回$http或升级到支持现代API的库。

3. 优化AngularJS请求以适配HTTP/2特性 #

除了排查问题，还可以做这些优化来最大化HTTP/2的收益：

• 放弃域名分片策略：HTTP/1.1时代常用的域名分片（把资源分散到多个子域名）反而会破坏HTTP/2的多路复用优势，建议把数据接口和静态资源统一到同一个（或少数几个）域名下，确保所有请求都能复用同一个HTTP/2连接。
• 避免不必要的请求队列限制：如果你的AngularJS代码中有手动限制并发请求数的逻辑（比如为了适配HTTP/1.1的连接数限制），可以移除这些限制，HTTP/2支持同一域名下的多路并发请求，不需要手动队列控制。

4. 验证请求是否真的使用了HTTP/2 #

最后，用浏览器开发者工具确认结果：

• 打开Chrome DevTools的「Network」面板，添加「Protocol」列（右键表头勾选）
• 筛选「XHR/Fetch」类型的请求，查看每个数据请求的Protocol列是否显示h2
• 如果还是显示http/1.1，可以查看请求的「Headers」标签，检查是否存在Upgrade: h2c请求头但被服务器拒绝，或者服务器返回了Connection: close等触发降级的响应头

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