HTTP/2如何改变Web性能最佳实践

Posted 2021-04-30 21CTO

导读：HTTP/2 已经于2015年5月正式亮相，自成立以来，它开始影响互联网的性能与技术实践。本文介绍二进制流，减少延迟以及HTTP/2可能存在的一些缺点。

超文本传输协议（HTTP）是互联网的基础。可能你会感觉到过时，目前常用的协议版本 HTTP 1.1 已有近20年的历史。当它在1997年被采纳时，软驱和调制解调器还是必备的上网配件，Java还是一种新的，刚刚崭露头角的编程语言。2015年5月推出了HTTP/2，以解决现代Web时代HTTP 1.1一些重大的性能问题。随着浏览器，Web服务器，商业代理服务器和CDN网络的广泛支持，在过去一年中 HTTP/2的采用有所增加。

对于为Web开发代码的人来说，过渡到HTTP/2并非很简单，且不会保证速度自动提升。在构建高性能Web应用程序时，新协议挑战了一些常识，许多现有工具（如调试代理）尚不支持它。这篇文章介绍了HTTP/2以及它如何改变Web性能最佳实践。

二进制框架：HTTP/2的“基本单元”

HTTP 1.1的一个好处（至少在非安全连接上）是它支持在端口80上使用telnet会话中的文本与Web服务器交互：键入GET /HTTP/1.1在大多数Web服务器上返回html文档。因为它是纯文本协议，所以调试相对简单。

HTTP/2中的请求和响应不是文本，而是由二进制流表示，在HTTP/2 RFC中被描述为“基本协议单元”。每个框架都有一个用于不同目的的类型。 HTTP/2的作者意识到HTTP 1.1将无限期地存在（比如Gopher协议仍然在）。 HTTP/2请求的二进制帧可以映射到HTTP 1.1请求以确保向后兼容性。

但是，HTTP/2中有一些新功能未映射到HTTP 1.1。服务器推送（也称为“缓存推送”）和流重置是与二进制帧类型相对应的功能。HTTP/2框架还包括优先级，允许客户端向服务器提供有关某些资产优先级的提示。

此外，用于获取资产的协议可以显示在Chrome Web开发人员工具中 - 右键单击列标题并选择“协议”，如下图：

Google Chrome开发者工具中协议类型的改变

此列表中的所有HTTP/2请求都使用传输层安全性（TLS）上的安全连接。所有主流浏览器都需要HTTP/2连接才能确保安全。这样一个实际原因的是：称为应用层协议协商（ALPN）的TLS扩展允许服务器知道浏览器是支持HTTP/2（以及其他协议）并避免额外的数据交互。这也有助于使用不了HTTP/2的服务，例如代理服务器，它们只能通过网络看到加密数据。

通过多路复用减少延迟

HTTP 1.1的一个非常大性能问题就是延迟，它发出请求和接收响应都需要一定的时间。随着页面上的图像数量、JS和CSS数量的不断增加，这个问题变得更加明显。每次获取资源时，通常都需要新的TCP连接。每台主机同时打开TCP连接的数量受浏览器限制，并且在建立新连接时会产生性能损失。如果物理Web服务器远离用户（例如，中国的用户请求在美国东海岸的数据中心托管的网页），则延迟也会更大。

HTTP 1.1为延迟问题提供了不同的解决方法，包括流水线操作和Keep-Alive标头。但是，流水线操作从未被广泛实施，并且Keep-Alive标头遭受了行头阻塞：当前请求必须在下一个请求发送之前完成。

在HTTP/2中，多个资产请求可以重用单个TCP连接。与使用Keep-Alive标头的HTTP 1.1请求不同，HTTP/2中的请求和响应二进制帧是可交叉的，且不会发生线程阻塞。建立连接的成本（众所周知的“三次握手”）每个主机只会发生一次。由于多个TLS协商涉及的åç性能成本，多路复用对于安全连接特别有好处。

对单个主机上的多个资产的请求在HTTP/2中使用单个TCP连接

对Web性能的影响：告别内联，串联和图像精灵

HTTP/2多路复用对前端开发人员具有重要意义。它消除了通过捆绑相关资产来减少连接数量，包括：

1）连接javascript和CSS文件：将较小的文件组合到一个较大的文件中以减少请求的总数。

2）图像精灵：将多个小图像组合成一个较大的图像。

3）域分片：跨多个域传播对静态资源的请求，增加浏览器允许的开放TCP连接总数。

4）内联资源：使用HTML文档源捆绑资源，包括Base64编码图像或直接在<script>标记内编写JavaScript代码。

5）借助非捆绑资源，可以更好地缓存较小的Web页面。

用一个例子解释如下：

连接的CSS文件被分解成四个较小的指纹文件

传统的CSS连接是将应用程序中不同页面的样式表文件合并到一个CSS文件中，以减少资源请求的数量。然后用文件中的内容MD5哈希对该文件进行指纹比对，以便让浏览器可以对其进行有效缓存。这意味着如果对网站的可视布局即使做非常小的更改，如更改标题的字体样式，都需要重新下载整个文档。

当较小的资产文件经过指纹识别处理后，浏览器就可以缓存大量不经常更改的JavaScript和CSS等组件，单个函数的小型重构就不需要JavaScript应用程序代码或CSS设置为无效。

这样可以有效减少前端构建基础架构的复杂性，它们作为较小的文件可以直接包含在HTML文档中，而不是在连接资源前有多个预构建步骤。

现实场景中使用HTTP/2的潜在缺点

如果开发者仅针对HTTP/2客户端进行优化，会对尚不支持它的浏览器造成不利影响，老旧的浏览器仍然喜欢捆绑资源以减少连接数。

截止到2016年2月，caniuse.com网站报告 HTTP/2的浏览器支持率为71％。与IE8删除支持率非常相似，因此我们必须使用基于每个站点的相关数据来决定采用HTTP/2，还是使用混合的方法。

正如Kahn Academy Engineering在其网站上分析HTTP/2流量的帖子所述，分拆大量资产实际上可以增加传输的字节总数。使用zlib，压缩单个大文件比压缩许多小文件更有效。对于捆绑了数百个资产的HTTP/2站点，这种影响可能很大。

在浏览器中使用HTTP/2还需要通过TLS传递资源。对于没有经验的人来说，设置TLS证书可能很麻烦。幸运的是，像Let's Encrypt这样的开源项目正致力于使加密证书注册更容易访问。

小结

大多数用户是不关心网站是用什么应用程序协议的，他们只是希望速度快并按预期工作就好。尽管 HTTP/2 已经正式审核了近一年，但开发者仍然要学习构建更快的网站最佳实践。切换到HTTP/2 在很大程度上取决于特定网站的技术构成及其用户使用现代浏览器的比率。此外，调试新协议目前还不太方便，易于使用的开发人员工具为数并不多。

尽管存在这些困难和挑战，HTTP/2协议的应用率仍在明显增长。

根据目前扫描流行网站的属性，使用HTTP/2的大型网站的数量正在增加，特别是在CloudFlare和WordPress在2015年底宣布全面支持HTTP/2协议之后。在考虑交换机层面时，仔细测试和监控资源和页面至关重要，包括在各种环境中的加载时间，随着网络供应商和开发者对这种巨大变化的影响进行自我更新，从真实用户和数据做出决策至关重要。在网站资源极度膨胀的今天，给资源数量减肥无论采用什么协议都需要做。

编译：洛逸

来源：https://dzone.com/articles/how-http2-is-changing-web-performance-best-practic