HTTP1.0、1.1、2.0 的区别

HTTP1.0、1.1、2.0 的区别

HTTP1.0

HTTP1.0 浏览器与服务器只保持短暂的连接,每次请求都需要重新建立 TCP 连接,服务器完成请求处理后立即断开连接。

例如,一个 html 页面包含了 10 个 静态资源,如(HTMLCSSJS、图片等),需要 ​​10 次 TCP 握手和挥手 ​​,效率极低。

如果需要建立长连接,需要设置一个非标准字段 Connection: keep-alive

HTTP1.1

HTTP1.1 中,默认支持长连接,即在一个 TCP 连接上可以传送多个请求或响应,减少了建立和关闭连接的消耗和延迟。

同时,HTTP1.1 还允许客户端在不用等待上一次的请求结果返回就可以发出下一次的请求,但需要注意的是,服务端必须按照客户端的请求顺序返回响应,这是为了保证客户端能够区分每个请求的响应内容。

此外,HTTP1.1 还在 HTTP1.0 的基础上增加了更多的请求头和响应头,例如:

  • 引入了更多的缓存策略,例如 Cache-ControlExpiresLast-ModifiedETag 等;
  • 引入了range,允许请求资源的部分内容;
  • 引入了 host,支持虚拟主机(一个 IP 地址和端口可托管多个域名)

HTTP1.1 还添加了更多的请求方法,例如: PUTPATCHDELETEOPTIONS 等。

HTTP2.0

HTTP2.0 相比于之前的版本,性能上有很大的提升,主要体现这四个部分:

  • 多路复用
  • 二进制分帧
  • 头部压缩
  • 服务器推送

多路复用

HTTP2.0 能够复用同一个 TCP 连接,客户端和浏览器都可以同时发送多个请求和响应,并且不用按照顺序一一对应,避免了队头堵塞。

上图中,可以看出 cssjs 资源是同时发给服务器的,可以并行传输。这就是多路复用。

二进制分帧

HTTP2.0 使用二进制格式传输数据,而非 HTTP 1 的文本格式,解析起来更加的高效。

将请求和响应数据分割为更小的帧,并对它们采用二进制格式编码,可以更有效地利用网络资源,提高传输速度。

HTTP2.0 中 同域名下的所有通信都在单个连接上完成,该连接可以承载任意数量的双向数据流,每个数据流都以消息的形式发送,而消息又由一个或多个帧组成,多个帧之间可以乱序发送,根据帧首部的流标识符重新组装。这也是多路复用的前提条件。

头部压缩

HTTP2.0中在客户端和服务端之间使用 首部表 来跟踪和存储之前发送的请求和响应的相关信息,对于相同的数据,可以只发送一次首部,减少开销。

首部表 在 HTTP2.0 的连接期间一直存在,有客户端和服务端共同渐进式更新。

服务器推送

HTTP2.0 允许服务器在客户端需要数据时主动推送数据,而不用等到客户端发送请求。

服务端会在一个页面啊请求中把随同页面的一些其他资源主动推送给客户端,不需要客户端再次发送请求获取资源。

总结

HTTP1.0:

  • 短连接,每次请求都需要重新建立 TCP 连接,效率低下。

HTTP1.1:

  • 长连接,默认支持,可以复用 TCP 连接,减少建立和关闭连接的消耗和延迟。
  • 缓存机制,可以减少请求响应时间。
  • 增加了一些请求头和响应头,例如 Cache-ControlExpiresLast-ModifiedETag 等。
  • 增加了更多的请求方法,例如 PUTPATCHDELETEOPTIONS 等。

HTTP2.0:

  • 多路复用,同一个 TCP 连接,客户端和浏览器都可以同时发送多个请求和响应,并且不用按照顺序一一对应,避免了队头堵塞。
  • 二进制分帧,使用二进制格式传输数据,解析起来更加的高效。
  • 头部压缩,在客户端和服务端之间使用 首部表 来跟踪和存储之前发送的请求和响应的相关信息,对于相同的数据,可以只发送一次首部,减少开销。
  • 服务器推送,服务端会在一个页面啊请求中把随同页面的一些其他资源主动推送给客户端,不需要客户端再次发送请求获取资源。
相关推荐
徐小夕几秒前
牛!用vue3实现的多维表格编辑器,小白也能轻松构建复杂数据报表!
前端·javascript·vue.js
爱编程的喵3 分钟前
CSS动画实战:从零打造一个超萌的小球亲亲动画
前端·css
zmirror4 分钟前
Webpack5 多页面实践
前端
cccyi75 分钟前
vue前置知识-end
前端·javascript·vue.js
JaysonJin8 分钟前
一文搞懂 Vue Router 的钩子函数和实战用法!
前端
DoraBigHead11 分钟前
for...in 和 for...of 的终极区别:一文彻底解决你的困惑
前端·javascript·面试
JaysonJin14 分钟前
教你如何用 localStorage+Vue 状态管理玩转数据持久化!
前端·面试
0wioiw015 分钟前
Flutter基础(前端教程⑦-Http和卡片)
前端·flutter·http
小猫由里香16 分钟前
CSS `filter` 属性详解:图像滤镜效果全解析
前端
ice8518 分钟前
LLM流式输出实现
前端·人工智能·面试