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

embedded/2025/2/6 7:50:05/
http://www.w3.org/2000/svg" style="display: none;">

一、前言

在最近使用Apipost时,突然注意到了http/1.1http/2,如下图:
https://i-blog.csdnimg.cn/direct/1177918020bc455c8454bb9d8639037f.png" alt="在这里插入图片描述" />
在我根深蒂固的记忆中,对于http的理解还停留在TCP协议三次握手。由于我的好奇心,于是触发了我被动“开卷”,所以有了这篇文章,文章主要整理了我查阅资料的分享。

本文将详细讲解 HTTP/1.1HTTP/2HTTP/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-AgentAccept 等),导致带宽浪费。
  • 队头阻塞:当多个请求共享同一个连接时,前一个请求的响应必须完成后才能继续处理后续请求,造成延迟。
例子: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.11999年最广泛使用的协议,支持持久连接。几乎所有现代浏览器都支持。
HTTP/22015年引入多路复用、头部压缩等技术,优化性能。主流浏览器(Chrome、Firefox、Edge、Safari…)全面支持。
HTTP/32020年基于QUIC协议,使用UDP,提供更低延迟和更高性能。Chrome、Firefox、Edge、Safari…支持,逐步普及。

七、总结

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

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


http://www.ppmy.cn/embedded/159970.html

相关文章

用python实现进度条

前言 在Python中,可以使用多种方式实现进度条。以下是几种常见的进度条格式的实现方法: 1. 使用 tqdm 库 tqdm 是一个非常流行的库,可以轻松地在循环中显示进度条。 from tqdm import tqdm import time# 示例:简单的进度条 fo…

“数智”赋能城市运行管理

在数字化浪潮的推动下,城市运行管理正经历着前所未有的变革。“数智”赋能,即通过大数据、人工智能、云计算等前沿技术,为城市治理注入新的活力,实现城市管理的智能化、精细化和高效化。本文将深入探讨“数智”赋能城市运行管理的…

[创业之路-282]:《产品开发管理-方法.流程.工具 》-1- 优秀研发体系的特征、IPD关注的4个关键要素、IPD体系的7个特点

目录 一、优秀研发体系的特征 二、IPD关注的4个关键要素 1. 组织管理 2. 市场管理 3. 流程管理 4. 产品管理 三、IPD体系的7个特点 1、产品开发是投资行为: 2、基于市场的产品研发: 3、平台化开发,大平台,小产品&#x…

计算机网络笔记再战——理解几个经典的协议6——TCP与UDP

目录 先说端口号 TCP 使用序号保证顺序性和应答来保证有效性 超时重传机制 TCP窗口机制 UDP 路由协议 协议分类:IGP和EGP 几个经典的路由算法 RIP OSPF 链路状态数据库(LSDB) LSA(Link State Advertisement&#xff0…

线性回归简介:从理论到应用

什么是线性回归? 线性回归是一种用于预测数值型结果的统计方法,它通过建立一个或多个自变量(输入特征)与因变量(输出目标)之间的线性关系模型来工作。在最简单的形式中,即简单线性回归&#xf…

如何利用i18n实现国际化

1.首先新建i18.js文件 // i18n配置 import { createI18n } from vue-i18n // import ElementPlus from element-plus import zhCn from element-plus/es/locale/lang/zh-cn import zh from ./zh-cn import en from ./en import ru from ./ru const messages {en_US: {...en,//…

糖果(安师大)

转移方程 转移方程的核心思想是 选择和不选择当前物品 两种情况的比较。具体来说: 不选择当前物品: 如果不选择第 i 个物品,那么 dp(i, j) 就等于 dp(i-1, j),即前 i-1 个物品中,满足 总价值 % k j 的最大和。 选…

【异常记录Java-20250204】调用讯飞星火AI(Spark lite 版本)Api 授权错误问题处理

问题重现 依赖 <!--讯飞开放平台sdk--> <dependency><groupId>io.github.briqt</groupId><artifactId>xunfei-spark4j</artifactId><version>1.3.0</version> </dependency>yml配置文件 # 讯飞Api配置 xunfei:client:ap…