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

一、前言

在最近使用Apipost时,突然注意到了http/1.1http/2,如下图:
在这里插入图片描述
在我根深蒂固的记忆中,对于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协议 没有直接关系,需要重点更新一下记忆。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/963259.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

项目练习:重写若依后端报错cannot be cast to com.xxx.model.LoginUser

文章目录 一、情景说明二、解决办法 一、情景说明 在重写若依后端服务的过程中 使用了Redis存放LoginUser对象数据 那么,有存就有取 在取值的时候,报错 二、解决办法 方法1、在TokenService中修改如下 getLoginUser 方法中:LoginUser u…

C语言------二维数组指针从入门到精通

前言: 目标:需要了解及掌握数组指针的行地址、列地址、具体元素地址、具体元素地址的值是怎样定义及实现。 重点:指针的偏移,指针解引用。 难点:指针的升阶与降阶。 1. 基本概念 二维数组:二维数组可以看作是一个数组的数组。例如,int a[3][4] 表示一个 …

AI-ISP论文Learning to See in the Dark解读

论文地址:Learning to See in the Dark 图1. 利用卷积网络进行极微光成像。黑暗的室内环境。相机处的照度小于0.1勒克斯。索尼α7S II传感器曝光时间为1/30秒。(a) 相机在ISO 8000下拍摄的图像。(b) 相机在ISO 409600下拍摄的图像。该图像存在噪点和色彩偏差。©…

自定义数据集 ,使用朴素贝叶斯对其进行分类

代码: # 导入必要的库 import numpy as np import matplotlib.pyplot as plt# 定义类1的数据点,每个数据点是二维的坐标 class1_points np.array([[1.9, 1.2],[1.5, 2.1],[1.9, 0.5],[1.5, 0.9],[0.9, 1.2],[1.1, 1.7],[1.4, 1.1]])# 定义类2的数据点&…

蓝桥杯单片机第七届省赛

前言 这套题不难,相对于第六套题这一套比较简单了,但是还是有些小细节要抓 题目 OK,以上就是全部的题目了,这套题目相对来说逻辑比较简单,四个按键,S4控制pwm占空比,S5控制计时时间&#xff0…

小程序设计和开发:如何研究同类型小程序的优点和不足。

一、确定研究目标和范围 明确研究目的 在开始研究同类型小程序之前,首先需要明确研究的目的。是为了改进自己的小程序设计和开发,还是为了了解市场趋势和用户需求?不同的研究目的会影响研究的方法和重点。例如,如果研究目的是为了…

反向代理模块jmh

1 概念 1.1 反向代理概念 反向代理是指以代理服务器来接收客户端的请求,然后将请求转发给内部网络上的服务器,将从服务器上得到的结果返回给客户端,此时代理服务器对外表现为一个反向代理服务器。 对于客户端来说,反向代理就相当…

一文讲解HashMap线程安全相关问题

HashMap不是线程安全的,主要有以下几个问题: ①、多线程下扩容会死循环。JDK1.7 中的 HashMap 使用的是头插法插入元素,在多线程的环境下,扩容的时候就有可能导致出现环形链表,造成死循环。 JDK 8 时已经修复了这个问…

oracle:子查询

子查询: 一条查询语句中嵌入了另一条查询语句, 被嵌入里面的这条查询语句称为子查询, 外面的查询语句称为主查询 子查询的分类 相关性子查询(Correlated Subquery)是指子查询的执行依赖于外部查询的每一行数据。也就是说,子查询会对外部查询…

AI技术在SEO关键词优化中的应用策略与前景展望

内容概要 在数字营销的快速发展中,AI技术逐渐成为SEO领域的核心驱动力。其通过强大的数据分析和处理能力,不仅改变了我们优化关键词的方式,也提升了搜索引擎优化的效率和效果。在传统SEO中,关键词的选择与组合常依赖人工经验和直…

Java项目: 基于SpringBoot+mybatis+maven+mysql实现的疫苗发布和接种预约管理系统(含源码+数据库+开题报告+毕业论文)

一、项目简介 本项目是一套基于SpringBootmybatismavenmysql疫苗发布和接种预约管理系统 包含:项目源码、数据库脚本等,该项目附带全部源码可作为毕设使用。 项目都经过严格调试,eclipse或者idea 确保可以运行! 该系统功能完善、…

VSCode中快速创建Html文件

1、下载并安装好VSCode软件,启动软件。 2、依次点击左上角选项卡“file”-“New File”。 输入文件名称后缀,如:HelloWorld.html。 选择新建文件的目录所在位置。 3、HelloWorld.html中输入英文格式的!,按回车键后会默认依据…

CMake项目编译与开源项目目录结构

Cmake 使用简单方便,可以跨平台构建项目编译环境,尤其比直接写makefile简单,可以通过简单的Cmake生成负责的Makefile文件。 如果没有使用cmake进行编译,需要如下命令:(以muduo库echo服务器为例)…

网络原理(4)—— 网络层详解

目录 一. IP协议报头结构 二. 地址管理 2.1 路由器 2.1.1 路由选择 2.1.2 WAN口(Wide Area Network) 2.1.3 LAN口(Local Area Network) 2.1.4 WLAN口(Wireless Local Area Network) 2.2 网段划分…

Hot100之图论

200岛屿数量 题目 思路解析 把访问过的格子插上棋子 思想是先污染再治理,我们有一个inArea()函数,是判断是否出界了 我们先dfs()放各个方向遍历,然后我们再把这个位置标为0 我们岛屿是连着…

【HarmonyOS之旅】基于ArkTS开发(三) -> 兼容JS的类Web开发(三)

目录 1 -> 生命周期 1.1 -> 应用生命周期 1.2 -> 页面生命周期 2 -> 资源限定与访问 2.1 -> 资源限定词 2.2 -> 资源限定词的命名要求 2.3 -> 限定词与设备状态的匹配规则 2.4 -> 引用JS模块内resources资源 3 -> 多语言支持 3.1 -> 定…

Python从零构建macOS状态栏应用(仿ollama)并集成AI同款流式聊天 API 服务(含打包为独立应用)

在本教程中,我们将一步步构建一个 macOS 状态栏应用程序,并集成一个 Flask 服务器,提供流式响应的 API 服务。 如果你手中正好持有一台 MacBook Pro,又怀揣着搭建 AI 聊天服务的想法,却不知从何处迈出第一步,那么这篇文章绝对是你的及时雨。 最终,我们将实现以下功能: …

【Numpy核心编程攻略:Python数据处理、分析详解与科学计算】2.4 索引优化:避免意外复制的高效技巧

2.4 索引优化:避免意外复制的高效技巧 目录/提纲 #mermaid-svg-hmMAIqF8kFh46fbH {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-hmMAIqF8kFh46fbH .error-icon{fill:#552222;}#mermaid-svg-hmMAIqF8kF…

【C语言进阶(五)】指针进阶详解(下)

指针详解-下 1. 前言2. 函数指针数组2.1 函数指针数组的用途 3. 指向函数指针数组的指针3.1 回调函数 4. 库函数中qsort分析4.1 为什么这个函数需要我们自己实现?4.2 库函数qsort的使用 5. qsort函数的模拟实现5.1 大框架的实现5.2 比较函数的实现5.3 对于交换函数的思考5.4 交…

18.Word:数据库培训课程❗【34】

目录 题目 NO1.2.3.4 NO5设置文档内容的格式与样式 NO6 NO7 NO8.9 NO10.11标签邮件合并 题目 NO1.2.3.4 FnF12:打开"Word素材.docx”文件,将其另存为"Word.docx”在考生文件夹下之后到任务9的所有操作均基于此文件:"Word.docx”…