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 连接,客户端和浏览器都可以同时发送多个请求和响应,并且不用按照顺序一一对应,避免了队头堵塞。
  • 二进制分帧,使用二进制格式传输数据,解析起来更加的高效。
  • 头部压缩,在客户端和服务端之间使用 首部表 来跟踪和存储之前发送的请求和响应的相关信息,对于相同的数据,可以只发送一次首部,减少开销。
  • 服务器推送,服务端会在一个页面啊请求中把随同页面的一些其他资源主动推送给客户端,不需要客户端再次发送请求获取资源。
相关推荐
又又呢2 小时前
前端面试题总结——webpack篇
前端·webpack·node.js
dog shit3 小时前
web第十次课后作业--Mybatis的增删改查
android·前端·mybatis
我有一只臭臭3 小时前
el-tabs 切换时数据不更新的问题
前端·vue.js
七灵微3 小时前
【前端】工具链一本通
前端
Nueuis4 小时前
微信小程序前端面经
前端·微信小程序·小程序
_r0bin_6 小时前
前端面试准备-7
开发语言·前端·javascript·fetch·跨域·class
IT瘾君6 小时前
JavaWeb:前端工程化-Vue
前端·javascript·vue.js
potender6 小时前
前端框架Vue
前端·vue.js·前端框架
站在风口的猪11087 小时前
《前端面试题:CSS预处理器(Sass、Less等)》
前端·css·html·less·css3·sass·html5
程序员的世界你不懂7 小时前
(9)-Fiddler抓包-Fiddler如何设置捕获Https会话
前端·https·fiddler