军备竞赛之http2性能测试小结

Posted 2021-04-18 前进社ForwardStudio

今天又给大家带来我们前进社又一位萌妹子的新作--军备竞赛之http2性能测试小结。

随着互联网用户体验的要求越来越高，近些年来加载网站需要下载的资源呈现大规模增长，在此基础上对网页加载速度的要求却从未降低，人们总是希望网页能够尽快的加载出来。所以相较于从前，我们的开发工程师不得不针对现有站点做大量的针对性能优化的工作，由此催生了http1.1到http/2的升级。

1. http1.1存在的性能问题

1.1 请求阻塞

http1.1中，在一个TCP连接中，客户端只有在收到上一个请求响应后才去发送下一个请求，如果中间有一个请求耗时特别长，后续的请求都会被阻塞，大大影响网站的性能体验。

1.2 head里携带内容过大

在使用http1.1传输数据时，header里携带的内容如果很大，会在一定程度上增加传输的成本，而且一个站点中所有请求的header几乎相同，在增加用户流量的同时影响了性能。

1.3 长连接对性能的影响

虽然http1.1相对于http1.0支持了keep-alive,来弥补多次创建链接的延迟，但是大量的keep-alive同样会给服务器带来大量的性能压力，比如对于图片使用浏览器缓存的同时使用keep-alive会很大的影响性能，因为在文件被请求后还保持了一段不必要的连接时间。

2 http2性能优化点

2.1 多路复用

多路复用可以基于单个TCP连接实现多个请求的传输，逻辑如下：

如上图，多个流（stream）在同一个TCP中可以并行的进行传输，其中一个流受到阻塞，不会影响其它流的传输。

2.2 头部压缩

下图是非常直观的描述了http/2的头部压缩的原理：

头部压缩需要在支持http/2的浏览器和服务器之间共同维护：

1. 一份相同的静态字典（Static Table),包含常见的头部名称，以及常见的头部名称与值得组合。

2. 一份相同的动态字典（Dynamic Table),可以动态添加内容。

3. 基于静态哈夫曼码表的哈夫曼编码（Huffman Coding)。

2.3 服务器推送

允许服务器为客户端的一个请求返回多个响应。比如，浏览器在向服务器请求index.html时，服务器在将Index.html返回给浏览器同时将它所引用的css,js,img文件请求同时返回给它，省去了这些文件的请求时间。

2.4 二进制流传输

不同于http1.1使用ascll编码，http/2在应用层和会话层中间引入二进制分帧层，将报文分割成一个个更小的帧，再将每个帧采用二进制进行编码，然后再传输。

2.5 设置优先级

采用http2后，页面初始化时所需要的所有请求都是并行交错的进行传输，可能会出现不重要的资源先到达，比如浏览器明明在等待css和js,可是却总是先收到图片。

在http/2的每个流里面有一个优先值，优先级高的流会先发送，但是不一定会先到达。

3 http1.1与http2性能对比测试

3.1多路复用

测试应用：[http2 test demo](http://www.http2demo.io)

测试内容：比较分别通过http1.1和http2协议去请求CDN77.com服务器上200张小图所花的时间。

测试结果：

http1.1:

200张图片的读取时间：4.18s

http/2:

200张图片的读取时间：1.99s

测试结果分析：

1. 在http1.1中，一个TCP连接中的请求是串行的，一个请求发送完之后再发送下一个请求，所以加载曲线是阶梯状的，后加载的资源的timeline很大一块是等待状态。

2. 在http/2中，资源的请求几乎是同时发送的，几乎没有等待时间，所以总加载时间短了大约53%左右。

3.2头部压缩

测试应用：[招商银行信用卡官方网站](http://xyk.cmbchina.com)

测试内容：在http1.1和http/2环境下分别连续两次访问该页面，用WireShark抓包统计请求头部大小。

测试结果：

| 类型 | 次数 | 头部大小(B) |

| ---- | --- | -----------|

| https|  1  |    875     |

|      |  2  |    892     |

|      |     |            |

| http2|  1  |    600     |

|      |  2  |    44      |

测试结果分析：

1.  第一次请求时，浏览器端无缓存，http/2协议对头部只做一般压缩，压缩率大约30%。

2. 第二次请求时，头部的cookie字段已在浏览器中有缓存，所以压缩率得到了很大的提升，头部从880B下降到44B，压缩率达到了95%。

3. 头部压缩可以有效地降低头部大小，尤其是在多次重复请求有相同的头部内容时，效果非常明显。

3.3服务器推送

测试应用：[http2-example](https://github.com/l-zhi/http2-example)

测试内容：在使用http/2中，服务器是否会在一个请求中将它所依赖的其它资源一起发送给它

测试结果：

http1.1:

http/2:

测试结果分析：

1. 在http/2中使用server push发送一个请求时，该请求所依赖的其它文件会被一起发送过来，所以使用server push推送过来的文件没有请求时间，增大了页面请求的效率。

3.4 二进制传输

测试应用：[招商银行信用卡官方网站](http://xyk.cmbchina.com)

测试内容：在http1.1和http/2环境下访问该页面，用WireShark抓包查看头部信息。

测试结果：

http1.1:

http/2:

1. 对于http1.1请求，头部以文本形式传输，没有做压缩

2. 对于http/2请求，头部是压缩后的二进制形式

测试结果分析：

1.  http/2协议中，文件采是基于二进制编码进行传输的

3.5 设置优先级

调查结果：

http/2协议目前仅仅只提供了这样一种机制，并没有提供具体的实现算法。使用者可以根据自己的需求在浏览器端自行定义请求的优先级，然后在服务器端实现不不同优先级文件的处理。

4 总结

http/2通过多路复用来减小延迟，主动推送减小请求时间，头部压缩首部字段将协议开销降到最低，使得应用访问的性能得到了极大的提升，我们在http1.1时代做的有些优化反而成了鸡肋，以后应该会有相当长的一段时间，http/2要和http1.1共存。所以如何让http/2和http1.1的用户都能得到最优的性能，应该是我们目前所面对的一大挑战。