HTTP2优势1

最新推荐文章于 2022-05-22 11:30:57 发布

转载最新推荐文章于 2022-05-22 11:30:57 发布 · 541 阅读

网络协议专栏收录该内容

13 篇文章

订阅专栏

作者：Leo Zhang
链接：https://www.zhihu.com/question/34074946/answer/75364178
来源：知乎
著作权归作者所有，转载请联系作者获得授权。

HTTP 2.0 的出现，相比于 HTTP 1.x ，大幅度的提升了 web 性能。在与 HTTP/1.1 完全语义兼容的基础上，进一步减少了网络延迟。而对于前端开发人员来说，无疑减少了在前端方面的优化工作。本文将对 HTTP 2.0 协议个基本技术点进行总结，联系相关知识，探索 HTTP 2.0 是如何提高性能的。

初露锋芒

HTTP/2: the Future of the Internet 这是 Akamai 公司建立的一个官方的演示，用以说明 HTTP/2 相比于之前的 HTTP/1.1 在性能上的大幅度提升。同时请求 379 张图片，从Load time 的对比可以看出 HTTP/2 在速度上的优势。

&lt;img src="https://i-blog.csdnimg.cn/blog_migrate/649c8328bb153d2aabf3587ae40995d8.png" data-rawwidth="945" data-rawheight="585" class="origin_image zh-lightbox-thumb" width="945" data-original="https://pic1.zhimg.com/a8c500242cca3edb042b194d90763658_r.png"&gt;

此时如果我们打开 Chrome Developer Tools 查看 Network 一栏可以发现，HTTP/2 在网络请求方面与 HTTP /1.1的明显区别。

HTTP/1:

&lt;img src="https://i-blog.csdnimg.cn/blog_migrate/a154217dbf85560522f3f55077888bc0.png" data-rawwidth="986" data-rawheight="767" class="origin_image zh-lightbox-thumb" width="986" data-original="https://pic1.zhimg.com/da14f0743605dfd3162b709adbb601b4_r.png"&gt;

HTTP/2:

&lt;img src="https://i-blog.csdnimg.cn/blog_migrate/25661ba29feb2db21f3235d0672da66b.png" data-rawwidth="980" data-rawheight="762" class="origin_image zh-lightbox-thumb" width="980" data-original="https://pic3.zhimg.com/cf8b9bbee7dc03970829ef722be61492_r.png"&gt;
多路复用 (Multiplexing)

多路复用允许同时通过单一的 HTTP/2 连接发起多重的请求-响应消息。

众所周知，在 HTTP/1.1 协议中「浏览器客户端在同一时间，针对同一域名下的请求有一定数量限制。超过限制数目的请求会被阻塞」。

Clients that use persistent connections SHOULD limit the number of simultaneous connections that they maintain to a given server. A single-user client SHOULD NOT maintain more than 2 connections with any server or proxy. A proxy SHOULD use up to 2*N connections to another server or proxy, where N is the number of simultaneously active users. These guidelines are intended to improve HTTP response times and avoid congestion.

来源：RFC-2616-8.1.4 Practical Considerations
HTTP/1.1: Connections

该图总结了不同浏览器对该限制的数目。
&lt;img src="https://i-blog.csdnimg.cn/blog_migrate/1f8e4176995090757eb22876560be3c9.png" data-rawwidth="708" data-rawheight="359" class="origin_image zh-lightbox-thumb" width="708" data-original="https://pic2.zhimg.com/faedeb3dae59455f6520d6a5dbf436e5_r.png"&gt;来源: 来源:
Roundup on Parallel Connections
这也是为何一些站点会有多个静态资源 CDN 域名的原因之一，拿 Twitter 为例， http://twimg.com，目的就是变相的解决浏览器针对同一域名的请求限制阻塞问题。
而 HTTP/2 的多路复用(Multiplexing) 则允许同时通过单一的 HTTP/2 连接发起多重的 请求-响应消息。
&lt;img src="https://i-blog.csdnimg.cn/blog_migrate/4658c2e910f479f386b123c9281bafb9.png" data-rawwidth="1602" data-rawheight="1588" class="origin_image zh-lightbox-thumb" width="1602" data-original="https://pic2.zhimg.com/b1e608ddb7493608efea3e76912aabe1_r.png"&gt;因此 HTTP/2 可以很容易的去实现多流并行而不用依赖建立多个 TCP 连接，HTTP/2 把 HTTP 协议通信的基本单位缩小为一个一个的帧，这些帧对应着逻辑流中的消息。并行地在同一个 TCP 连接上因此 HTTP/2 可以很容易的去实现多流并行而不用依赖建立多个 TCP 连接，HTTP/2 把 HTTP 协议通信的基本单位缩小为一个一个的帧，这些帧对应着逻辑流中的消息。并行地在同一个 TCP 连接上 双向交换消息。

二进制分帧
在不改动 HTTP/1.x 的语义、方法、状态码、URI 以及首部字段….. 的情况下, HTTP/2 是如何做到「突破 HTTP1.1 的性能限制，改进传输性能，实现低延迟和高吞吐量」的 ?
关键之一就是在应用层(HTTP/2)和传输层(TCP or UDP)之间增加一个二进制分帧层。

&lt;img src="https://i-blog.csdnimg.cn/blog_migrate/41cd00b09759a7bf77b1d2bde265a3c9.jpeg" data-rawwidth="625" data-rawheight="324" class="origin_image zh-lightbox-thumb" width="625" data-original="https://pic4.zhimg.com/906e22193e61cd561325d93aae0f1e07_r.jpg"&gt;在二进制分帧层中， HTTP/2 会将所有传输的信息分割为更小的消息和帧（frame）,并对它们采用二进制格式的编码，其中 HTTP1.x 的首部信息会被封装到 HEADER frame，而相应的 Request Body 则封装到 DATA frame 里面。在二进制分帧层中， HTTP/2 会将所有传输的信息分割为更小的消息和帧（frame）,并对它们采用二进制格式的编码，其中 HTTP1.x 的首部信息会被封装到 HEADER frame，而相应的 Request Body 则封装到 DATA frame 里面。
HTTP/2 通信都在一个连接上完成，这个连接可以承载任意数量的双向数据流。
在过去， HTTP 性能优化的 关键并不在于高带宽，而是 低延迟。TCP 连接会随着时间进行自我「调谐」，起初会限制连接的最大速度，如果数据成功传输，会随着时间的推移提高传输的速度。这种调谐则被称为 TCP 慢启动。由于这种原因，让原本就具有突发性和短时性的 HTTP 连接变的十分低效。
HTTP/2 通过让所有数据流共用同一个连接，可以更有效地使用 TCP 连接，让高带宽也能真正的服务于 HTTP 的性能提升。

总结：

单连接多资源的方式，减少服务端的链接压力,内存占用更少,连接吞吐量更大
由于 TCP 连接的减少而使网络拥塞状况得以改善，同时慢启动时间的减少,使拥塞和丢包恢复速度更快

&lt;img src="https://i-blog.csdnimg.cn/blog_migrate/6ea048b7f19a2503600177d2a2522fca.png" data-rawwidth="772" data-rawheight="555" class="origin_image zh-lightbox-thumb" width="772" data-original="https://pic2.zhimg.com/ae5418b7da1c6593fd6addad0310faa5_r.png"&gt;
首部压缩（Header Compression）
HTTP/1.1并不支持 HTTP 首部压缩，为此 SPDY 和 HTTP/2 应运而生， SPDY 使用的是通用的 DEFLATE 算法，而 HTTP/2 则使用了专门为首部压缩而设计的 HPACK 算法。
&lt;img src="https://i-blog.csdnimg.cn/blog_migrate/b8dcb5fa58ebb6189343cb39d3edc355.png" data-rawwidth="614" data-rawheight="309" class="origin_image zh-lightbox-thumb" width="614" data-original="https://pic2.zhimg.com/c41c386f03b41f149a53fb17f520dd8d_r.png"&gt;
服务端推送（Server Push）

服务端推送是一种在客户端请求之前发送数据的机制。在 HTTP/2 中，服务器可以对客户端的一个请求发送多个响应。Server Push 让 HTTP1.x 时代使用内嵌资源的优化手段变得没有意义；如果一个请求是由你的主页发起的，服务器很可能会响应主页内容、logo 以及样式表，因为它知道客户端会用到这些东西。这相当于在一个 HTML 文档内集合了所有的资源，不过与之相比，服务器推送还有一个很大的优势：可以缓存！也让在遵循同源的情况下，不同页面之间可以共享缓存资源成为可能。

&lt;img src="https://i-blog.csdnimg.cn/blog_migrate/2445ab4a2a7f952b9a5095018839bcc2.png" data-rawwidth="492" data-rawheight="211" class="origin_image zh-lightbox-thumb" width="492" data-original="https://pic1.zhimg.com/d9f07162d5391641b7a2645a61b24fc0_r.png"&gt;

关于 HTTP/2 的 Server Push 以及 HTTP/2 的缓存策略
典型问题:
「如果客户端早已在缓存中有了一份 copy 怎么办？」还要 Push 吗?
详情参考另一个答案:
HTTP/2 对现在的网页访问，有什么大的优化呢？体现在什么地方

PS:
强烈推荐阅读 Mark Nottingham 在 Velocity Beijing 2015 的 speech
HTTP/2 for Front-End Developers ,关于 HTTP/2 下的前端性能优化相关。
Slide 地址： HTTP/2 for Front-End Developers

参考资料: