HTTP/2通过多路复用、HPACK头部压缩和优先级调度显著提升静态资源分发效率；需Nginx 1.9.5+启用http_v2_module、443端口配HTTPS并监听http2，建议升级至1.21.4+以支持优先级，弃用Server Push而改用preload hint。
HTTP/2 在 Nginx 中启用后，能显著提升前端工程化构建产物（如 JS、CSS、图片等静态资源）的分发效率，核心在于多路复用、头部压缩和服务器推送（虽已弃用但影响仍在），而非单纯“更快下载单个文件”。关键优化点集中在连接复用与资源加载协同上。
多路复用减少连接开销
前端构建常产出大量小体积资源（例如 20+ 个 chunked JS、CSS、图标字体、SVG），HTTP/1.1 下受限于浏览器并发连接数（通常 6–8 个），需排队或建多个 TCP 连接，带来握手、慢启动等延迟。HTTP/2 允许在单个 TLS 连接上并发传输任意数量请求/响应，消除队头阻塞。
- 确保 Nginx 编译时启用了 http_v2_module（1.9.5+ 默认内置）
- 监听配置中显式开启 http2，且必须配合 HTTPS（HTTP/2 在主流浏览器中仅支持加密通道）：
listen 443 ssl http2; - 避免为同一域名混用 HTTP/1.1 和 HTTP/2 端口，防止客户端因重定向或协议降级引入额外 RTT
头部压缩降低传输冗余
前端资源请求普遍携带重复 Header（如 Cookie、User-Agent、Accept-*），尤其在 SPA 首屏后大量异步接口或懒加载资源请求中。HTTP/2 使用 HPACK 算法对 Header 进行无损压缩并维护动态表，可将典型 Header 体积从 800+ 字节压至 50–200 字节。
- 无需额外配置，Nginx 启用 HTTP/2 后自动启用 HPACK
- 注意：Cookie 值过长仍会增大首字节时间（TTFB），建议前端构建时剥离非必要 Cookie（如分析类 token）或改用 localStorage + API 携带
- 可通过 Chrome DevTools → Network → Headers 查看 :scheme、:path 等二进制 Header，确认是否为 HTTP/2 流量
服务端资源优先级与响应调度
HTTP/2 支持客户端通过 PRIORITY 帧声明资源依赖关系与权重（如 HTML > CSS > JS > 图片）。现代浏览器（Chrome、Firefox）会据此向 Nginx 发送优先级信号，Nginx 1.21.4+ 支持基于该信号调整响应发送顺序，让关键资源更早到达客户端。
- 升级 Nginx 至 1.21.4 或更高版本（低版本忽略优先级）
- 确认编译参数含 --with-http_v2_module，运行时检查 nginx -V 2>&1 | grep http_v2
- 前端构建保持合理资源拆分（如使用 webpack 的 splitChunks 分离 vendor、runtime），使 HTML 中 与浏览器默认优先级策略一致，避免人为打乱调度逻辑
替代 Server Push 的现代实践
HTTP/2 Server Push 曾被用于主动推送 CSS/JS，但因缓存不可控、易造成带宽浪费，已被 Chrome 96+ 完全移除，Nginx 也早在 1.13.9 后弃用 push 指令。当前更可靠的方式是：
- 前端构建阶段生成 resource hints（
<link rel="preload">/<link rel="preconnect">），由浏览器自主决策预加载时机 - Nginx 配合使用 ngx_http_v2_module 和 HTTP/2 优先级调度，自然响应这些 hint 请求，无需服务端干预
- 对 CDN 场景，优先选择支持 HTTP/2 且具备智能边缘缓存策略的服务（如 Cloudflare、阿里云全站加速），它们已内建对构建产物缓存键（如 content-hash 文件名）的友好处理
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
