HTTP/2 对 Web 性能的影响（上）

一.前言

HTTP/2 于 2015 年 5 月正式推出。自诞生以来，它就一直在影响着网络性能最佳实践。在本篇文章中，咱们将讨论 HTTP/2 的二进制帧、延迟削减、潜在利弊以及相应的应对措施。

超文本传输协议（简称 HTTP）正是万维网与网络空间的基石。如今，HTTP 听起来已经有些过期，毕竟该协议中使用最普遍的版本——HTTP 1.1，已快迎来它的第二十个年头。时光回溯到1997年，HTTP1.1刚刚出现的年代，当时，软驱与调制解调器仍是 PC 设备的必备周边产品，Java 也仅仅是一个刚刚崭露头角的、前途一片光明的编程语言。

而今，2015 年 5 月，HTTP/2 正式亮相，致力于解决 HTTP 1.1 在现代网络时代下没法应对的某些重大性能难题。过去一年以来，愈来愈多的浏览器、Web 服务器、商用代理以及主要内容交付网络开始支持 HTTP/2。

遗憾的是，对于负责编写 Web 代码的开发人员而言，HTTP/2 的过渡工做并不简单，所谓的速度提高也不会自行出现，必要的 Web APM 工具和厂商仍然是当今时代不可或缺的，例如 OneAPM Browser Insight、Newrelic、APPdynamic 等等。

如何才能采用这个新协议打造高性能 Web 应用，该怎样处理那些尚不支持该协议的现有工具——例如 debug 代理工具，这些问题对全部人来讲还是一个挑战。今天的文章将向您介绍 HTTP/2，以及其如何改变 Web 性能的最佳实践。

二.二进制帧：HTTP/2的「基本单位」

HTTP 1.1 的一大优点（至少相较于非安全链接而言）在于其支持在端口 80 的telnet 会话中利用文本与 Web 服务器进行交互：在大多数 Web 服务器上输入 GET/HTTP/1.1，都能返回一个 HTML 文档。因为这是一项文本协议，所以其调试工做相对简单。

相对于 HTTP1.1 这个文本协议，HTTP/2 中的请求与响应则经过二进制帧流的形式来表现，咱们将其称为 HTTP/2 RFC 中的「基本协议单位」。每一帧都拥有本身的类型，用于实现不一样的做用。考虑到 HTTP 1.1 将会「永远」存在（毕竟 Gopher 协议都还在用呢！），所以 HTTP/2 的做者们要求，HTTP/2 请求的二进制帧都必须被映射到 HTTP 1.1 请求上去，从而确保其向下兼容的能力。

固然，HTTP/2 当中也有一些其余新特性，没法映射至 HTTP 1.1。例如，服务器推送（也叫“缓存推送”）和流重置都是利用二进制帧类型实现的新特性。帧也能够支持优先级排序，容许客户端向服务器发送排序，从而优先处理一部分资产类别。

除了使用 Wireshark 2.0 以外，对个别二进制帧进行查看的最简便方法就是利用谷歌 Chrome 浏览器的 net-internals 标签（在浏览器地址栏中输入chrome://net-internals/#http2）。因为理解大型网页的数据一般比较困难，Rebecca Murphey 特地编写了一款极为实用的可视化工具，从而将其显示在命令行中。

除此以外，这个用于获取资产的协议还能够显示在 Chrome Web 的开发者工具当中--只需右键点击列标题，接着选择「协议」便可：

在谷歌Chrome开发者工具中查看协议类型。

这里列出的全部 HTTP/2 请求都使用经过传输层安全（TLS）创建的安全链接。各主流浏览器都要求 HTTP/2 链接是安全的。这样作是有切实理由的：TLS 的一套称为应用层协议协商（ALPN）的扩展，让服务器知道浏览器支持 HTTP2（除了其余协议之外），从而避免了额外的数据往来。这也能保住那些没法解读 HTTP/2 的服务，例如代理——只看得见传输线路上的加密数据。

三.多路复用减小延迟

HTTP 1.1 的一大问题是延迟，换而言之就是它花在提出请求和接受响应上的时间。随着典型网页中图片数量、JavaScript 和 CSS 的使用量不断增长，这个问题日益严重。每获取一项资产，一般都得新建一个 TCP 链接。

这种需求由于两个理由很重要：每台主机能同时打开的 TCP 链接数受浏览器的限制；新建链接都会引起性能损失。若是物理服务器离用户很远（如：一位新加坡用户向美国东海岸数据中心请求一个页面），延迟会变多。这不是罕见的状况——近期一份报告表示全球 70% 以上的互联网流通都会经过北佛吉尼亚一些不知名的数据中心。

其实对于 Web 页面的优化从前端页面方面反而可能见效比较大，咱们都知道页面资源对响应速度的影响是很是巨大的，常见的图片压缩、css 聚合均可以帮助咱们优化 Web 性能，问题就是如何找到相应的页面慢加载元素。

这也是国内外 APM 行业兴起的最初缘由之一。

拿国内的一个页面优化工具 Browser Insight 举例，这种经过页面插码来获取真实用户体验的 APM 工具，虽然部署起来有些麻烦，可是这类的工具也没有更好的部署方法，手动的反而更稳定。

以下图，咱们能看到，经过这个工具其中一个页面资源瀑布流图的功能，能够看到页面上每一个元素的加载问题，并且这些都是用户的真实体验，因此优化起来就更有目的性了。

HTTP 1.1 提供了多种方案以解决延迟问题，包括通道传输与 Keep-Alive header。然而，通道传输从未被普遍采纳过，而 Keep-Alive header 则饱受 head line 阻塞的困扰：只有在当前请求必须完全完成后，下一请求才能被发送出去。

在 HTTP/2 当中，多条资产请求能够重复利用单一 TCP 链接。与使用 Keep-Alive header 的 HTTP 1.1 请求不一样，HTTP/2 的请求与响应二进制帧以交错方式进行，线头阻塞问题也不复存在。创建链接的成本（即著名的的‘三方握手’）在每台主机上只进行一次。多路复用对于安全链接来讲尤其重要，由于屡次 TLS 协商方案的性能成本将会获得显著提升。

在 HTTP/2 中，单一主机内的多资产请求只使用单一 TCP 链接。

四.总结

其实 Web 性能优化已经不是一个新的话题了，从 21 世纪初期直到如今，不少成熟的互联网公司已经开始关注除了产品、研发以外的工做，例如用户体验、性能优化等与产品使用者息息相关的事情，伴随着的就是 APM 行业的全面兴起。

本文主要和你们聊了一些关于 http1 和 http2 有关的基础内容，以后还会有一篇，预计与你们分享一些 http2 使用利弊、以及正在进行的相关工做等等。

Browser Insight 是一个基于真实用户的 Web 前端性能监控平台，可以帮你们定位网站性能瓶颈，网站加速效果可视化；支持浏览器、微信、App 浏览 HTML 和 HTML5 页面。想阅读更多技术文章，请访问 OneAPM 官方技术博客。
本文转自 OneAPM 官方博客