【快速入门系列】一篇文章让你入门HTTP2.0

引言

秋招来临,在面试过程中不仅会问到前端知识、算法问题,网络相关的内容也会多少涉及,被问的最多的就是“你了解HTTP2.0吗?”由于这个问题并不能很完美的回答出来,因此特地查阅了相关资料、博客,最终整理出一份通俗易懂的HTTP2.0入门文章,也算是学习笔记,希望能给看到该文章的你带来一些收获。

什么是HTTP2.0

想要了解一个事物,首先就要知道它是什么。

简单来说,HTTP/2(超文本传输协议第2版,最初命名为HTTP2.0),是HTTP协议的第二个主要版本。HTTP/2是HTTP协议自1999年HTTP1.1发布后的首个更新,主要基于SPDY协议。
HTTP2.0的特点是:在不改动HTTP语义、方法、状态码、URI及首部字段的情况下,大幅度提高了web性能。

什么是SPDY协议

刚刚对HTTP2.0的介绍中引出了一个名词 —— SPDY协议,这又是什么呢?

SPDY是Speedy的昵音,意为“更快”。它是Google开发的基于TCP协议的应用层协议。目标是优化HTTP协议的性能,通过压缩、多路复用和优先级等技术,缩短网页的加载时间并提高安全性。SPDY协议的核心思想是尽量减少TCP连接数。SPDY并不是一种用于替代HTTP的协议,而是对HTTP协议的增强。

HTTP1.x的缺点

任何事物的更新都是为了弥补或修复上个版本的某些问题,那么我们来看看HTTP1.x都有哪些缺点以至于我们要使用HTTP2.0。

HTTP1.x有以下几个主要缺点:

  1. HTTP/1.0一次只允许在一个TCP连接上发起一个请求,HTTP/1.1使用的流水线技术也只能部分处理请求并发,仍然会存在队列头阻塞问题,因此客户端在需要发起多次请求时,通常会采用建立多连接来减少延迟。
  2. 单向请求,只能由客户端发起。
  3. 请求报文与响应报文首部信息冗余量大。
  4. 数据未压缩,导致数据的传输量大。

我们可以通过一个链接来对比一下HTTP2.0到底比HTTP1.x快了多少。链接地址

HTTP2.0特点

通过以上内容,你应该已经对HTTP2.0有了初步认识,并且了解了HTTP1.x的缺点。那么下面我们就来了解一下HTTP2.0的特点。

二进制传输

HTTP2.0中所有加强性能的核心是二进制传输,在HTTP1.x中,我们是通过文本的方式传输数据。基于文本的方式传输数据存在很多缺陷,文本的表现形式有多样性,因此要做到健壮性考虑的场景必然有很多,但是二进制则不同,只有0和1的组合,因此选择了二进制传输,实现方便且健壮。
在HTTP2.0中引入了新的编码机制,所有传输的数据都会被分割,并采用二进制格式编码。
图片描述
为了保证HTTP不受影响,那就需要在应用层(HTTP2.0)和传输层(TCP or UDP)之间增加一个二进制分帧层。在二进制分帧层上,HTTP2.0会将所有传输的信息分为更小的消息和帧,并采用二进制格式编码,其中HTTP1.x的首部信息会被封装到Headers帧,而Request Body则封装到Data帧。

多路复用

在HTTP1.0中,我们经常会使用到雪碧图、使用多个域名等方式来进行优化,都是因为浏览器限制了同一个域名下的请求数量,当页面需要请求很多资源的时候,队头阻塞(Head of line blocking)会导致在达到最大请求时,资源需要等待其他资源请求完成后才能继续发送。
HTTP2.0中,有两个概念非常重要:帧(frame)和流(stream)。
帧是最小的数据单位,每个帧会标识出该帧属于哪个流,流是多个帧组成的数据流。
所谓多路复用,即在一个TCP连接中存在多个流,即可以同时发送多个请求,对端可以通过帧中的表示知道该帧属于哪个请求。在客户端,这些帧乱序发送,到对端后再根据每个帧首部的流标识符重新组装。通过该技术,可以避免HTTP旧版本的队头阻塞问题,极大提高传输性能。
图片描述

Header压缩

在HTTP1.0中,我们使用文本的形式传输header,在header中携带cookie的话,每次都需要重复传输几百到几千的字节,这着实是一笔不小的开销。
在HTTP2.0中,我们使用了HPACK(HTTP2头部压缩算法)压缩格式对传输的header进行编码,减少了header的大小。并在两端维护了索引表,用于记录出现过的header,后面在传输过程中就可以传输已经记录过的header的键名,对端收到数据后就可以通过键名找到对应的值。

服务器Push

在HTTP2.0中,服务端可以在客户端某个请求后,主动推送其他资源。
可以想象一下,某些资源客户端是一定会请求的,这时就可以采取服务端push的技术,提前给客户端推送必要的资源,就可以相对减少一点延迟时间。在浏览器兼容的情况下也可以使用prefetch。

更安全

HTTP2.0使用了tls的拓展ALPN做为协议升级,除此之外,HTTP2.0对tls的安全性做了近一步加强,通过黑名单机制禁用了几百种不再安全的加密算法。

额外补充:QUIC

这里额外给大家介绍一个协议,是由Google基于UDP实现的同为传输层的协议,目标是希望替代TCP协议。
该协议支持多路复用,虽然说HTTP2.0也支持多路复用,但是下层仍然是TCP,因为TCP的重传机制,只要一个包丢失就得判断丢包并且重传,导致发生队头阻塞的问题,但是UDP没有这个限制。除此之外,它还有如下特点:

  1. 实现了自己的加密协议,通过类似TCP的TFO机制实现0-RTT,当然TLS1.3已经实现了0-RTT。
  2. 支持重传和纠错机制,在只丢失一个包的情况下不需要重传,使用纠错机制恢复丢失的包。

    • 纠错机制:通过异或的方式,算出发出去的数据的异或值并单独发出一个包,服务端在发现有一个包丢失的情况下,通过其他数据包的异或值包算出丢失包。
    • 在丢失两个包及以上的情况就是用重传机制,因为算不出来了。

结束语

以上内容是我在查阅了大量相关资料后总结的一些关于HTTP2.0的基本知识,如果还想了解更深的内容可以去做进一步的学习。

参考资料:
InterviewMap
程序员面试必考题(二十五)---SPDY与HTTP/2协议
Http 1.x弊端与Http 2.0比较
HTTP 2.0与HTTP 1.1区别
HTTP2.0性能增强的核心:二进制分帧

Miyang的前端圈儿
分享前端技术,前端开发相关知识。

快手前端工程师

196 声望
10 粉丝
0 条评论
推荐阅读
更好理解的面向对象的Javascript 1 —— 动态类型和多态
曾经对Javascript的面向对象相关知识也有过了解,从各种博客、书籍上也学到了很多。但是最近在看《Javascript设计模式与开发实战》这本书时发现该书对这方面的知识点介绍的很易于理解,因此总结出该文章分享给大...

Miyang阅读 1.8k

正则表达式实例
收集在业务中经常使用的正则表达式实例,方便以后进行查找,减少工作量。常用正则表达式实例1. 校验基本日期格式 {代码...} {代码...} 2. 校验密码强度密码的强度必须是包含大小写字母和数字的组合,不能使用特殊...

寒青56阅读 7.9k评论 11

JavaScript有用的代码片段和trick
平时工作过程中可以用到的实用代码集棉。判断对象否为空 {代码...} 浮点数取整 {代码...} 注意:前三种方法只适用于32个位整数,对于负数的处理上和Math.floor是不同的。 {代码...} 生成6位数字验证码 {代码...} ...

jenemy46阅读 6k评论 12

从零搭建 Node.js 企业级 Web 服务器(十五):总结与展望
总结截止到本章 “从零搭建 Node.js 企业级 Web 服务器” 主题共计 16 章内容就更新完毕了,回顾第零章曾写道:搭建一个 Node.js 企业级 Web 服务器并非难事,只是必须做好几个关键事项这几件必须做好的关键事项就...

乌柏木66阅读 6.2k评论 16

再也不学AJAX了!(二)使用AJAX ① XMLHttpRequest
「再也不学 AJAX 了」是一个以 AJAX 为主题的系列文章,希望读者通过阅读本系列文章,能够对 AJAX 技术有更加深入的认识和理解,从此能够再也不用专门学习 AJAX。本篇文章为该系列的第二篇,最近更新于 2023 年 1...

libinfs39阅读 6.3k评论 12

封面图
从零搭建 Node.js 企业级 Web 服务器(一):接口与分层
分层规范从本章起,正式进入企业级 Web 服务器核心内容。通常,一块完整的业务逻辑是由视图层、控制层、服务层、模型层共同定义与实现的,如下图:从上至下,抽象层次逐渐加深。从下至上,业务细节逐渐清晰。视图...

乌柏木44阅读 7.4k评论 6

CSS 绘制一只思否猫
欢迎关注我的公众号:前端侦探练习 CSS 有一个比较有趣的方式,就是发挥想象,绘制各式各样的图案,比如来绘制一只思否猫?思否猫,SegmentFault 思否的吉祥物,是一只独一无二、特立独行、热爱自由的(>^ω^&lt...

XboxYan43阅读 3k评论 14

封面图

快手前端工程师

196 声望
10 粉丝
宣传栏