从 HTTP/1.1 到 HTTP/3：如何影响网页加载速度与性能

一、前言

在最近使用Apipost时，突然注意到了http/1.1和http/2，如下图：

在我根深蒂固的记忆中，对于http的理解还停留在TCP协议、三次握手。由于我的好奇心，于是触发了我被动“开卷”，所以有了这篇文章，文章主要整理了我查阅资料的分享。

本文将详细讲解 HTTP/1.1、HTTP/2 和 HTTP/3 三个版本的演变过程及其在实际请求中的应用。

---

二、HTTP/1.1：最基础的协议

1. HTTP/1.1简介

HTTP/1.1 于1999年发布，成为了互联网中最广泛使用的协议版本。虽然它改进了 HTTP/1.0 的一些问题（例如引入持久连接），但在处理多个请求时依然存在显著的性能瓶颈。

2. HTTP/1.1的局限性

• 单连接请求：即使支持持久连接（keep-alive），HTTP/1.1 每个连接仍然只能处理一个请求。这意味着如果网页包含多个资源（如图片、脚本等），每个资源的请求都必须顺序执行。
• 头部冗余：每次请求都会发送相同的 HTTP 头部信息（如 User-Agent、Accept 等），导致带宽浪费。
• 队头阻塞：当多个请求共享同一个连接时，前一个请求的响应必须完成后才能继续处理后续请求，造成延迟。

例子：HTTP/1.1 请求

假设你访问一个包含多个资源的网页，使用 HTTP/1.1 进行请求：

1. 浏览器请求第一个资源：GET /image1.jpg HTTP/1.1
2. 服务器返回响应：HTTP/1.1 200 OK
3. 浏览器请求下一个资源：GET /style.css HTTP/1.1
4. 服务器返回响应：HTTP/1.1 200 OK

在这个过程中，每个请求都需要单独等待响应，造成了性能瓶颈。

---

三、HTTP/2：性能优化

1. HTTP/2简介

HTTP/2 于2015年发布，它的主要目标是优化 HTTP/1.1 中的性能瓶颈。通过引入 多路复用 和 头部压缩 等技术，HTTP/2 能够显著提高页面加载速度。

2. HTTP/2的优势

• 多路复用：多个请求和响应可以通过同一个连接并行传输，避免了 HTTP/1.1 中的队头阻塞问题。多个请求不再需要等待前一个请求完成，极大地提高了效率。
• 头部压缩：通过 HPACK 算法压缩 HTTP 请求头，减少了冗余数据的传输，进一步提高了带宽利用率。
• 流量优先级：HTTP/2 允许浏览器为不同的资源设置优先级，优先传输重要资源。

例子：HTTP/2 请求

在 HTTP/2 中，浏览器可以同时发起多个请求并通过同一个连接并行处理：

1. 浏览器请求多个资源：
   • GET /image1.jpg HTTP/2
   • GET /style.css HTTP/2
   • GET /script.js HTTP/2
2. 服务器并行响应这些请求：
   • HTTP/2 200 OK (for /image1.jpg)
   • HTTP/2 200 OK (for /style.css)
   • HTTP/2 200 OK (for /script.js)

通过这种方式，多个请求和响应可以并行处理，减少了页面加载时间。

---

四、HTTP/3：低延迟的时代

1. HTTP/3简介

HTTP/3 于2020年发布，基于 QUIC 协议，它不同于 HTTP/1.1 和 HTTP/2 使用的 TCP 协议，而是采用了 UDP 协议。通过减少连接建立的延迟，HTTP/3 提供了更低的延迟和更高的性能，尤其适合高丢包和高延迟的网络环境。

2. HTTP/3的优势

• 更低的延迟：使用 UDP 协议，建立连接的时间大幅减少，特别是对于高延迟或不稳定的网络环境，HTTP/3 提供了显著的性能提升。
• 更可靠的多路复用：QUIC 协议避免了 TCP 的拥塞控制和丢包问题，能更稳定地传输多个请求。
• 加密性能：HTTP/3 默认使用 TLS 1.3 协议进行加密，确保数据传输安全，同时减少了加密过程中的性能开销。

例子：HTTP/3 请求

当你访问支持 HTTP/3 的网站时，浏览器会通过 QUIC 协议快速建立连接：

1. 浏览器通过 QUIC 建立连接。
2. 浏览器并行请求多个资源：
   • GET /image1.jpg HTTP/3
   • GET /style.css HTTP/3
   • GET /script.js HTTP/3
3. 服务器快速并行响应这些请求：
   • HTTP/3 200 OK

通过这种方式，HTTP/3 能减少连接建立的延迟并显著提高请求和响应的速度。

---

五、协议选择过程：浏览器如何决定使用哪个版本

浏览器在发起请求时会根据以下优先级选择协议版本：

1. 优先选择 HTTP/3

当浏览器和服务器都支持 HTTP/3 且网络环境支持 QUIC 协议时，浏览器会优先选择 HTTP/3。由于 QUIC 使用 UDP 协议，相较于 TCP，可以实现更低的连接延迟和更高的性能。

2. 如果 HTTP/3 不可用，则尝试 HTTP/2

如果 HTTP/3 不可用（例如，服务器不支持 QUIC 协议），浏览器会退回到 HTTP/2。HTTP/2 的多路复用和头部压缩技术能显著减少请求的延迟和带宽占用。

3. 如果 HTTP/2 也不可用，则回退到 HTTP/1.1

如果 HTTP/2 也不可用（例如，服务器只支持 HTTP/1.1），浏览器会使用 HTTP/1.1。尽管 HTTP/1.1 在性能上较为落后，但它仍然是目前最普遍支持的版本。

---

六、浏览器支持的协议版本

协议版本时间线与浏览器支持

协议版本	发布年份	主要特点	浏览器支持情况
HTTP/1.1	1999年	最广泛使用的协议，支持持久连接。	几乎所有现代浏览器都支持。
HTTP/2	2015年	引入多路复用、头部压缩等技术，优化性能。	主流浏览器（Chrome、Firefox、Edge、Safari…）全面支持。
HTTP/3	2020年	基于QUIC协议，使用UDP，提供更低延迟和更高性能。	Chrome、Firefox、Edge、Safari…支持，逐步普及。

---

七、总结

优先级	协议版本	说明	浏览器支持情况
1	HTTP/3	优先选择，基于QUIC，提供低延迟和高性能	Chrome、Firefox、Edge、Safari …支持
2	HTTP/2	如果HTTP/3不可用，采用多路复用和头部压缩优化性能	Chrome、Firefox、Edge、Safari …支持
3	HTTP/1.1	如果HTTP/2不可用，回退到传统的HTTP协议，性能较低	所有现代浏览器都支持

最后：有点意外的是 HTTP/3 和 TCP协议 没有直接关系，需要重点更新一下记忆。