HTTP/1.1和HTTP/2的区别，HTTP/2有哪些新特性？

HTTP/1.1 和 HTTP/2 的区别及新特性详解 一、核心区别：连接管理与多路复用

HTTP/1.1​ 使用「短连接」或「持久连接」，但每个 TCP 连接在同一时刻只能处理一个请求（HOL Blocking）。浏览器通常通过开启多个 TCP 连接（6-8个）缓解阻塞，但增加了服务器压力。

// HTTP/1.1 下需合并资源减少请求数（但可能影响缓存） // 使用工具如 Webpack 合并 JS： module.exports = { entry: './src/index.js', output: { filename: 'bundle.js' } // 所有模块打包成一个文件 };

HTTP/2​ 通过 ​二进制分帧层​ 实现多路复用，单个连接可并行处理数百个请求，彻底解决队头阻塞。资源无需合并，提升缓存利用率。

// HTTP/2 下拆分模块更优（利用细粒度缓存） // Webpack 配置拆包： module.exports = { optimization: { splitChunks: { chunks: 'all' } // 自动拆分公共依赖 } };

建议：迁移到 HTTP/2 后，停止使用雪碧图、合并 CSS/JS，改为独立文件 + 长期缓存（hash 文件名）。

---

二、头部压缩：HPACK 算法

HTTP/1.1​ 的头部以纯文本传输，重复头部（如 Cookie、User-Agent）造成冗余。 HTTP/2​ 使用 ​HPACK​ 算法，通过静态表（61个常用头）、动态表和 Huffman 编码压缩头部，减少 30%~90% 的开销。

# Nginx 配置（默认启用 HPACK） server { listen 443 ssl http2; ssl_certificate /path/to/cert.pem; ssl_certificate_key /path/to/key.pem; }

注意：避免滥用 Cookie，控制 Header 大小（如用 JWT 替代 Session Cookie）。

---

三、服务器推送（Server Push）

HTTP/2​ 允许服务器主动推送资源，减少 RTT（Round-Trip Time）。适用于关键路径资源（如 CSS、字体）。

# Nginx 推送示例：当请求 index.html 时推送 style.css location = /index.html { http2_push /static/style.css; } // Node.js 实现推送（使用 http2 模块） const http2 = require('http2'); const server = http2.createSecureServer({ cert, key }); server.on('stream', (stream, headers) => { if (headers[':path'] === '/index.html') { stream.pushStream({ ':path': '/style.css' }, (pushStream) => { pushStream.respondWithFile('/static/style.css'); }); stream.respondWithFile('/index.html'); } });

建议：

只推送 ​必定使用​ 的资源（如主文档关联的 CSS）避免推送大文件或已缓存的资源使用 preload 头部替代 Push（更灵活）

html

<!-- 使用 preload 提示浏览器预加载 --> <link rel="preload" href="critical.css" as="style">

---

四、流优先级（Stream Priority）

HTTP/2​ 允许为每个流设置权重（1~256）和依赖关系，优化关键资源加载顺序。

javascript

// 前端通过 Importance 属性提示优先级 fetch('video.mp4', { importance: 'high' }); // 高优先级 fetch('analytics.js', { importance: 'low' });

注意：后端需正确配置优先级策略。例如，Nginx 默认根据资源类型分配优先级（CSS > 图片）。

---

五、实际开发注意事项 ​强制 HTTPS：主流浏览器只支持 HTTP/2 over TLS，需部署 SSL 证书（Let's Encrypt 免费）。​服务端兼容性：确认 CDN 和服务器支持 HTTP/2（如 Nginx >= 1.9.5）。​监控性能：使用 DevTools 的 Network 面板检查协议版本（h2 表示 HTTP/2），瀑布图分析流竞争。​避免反模式： ​冗余推送：用 Chrome 的 Coverage 工具统计未使用代码，避免推送无用资源。​过度分块：小文件过多增加头部开销（平衡缓存和请求数）。

---

六、迁移到 HTTP/2 的步骤 ​升级后端：配置 Nginx/Apache 启用 HTTP/2。​优化资源：拆分合并的文件，采用内容哈希命名（Webpack 的 [contenthash]）。​测试推送：用 chrome://net-internals/#http2 检查推送是否生效。​压测评估：使用 h2load 或 wrk 对比性能提升。 # 示例：使用 h2load 压测 h2load -n 100000 -c 100 -m 100 yoursite

---

总结

HTTP/2 通过多路复用、头部压缩等特性大幅提升性能，但需调整传统优化策略（如放弃合并文件）。

合理使用 Server Push 和流优先级，结合 Preload/Prefetch 精细控制资源加载，同时注意避免过度推送和头部膨胀。实践中需综合监控、压测和渐进式迁移，才能最大化协议优势。