[HTTP] HTTP 1.1/2/3
HTTP1.1
假设你开了一家小卖部,但只有1个快递员帮你送货。这时候你会发现两个问题:
1️⃣ 队头阻塞问题:想象快递员每次只能拿一个快递,而且要严格按照顺序送。如果第一个快递是送到很远的山区(需要2小时),后面所有快递都要等这个山区快递送完才能出发。这时候就算后面的快递都是送到隔壁小区(只要5分钟),也要白白等2小时!这就是"队头阻塞"——前面慢的请求会堵住后面所有请求。
2️⃣ 请求排队问题:后来你招了6个快递员(Chrome浏览器最多同时发6个请求)。当你要送第7个快递时,会发现所有快递员都在忙,新快递只能放在门口的篮子里排队。直到有快递员送完回来,才能处理篮子里积压的快递。这时候你的小卖部门口就会堆满等待的快递!
✏️ 总结成两句话:
-
队头阻塞就像只有一个窗口的食堂,前面同学点10碗拉面,后面买包子的同学也得等着。
-
请求排队就像游乐场的过山车,虽然有6个座位(6个并发请求),但第7个人必须等有人玩完才能上车。
HTTP2
假设你的小卖部升级成了物流中心,还买了一辆大货车(HTTP/2 的一个 TCP 连接)。这辆货车有 3 个神奇功能:
1️⃣ 多路复用(一次装所有快递,不用排队!)
-
旧问题(HTTP/1.1):6个快递员各自开小车送快递(6个TCP连接),每辆车只能装1个快递(一个请求)。
-
新方案(HTTP/2):一辆大货车把所有快递拆成小包裹,混在一起装车,同时出发!
-
比如:第1个快递(A)拆成包裹A1、A2、A3,第2个快递(B)拆成包裹B1、B2,所有包裹同时发车。
-
货车到达后,快递员再把这些小包裹按编号拼回完整的快递(二进制分帧传输)。
-
结果:远距离的快递(A)和近距离的快递(B)的包裹交替运输,谁先到就先处理谁,彻底消灭队头阻塞!
-
2️⃣ 优先级(加急快递先送!)
-
旧问题:所有快递按先来后到处理,重要的文件可能被卡在后面。
-
新方案:给每个快递贴优先级标签!比如:
-
⚡️网页的HTML/CSS文件:最高优先级(贴红色标签),货车优先运输。
-
🖼️网页的图片:普通优先级(贴蓝色标签),有空位再运。
-
结果:用户打开网页时,文字和排版先加载出来(不卡顿),图片慢慢显示,体验更流畅!
-
3️⃣ 头部压缩(包裹体积缩小!)
-
旧问题:每个快递都要带一张巨大的快递单(HTTP头部),重复写收货地址、发货人等信息。
-
新方案:用缩写符号代替重复内容(HPACK算法)。
-
比如:第一次写"收货地址:北京市海淀区",之后直接用代号"#1"表示。
-
结果:快递单体积缩小,货车能装更多包裹!
-
直观对比:HTTP/1.1 vs HTTP/2
场景 | HTTP/1.1 | HTTP/2 |
---|---|---|
快递运输方式 | 6辆小车各自运1个 | 1辆大货车运所有 |
队头阻塞 | ✅ 严重(小车堵住) | ❌ 消失(包裹交替运) |
优先级处理 | ❌ 没有 | ✅ 智能标签 |
快递单(头部) | 重复写,体积大 | 缩写符号,体积小 |
实际效果(打开一个网页)
-
HTTP/1.1:6个快递员疯狂来回跑,第7个文件必须等,远距离文件卡住所有人。
-
HTTP/2:一辆大货车把所有文件拆成小包裹,混在一起运。用户先看到文字,再看到图片逐渐加载,几乎没有卡顿!
HTTP3
假设你的物流中心又升级了!这次买了会飞的魔法货车(HTTP/3的QUIC协议),它用UDP协议(而不是TCP)当燃料,还自带3个神器:
1️⃣ 独立货舱(彻底消灭队头阻塞!)
-
旧问题(HTTP/2):大货车虽然能混装包裹,但如果爆胎了(TCP丢包),所有包裹都要等修好轮胎才能继续送。
-
新方案(HTTP/3):把货车变成无数个小飞行舱,每个舱只装一个包裹,独立飞行!
-
比如:包裹A1、A2、B1、B2各自飞向目的地,互不干扰。
-
如果包裹A1的飞行舱坏了(丢包),只重飞A1,其他包裹照常飞!
-
结果:连修轮胎的等待时间都没了,彻底解决队头阻塞!
-
2️⃣ 闪电握手(0秒建立连接!)
-
旧问题:HTTP/2的货车每次出发前,司机要和客户握手3次(TCP三次握手),耗时1.5秒。
-
新方案:飞行货车自带人脸识别系统(首次连接就加密),以后见面直接起飞!
-
第一次送货:司机和客户交换秘密暗号(加密密钥),耗时1秒。
-
之后送货:刷脸秒过,0秒起飞!
-
结果:网页打开速度更快,尤其是手机网络切换WiFi/4G时(比如进地铁),连接几乎不断!
-
3️⃣ 自带防弹装甲(加密所有包裹!)
-
旧问题:HTTP/2的货车虽然安全,但货舱门(TCP协议)本身不加密,黑客可能撬门。
-
新方案:飞行货车的整个机身(QUIC协议)都裹上防弹装甲,连螺丝钉都加密!
-
黑客想偷看包裹?连轮胎气压数据都看不懂!🔐
-
结果:安全性拉满,用户隐私更有保障!
-
对比HTTP/2和HTTP/3
场景 | HTTP/2 | HTTP/3 |
---|---|---|
运输协议 | 传统货车(TCP协议) | 飞行货车(UDP+QUIC协议) |
队头阻塞 | ❗️ 爆胎会堵住所有包裹 | ✅ 包裹独立飞,堵不住! |
首次连接速度 | 1.5秒(三次握手) | 1秒(加密+握手合并) |
网络切换 | 需重新握手(卡顿) | 秒切网络(无感) |
安全性 | 货舱加密,车门不加密 | 全身加密,黑客无从下手 |
实际效果(极端情况测试)
-
HTTP/2:用4G打开网页时,电梯里信号丢包,整个网页卡住转圈圈⏳。
-
HTTP/3:同样的场景,只有模糊的图片加载慢,文字和按钮照样秒加载,用户能正常操作!✨
终极总结:
-
HTTP/1.1 → 6辆三轮车送快递(慢、堵、累)。
-
HTTP/2 → 1辆大货车混装送(快,但怕爆胎)。
-
HTTP/3 → 满天飞行舱狂飙(又快又稳,爆胎也不怕)!
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 在鹅厂做java开发是什么体验
· 百万级群聊的设计实践
· WPF到Web的无缝过渡:英雄联盟客户端的OpenSilver迁移实战
· 永远不要相信用户的输入:从 SQL 注入攻防看输入验证的重要性
· 浏览器原生「磁吸」效果!Anchor Positioning 锚点定位神器解析
2024-02-21 [Rust] Char vs String
2023-02-21 [Javascript Tips] Using Map over Object
2021-02-21 [Javascript] Intl.ListFormat
2020-02-21 [Javascript] Understanding the difference between .prototype and .__proto__ in JavaScript
2020-02-21 [Javascript] let doesn't hoist -- false
2020-02-21 [AST Babel Plugin] Hanlde ArrowFunction && FunctionExpression
2020-02-21 [AST Babel] Add function name into the console log 'path.findParent(t.isFunctionDeclaration)'