的四大核心特性[.com原稿]前言与HTTP/1.1相比，HTTP/2可以大大提高网页的性能，只需要升级到这个协议就可以减少很多之前的工作。当然，兼容性问题以及如何优雅降级应该是它在国内没有被广泛使用的原因之一。1、HTTP/1.1发明以来发生了哪些变化？如果仔细观察打开最热门网站的首页需要下载的资源，就会发现一个非常明显的趋势。近年来，加载网站首页所需的下载数据量逐渐增加，已超过2100K。但这里更值得我们关注的是：平均每个页面完成显示渲染需要下载的资源数量已经超过100个，如下图所示，传输大小和平均请求资源数量持续增长自2011年以来增长，没有放缓的迹象。图中绿色直线表示传输数据大小的增长，红色直线表示平均请求资源数的增长。自1997年HTTP/1.1发布以来，我们使用HTTP/1.x已经有相当长的一段时间了，但是随着过去十年互联网的爆炸式发展，从最初的以文本为主的网络内容，到现在的富媒体（如图片、声音、视频），对页面内容实时性要求高的应用越来越多（如聊天、视频直播），所以当时协议规定的一些功能已经不能满足需求的现代网络。2.HTTP/1.1的缺陷1.高延迟——降低页面加载速度虽然近年来网络带宽增长非常快，但是我们并没有看到网络延迟相应的降低。网络延迟问题主要是由于线头阻塞（Head-Of-LineBlocking）导致带宽没有得到充分利用。队头阻塞是指当顺序发送的请求序列中的一个请求由于某种原因被阻塞时，所有排在后面的请求也将被阻塞，这将导致客户端延迟接收数据。对于队头阻塞，人们尝试过以下解决方案：Spriting将多张小图组合成一张大图，然后使用JavaScript或CSS将小图再次“裁剪”。内联是另一种防止发送许多小图像请求的技术。将图片的原始数据嵌入到CSS文件中的URL中，减少网络请求次数。.icon1{background:url(data:image/png;base64,)no-repeat;}.icon2{background:url(data:image/png;base64,)no-repeat;}拼接(Concatenation）使用webpack等工具将多个较小的JavaScript文件打包成一个较大的JavaScript文件，但如果其中一个文件发生变化，会重新下载大量数据，同时会下载多个文件。将同一页面的资源分散到不同域名下，增加连接数上限。Chrome有一个机制。同一个域名最多只能同时建立6个TCP连接。如果同一域名下同时出现10个请求，则其中4个会进入等待状态，直到正在进行的请求完成。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的巨大历史包袱，兼容性是协议修改的首要目标，否则会毁掉无数的HTTP/1。现有资产。如上图所示，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包含两个规范（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/1.x存在连接无法重用、队头阻塞、协议开销高、安全因素等多重缺陷。HTTP/2通过多路复用、二进制流、Header压缩等技术极大地提升了性能。HTTP2将逐渐取代HTTP/1.x并被广泛采用。参考文章透视HTTP协议Web协议详解及抓包实战详解HTTP2详解HTTP2.0协议前端面试之道一篇文章看懂HTTP/2特性个人公众号：《前端工匠》，致力于打造一系列适合初中级工程师快速吸收的优质文章！【原创稿件，合作网站转载请注明原作者和出处为.com】
