从 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.11999年最广泛使用的协议，支持持久连接。几乎所有现代浏览器都支持。
HTTP/22015年引入多路复用、头部压缩等技术，优化性能。主流浏览器（Chrome、Firefox、Edge、Safari…）全面支持。
HTTP/32020年基于QUIC协议，使用UDP，提供更低延迟和更高性能。Chrome、Firefox、Edge、Safari…支持，逐步普及。

七、总结

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

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

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

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

6 加密技术与认证技术

6 加密技术与认证技术

6 加密技术与认证技术 6.1:对称加密与非对称加密技术 6.1.1:对称加密 对称加密:; 特点: 1、加密强度不高，但效率高;2、密钥分发困难。 常见对称密钥（共享秘钥）加密算法:DES、3DES(三重DES)、RC-5、IDEA算法。 6.1.1.2非对称加密技术 非对称…
阅读更多...
【Block总结】CoT，上下文Transformer注意力|即插即用

【Block总结】CoT，上下文Transformer注意力|即插即用

一. 论文信息 标题: Contextual Transformer Networks for Visual Recognition论文链接: arXivGitHub链接: https://github.com/JDAI-CV/CoTNet 二. 创新点 上下文Transformer模块（CoT）: 提出了CoT模块，能够有效利用输入键之间的上下文信息，指导动态注意力矩阵的学习，从而…
阅读更多...
pycharm集成通义灵码应用

pycharm集成通义灵码应用

在pycharm中安装通义灵码 1、打开files-settings 2、选中plugins-搜索”TONGYI Lingma“，点击安装 3.安装完成后在pycharm的右侧就有通义灵码的标签 4、登录账号 5、查看代码区域代码，每一个方法前面都多了通义灵码的标识，可以直接选择…
阅读更多...
保姆级教程Docker部署Zookeeper官方镜像

保姆级教程Docker部署Zookeeper官方镜像

目录 1、安装Docker及可视化工具 2、创建挂载目录 3、运行Zookeeper容器 4、Compose运行Zookeeper容器 5、查看Zookeeper运行状态 6、验证Zookeeper是否正常运行 1、安装Docker及可视化工具 Docker及可视化工具的安装可参考：Ubuntu上安装 Docker及可视化管理…
阅读更多...
3.【BUUCTF】XSS-Lab1

3.【BUUCTF】XSS-Lab1

进入题目页面如下 好好好&#xff0c;提示点击图片&#xff0c;点进去页面如下&#xff0c;且url中有传参&#xff0c;有注入点 发现题目给出了源码 查看得到本题的源码 分析一下代码 <!DOCTYPE html><!--STATUS OK--> <!-- 声明文档类型为 HTML5&#xff0c;告…
阅读更多...
react关于手搓antd pro面包屑的经验（写的不好请见谅）

react关于手搓antd pro面包屑的经验（写的不好请见谅）

我们先上代码&#xff0c;代码里面都有注释&#xff0c;我是单独写了一个组件&#xff0c;方便使用&#xff0c;在其他页面引入就行了 还使用了官方的Breadcrumb组件 import React, { useEffect, useState } from react; import { Breadcrumb, Button } from antd; import { …
阅读更多...
高端入门：Ollama 本地高效部署DeepSeek模型深度搜索解决方案

高端入门：Ollama 本地高效部署DeepSeek模型深度搜索解决方案

目录 一、Ollama 介绍 二、Ollama下载 2.1 官网下载 2.2 GitHub下载 三、模型库 四、Ollmal 使用 4.1 模型运行&#xff08;下载&#xff09; 4.2 模型提问 五、Ollama 常用命令 相关推荐 一、Ollama 介绍 Ollama是一个专为在本地机器上便捷部署和运行大型语言模型&…
阅读更多...
Windows Docker笔记-Docker容器操作

Windows Docker笔记-Docker容器操作

在文章《Windows Docker笔记-Docker拉取镜像》中&#xff0c;已经拉取成功了ubuntu镜像&#xff0c;本章来讲解如何通过镜像来创建容器并运行容器。 这里再类比一下&#xff0c;加深理解&#xff0c;比如&#xff0c;我们现在想开一个玩具厂&#xff0c;我们的最终目的肯定是想…
阅读更多...
Java语法糖详解

Java语法糖详解

前言 在现代编程语言的发展历程中&#xff0c;语法糖&#xff08;Syntactic Sugar&#xff09;作为一种提升代码可读性和开发效率的重要特性&#xff0c;已经成为语言设计的重要组成部分。Java作为一门成熟且广泛应用的编程语言&#xff0c;在其长期演进过程中&#xff0c;语法…
阅读更多...
机器学习中的关键概念：通过SKlearn的MNIST实验深入理解

机器学习中的关键概念：通过SKlearn的MNIST实验深入理解

欢迎来到我的主页&#xff1a;【Echo-Nie】 本篇文章收录于专栏【机器学习】 1 sklearn相关介绍 Scikit-learn 是一个广泛使用的开源机器学习库&#xff0c;提供了简单而高效的数据挖掘和数据分析工具。它建立在 NumPy、SciPy 和 matplotlib 等科学计算库之上&#xff0c;支持…
阅读更多...
Java数据结构与算法之“树”

Java数据结构与算法之“树”

目录 一、什么是树 ​编辑 二、树的相关组成 1. 常用名词 2.需要了解的名词 三、树的分类 &#xff08;一&#xff09;初级树 1.普通树 2.二叉树 &#xff08;二&#xff09;中级树 1.哈夫曼树HuffmanTree 2.二叉搜索树BST 3.平衡二叉树AVL &#xff08;三&#x…
阅读更多...
【Linux】27.Linux 多线程（1）

【Linux】27.Linux 多线程（1）

文章目录 1. Linux线程概念1.1 线程和进程1.2 虚拟地址是如何转换到物理地址的1.3 线程的优点1.4 线程的缺点1.5 线程异常1.6 线程用途 2. Linux进程VS线程2.1 进程和线程2.2 关于进程线程的问题 3. Linux线程控制3.1 POSIX线程库3.2 创建线程3.3 线程终止3.4 线程等待3.5 分离…
阅读更多...
SpringAI系列 - 使用LangGPT编写高质量的Prompt

SpringAI系列 - 使用LangGPT编写高质量的Prompt

目录 一、LangGPT —— 人人都可编写高质量 Prompt二、快速上手2.1 诗人 三、Role 模板3.1 Role 模板3.2 Role 模板使用步骤3.3 更多例子 四、高级用法4.1 变量4.2 命令4.3 Reminder4.4 条件语句4.5 Json or Yaml 方便程序开发 一、LangGPT —— 人人都可编写高质量 Prompt La…
阅读更多...
2025.2.6

2025.2.6

一、C思维导图&#xff1a; 二、C&#xff1a; 三、注释代码 1> 配置文件&#xff1a;.pro文件 QT core gui # 引入的类库&#xff0c;core表示核心库 gui图形化界面库greaterThan(QT_MAJOR_VERSION, 4): QT widgets # 超过版本4的qt&#xff0c;会自动加widgets…
阅读更多...
【算法应用】Alpha进化算法求解二维栅格路径规划问题

【算法应用】Alpha进化算法求解二维栅格路径规划问题

目录 1.算法原理2.二维路径规划数学模型3.结果展示4.参考文献5.代码获取 1.算法原理 Alpha进化&#xff1a;一种具有进化路径自适应和矩阵生成的高效进化算法 2.二维路径规划数学模型 栅格法模型最早由 W.E. Howden 于 1968 年提出&#xff0c;障碍物的栅格用黑色表示&#…
阅读更多...
ubuntu20.04+RTX4060Ti大模型环境安装

ubuntu20.04+RTX4060Ti大模型环境安装

装显卡驱动 这里是重点&#xff0c;因为我是跑深度学习的&#xff0c;要用CUDA&#xff0c;所以必须得装官方的驱动&#xff0c;Ubuntu的附件驱动可能不太行. 进入官网https://www.nvidia.cn/geforce/drivers/&#xff0c;选择类型&#xff0c;最新版本下载。 挨个运行&#…
阅读更多...
Spring Boot 2 快速教程：WebFlux优缺点及性能分析（四）

Spring Boot 2 快速教程：WebFlux优缺点及性能分析（四）

WebFlux优缺点 【来源DeepSeek】 Spring WebFlux 是 Spring 框架提供的响应式编程模型&#xff0c;旨在支持非阻塞、异步和高并发的应用场景。其优缺点如下&#xff1a; 优点 高并发与低资源消耗 非阻塞 I/O&#xff1a;基于事件循环模型&#xff08;如 Netty&#xff09;&am…
阅读更多...
DeepSeek 硅基流动

DeepSeek 硅基流动

DeepSeek 硅基流动 &#x1f381; 四大神仙优势&#x1f31f; 三步拥有官网同款671B大模型1️⃣ 戳这里&#x1f449; 国内直连通道2️⃣ 复制API密钥3️⃣ 安装Chatbox贴进软件秒变AI大佬 &#x1f4c1; 网盘地址&#xff1a;&#xff08;所用到的软件可以直接下载&#xff09…
阅读更多...
mysql 学习10 多表查询 -多表关系，多表查询

mysql 学习10 多表查询 -多表关系，多表查询

多表关系 一对多 多对多 创建学生表 #多对多表 学生选课系统create table student(id int primary key auto_increment comment 主键ID,name varchar(64) comment 姓名,studentnumber varchar(10) comment 学号 )comment 学生表;insert into student(id,name,studentnumber)va…
阅读更多...
云端IDE如何重定义开发体验

云端IDE如何重定义开发体验

豆包 MarsCode 是一个集成了AI功能的编程助手和云端IDE&#xff0c;旨在提高开发效率和质量。它支持多种编程语言和IDE&#xff0c;提供智能代码补全、代码解释、单元测试生成和问题修复等功能&#xff0c;同时具备AI对话视图和开发工具。 豆包 MarsCode 豆包 MarsCode 编程助…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023