前言HTTP/2相比HTTP/1.1可以大大提升网页的性能，只需要升级到这个协议就可以减少很多之前的工作性能优化工作，当然兼容性问题以及如何优雅降级应该是在国内没有广泛使用的原因之一。HTTP/2虽然提高了网页的性能，但并不代表它就是完美的。HTTP/3的推出是为了解决HTTP/2中存在的一些问题。1、HTTP/1.1发明以来发生了哪些变化？如果仔细观察打开最热门网站的首页需要下载的资源，就会发现一个非常明显的趋势。近年来，加载网站首页所需的下载数据量逐渐增加，已超过2100K。但是这里我们更应该关注的是：每个页面完成显示渲染需要下载的资源平均数量已经超过了100个。如下图所示，自2011年以来，传输大小和平均请求资源数量继续增长，没有放缓的迹象。图中绿色直线表示传输数据大小的增长，红色直线表示平均请求资源数的增长。自从HTTP/1.1于1997年发布以来，我们一直在使用HTTP/1.x，但随着过去十年互联网的爆炸式发展，从最初的以文本为主的网页内容，到现在的富媒体（如图片、声音、视频），对页面内容实时性要求高的应用越来越多（如聊天、视频直播），所以当时协议规定的一些功能已经不能满足需求的现代网络。2.HTTP/1.1的缺陷1.高延迟——降低页面加载速度虽然近年来网络带宽增长非常快，但是我们并没有看到网络延迟相应的降低。网络延迟问题主要是由于线头阻塞（Head-Of-LineBlocking）导致带宽没有得到充分利用。队头阻塞是指当顺序发送的请求序列中的一个请求由于某种原因被阻塞时，所有排在后面的请求也将被阻塞，这将导致客户端延迟接收数据。对于队头拦截，人们尝试过以下解决方案：将同一页面的资源分散到不同的域名下，增加连接数限制。Chrome有一个机制。对于同一个域名，默认允许同时建立6个TCP长连接。使用持久连接时，虽然可以共享一个TCP管道，但是一个管道中一次只能处理一个请求。当前没有请求结束，只能阻塞其他请求。另外，如果同一域名下同时有10个请求，则其中4个会进入等待状态，直到正在进行的请求完成。Spriting将多张小图组合成一张大图，然后使用JavaScript或CSS将小图再次“裁剪”。内联是另一种防止发送许多小图像请求的技术。将图片的原始数据嵌入到CSS文件中的URL中，减少网络请求次数。.icon1{background:url(data:image/png;base64,)不重复；}.icon2{背景：url(data:image/png;base64,)不重复；}splice(Concatenation)使用webpack等工具将多个较小的JavaScript文件打包成一个较大的JavaScript文件，但如果其中一个文件发生变化，会重新下载大量数据，同时会下载多个文件。2、无状态特性——消息头带来的庞大的HTTP头一般会携带很多固定的头域，例如“UserAgent”、“Cookie”、“Accept”和“Server”（如下图所示），最多几百个字符Sections甚至几千个字节，而body往往只有几十个字节（比如GET请求，204/301/304响应），成为不折不扣的“大儿子”。Header中携带的内容过多，一定程度上增加了传输成本。更要命的是，数千条请求响应报文中很多字段值都是重复的，非常浪费。3、明文传输——HTTP/1.1在传输数据时带来的不安全性，传输的内容都是明文，无论是客户端还是服务端都无法验证对方的身份，无法在一定程度上保证数据安全程度性。您听说过有关“免费WiFi陷阱”的新闻吗？黑客利用HTTP明文传输的缺点，在公共场所设置WiFi热点，开始“钓鱼”，诱骗网民上网。一旦连接到此WiFi热点，所有流量将被拦截并保存。如果里面有银行卡号、网站密码等敏感信息，就会很危险。黑客拿到这些数据就可以假装成你为所欲为。4.不支持服务器推送消息。三、SPDY协议和HTTP/2介绍1、上面SPDY协议中提到，由于HTTP/1.x的缺陷，我们会引入sprite图片、inline小图、使用多域名等方式来实现提高性能。然而，这些优化绕过了协议。直到2009年，谷歌发布了自主研发的SPDY协议，主要解决了HTTP/1.1效率低下的问题。Google推出SPDY是对HTTP协议本身的正式改造。减少延迟、压缩头部等，SPDY的实践证明了这些优化的效果，最终带来了HTTP/2的诞生。HTTP/1.1有两个主要缺点：安全性不足和性能低下。由于HTTP/1.x的巨大历史包袱，兼容性是协议修改的首要目标，否则将摧毁无数现有资产。如上图所示，SPDY位于HTTP之下，TCP和SSL之上，这样可以方便的兼容旧版本的HTTP协议（将HTTP1.x的内容封装成新的帧格式），并且可以使用现有的SSL功能。SPDY协议在Chrome浏览器上被证明可行后，被视为HTTP/2的基础，主要特性在HTTP/2中得到继承。2.HTTP/2简介2015年，HTTP/2发布。HTTP/2是当前HTTP协议(HTTP/1.x)的替代品，但不是重写。HTTP方法/状态代码/语义与HTTP/1.x相同。HTTP/2基于SPDY，注重性能。最大的目标之一是在用户和网站之间只使用一个连接。从目前的情况来看，国内外一些排名靠前的站点基本都实现了HTTP/2的部署，使用HTTP/2可以带来20%到60%的效率提升。HTTP/2包含两个规范（Specification）：HypertextTransferProtocolversion2-RFC7540HPACK-HeaderCompressionforHTTP/2-RFC7541四、HTTP/2的新特性1、二进制传输HTTP/2传输数据量大大减少，主要是有两个原因：二进制传输和标头压缩。先介绍一下二进制传输。HTTP/2使用二进制格式传输数据，而不是HTTP/1.x中的纯文本消息。二进制协议解析起来更有效。HTTP/2将请求和响应数据拆分为更小的帧，并以二进制编码。它将TCP协议的一些特性移到了应用层，将原来的“Header+Body”报文“打散”成几个小块的二进制“帧”（Frame），并使用“HEADERS”帧来存储头部数据，“数据”框架存储实体数据。HTP/2数据分帧后，“Header+Body”消息结构完全消失，协议看到的只是一个个“碎片”。在HTTP/2中，同一个域名下的所有通信都在一个连接上完成，可以承载任意数量的双向数据流。每个数据流都作为消息发送，消息又由一个或多个帧组成。多个帧可以乱序发送，可以根据帧头中的流标识重新组合。2.Header压缩HTTP/2没有使用传统的压缩算法，而是开发了一种特殊的“HPACK”算法，在客户端和服务器端构建一个“字典”，使用索引号表示重复的字符串，使用哈希Fmanencoding用于压缩整数和字符串，可以达到50%~90%的高压缩率。具体来说：利用客户端和服务端的“头表”来跟踪和存储之前发送的键值对，对于相同的数据，不再通过每次请求和响应发送；头表在HTTP/2连接期间一直存在，由客户端和服务端逐步更新；每个新的标题键值对要么附加到当前表的末尾，要么替换表中的先前值。比如下图中的两个请求，第一个请求发送所有的header字段，第二个请求只需要发送差异数据，这样可以减少冗余数据，减少开销。3.多路复用多路复用技术是在HTTP/2中引入的。多路复用解决了浏览器限制同一域名下请求数的问题，也更容易实现全速传输。毕竟开启新的TCP连接需要慢慢提高传输速度。你可以通过这个链接直观感受一下HTTP/2比HTTP/1快了多少。在HTTP/2中，有了二进制帧，HTTP/2不再依赖TCP连接来实现多流并行。在HTTP/2中，同一个域名下的所有通信都在一个连接上完成。单个连接可以承载任意数量的双向数据流。数据流以消息的形式发送，消息由一个或多个帧组成，多个帧可以乱序发送，因为可以根据帧头中的流标识符重新组装。这一特性极大地提升了性能：同一个域名只需要占用一个TCP连接，并使用一个连接并行发送多个请求和响应，这样整个页面资源的下载过程只需要一个慢启动，并且它也避免了多个TCP连接竞争带宽带来的问题。并行和交错发送多个请求/响应，而不会相互影响。在HTTP/2中，每个请求可以携带一个31位的优先级值，0表示最高优先级，值越大优先级越低。有了这个优先级值，客户端和服务端在处理不同的流时可以采取不同的策略，以最优的方式发送流、消息和帧。如上图所示，多路复用技术可以只通过一个TCP连接传输所有的请求数据。4、ServerPushHTTP2也在一定程度上改变了传统的“请求-响应”工作模式。服务器不再完全被动地响应请求，而是还可以创建一个新的“流”来主动向客户端发送消息。比如当浏览器刚请求HTML时，将可能用到的JS、CSS文件提前发送给客户端，减少等待延迟。这叫做“服务器推送”（ServerPush，也叫缓存推送）。例如下图，服务端主动推送JS和CSS文件给客户端，而不是在客户端解析HTML时发送这些请求。另外需要补充一点，服务端可以主动推送，客户端也有选择是否接收的权利。如果服务器推送的资源已经被浏览器缓存，浏览器可以通过发送RST_STREAM帧来拒绝。主动推送也遵循同源策略。也就是说，服务端不能随便向客户端推送第三方资源，必须经过双方确认。5.提高安全性。为了兼容性，HTTP/2延续了HTTP/1的“明文”特性。可以像以前一样使用明文传输数据，不强制加密通信。不过格式还是二进制的，只是不需要解密。但是，由于HTTPS已经是大势所趋，而Chrome、Firefox等主流浏览器已经公开声明只支持加密的HTTP/2，所以“实际”的HTTP/2是加密的。换句话说，通常在互联网上看到的HTTP/2使用“https”协议名称并在TLS上运行。HTTP/2协议定义了两个字符串标识符：“h2”用于加密HTTP/2，“h2c”用于明文HTTP/2。六、HTTP/3的新特性1、HTTP/2的缺点虽然HTTP/2解决了之前版本的很多问题，但是它仍然存在一个巨大的问题，这主要是底层支持的TCP协议造成的。HTTP/2的缺点主要有以下几点：TCP和TCP+TLS连接建立延迟HTTP/2使用TCP协议进行传输，如果使用HTTPS，还需要TLS协议进行安全传输，使用TLS也需要A需要握手过程，所以需要两个握手延时过程：①建立TCP连接时，需要与服务器进行三次握手，确认连接成功，即只能进行数据传输消耗1.5RTT后。②对于TLS连接，TLS有两个版本——TLS1.2和TLS1.3，每个版本建立连接的时间不同，大概需要1~2个RTT。总而言之，在传输数据之前，我们需要花费3-4个RTT。TCP的队头阻塞并没有完全解决上面提到的在HTTP/2中，多个请求在一个TCP管道中运行。但是当出现丢包的时候，HTTP/2的性能是不如HTTP/1的。因为TCP为了保证可靠传输有特殊的“丢包重传”机制，丢失的数据包必须等待重传确认，当HTTP/2发生丢包时，整个TCP会开始等待重传，然后会阻塞所有请求此TCP连接（如下图所示）。对于HTTP/1.1，可以打开多个TCP连接。在这种情况下，只有一个连接会受到影响，其余的TCP连接仍然可以正常传输数据。读到这里，可能有人会想为什么不直接修改TCP协议呢？其实这已经是不可能完成的任务了。因为TCP存在时间太久，已经泛滥在各种设备中，而且这个协议是操作系统实现的，所以更新它也不现实。2.HTTP/3简介Google在推出SPDY时就意识到了这些问题，因此在UDP协议的基础上启动了一个新的“QUIC”协议，让HTTP运行在QUIC上而不是TCP上。而这个“HTTPoverQUIC”就是HTTP协议的下一个主要版本，HTTP/3。它在HTTP/2的基础上实现了质的飞跃，真正“完美”解决了“队头阻塞”问题。QUIC虽然是基于UDP的，但是在原有的基础上增加了很多新的功能。下面重点介绍一下QUIC的几个新功能。不过HTTP/3目前还处于草案阶段，在正式发布之前可能会有变动，所以本文尽量不涉及那些不稳定的细节。3、QUIC的新功能我们上面提到QUIC是基于UDP的，而UDP是“无连接”的，根本不需要“握手”和“挥手”，所以速度比TCP快。此外，QUIC还实现了可靠传输，保证数据能够到达目的地。它还引入了类似HTTP/2的“流”和“多路复用”，单个“流”是有序的，可能会因丢包而被阻塞，但其他“流”不受影响。具体来说，QUIC协议具有以下特点：实现了类似TCP的流量控制和传输可靠性等功能。虽然UDP不提供可靠传输，但是QUIC在UDP之上加了一层保证数据可靠传输。它提供数据包重传、拥塞控制和TCP中的其他功能。实现了快速握手功能。由于QUIC是基于UDP的，QUIC可以使用0-RTT或者1-RTT建立连接，也就是说QUIC可以最快的速度发送和接收数据，可以大大提高首次打开页面的速度.0RTT连接建立可以说是QUIC相较于HTTP2最大的性能优势。集成TLS加密功能。目前，QUIC使用的是TLS1.3，相比早期版本的TLS1.3有更多的优势，其中最重要的是它减少了握手所花费的RTT次数。多路复用，彻底解决TCP中的队头阻塞问题与TCP不同，QUIC实现了同一个物理连接上可以有多个独立的逻辑数据流（如下图所示）。实现了数据流的分离传输，解决了TCP中队头阻塞的问题。7.总结HTTP/1.1有两个主要缺点：安全性不足和性能低下。HTTP/2与HTTP/1完全兼容，是“更安全的HTTP，更快的HTTPS”。头部压缩、复用等技术可以充分利用带宽，减少延迟，从而大大提升在线体验；QUIC是基于UDP实现的，是HTTP/3中的底层支持协议。该协议以UDP为基础，吸取了TCP的精华，实现了一种快速可靠的协议。欢迎关注公众号：前端工匠，让我们一起见证你的成长！向大家推荐一款好用的BUG监控工具Fundebug，欢迎免费试用！参考文章珠峰架构课程（强烈推荐）透视HTTP协议Web协议与抓包详解实际浏览器工作原理与实践HTTP2详解一篇看懂HTTP/2特性科普：QUIC协议原理解析
