实测http1和http2性能对比，并分析Network的Timing图

测试网站

https://http2.akamai.com/demo

测试样本

  1. 378个小图片（每个图片大小 1至4kb左右）
  2. 同时发出请求
  3. 网络条件：正常，Fast 3G，Slow 3G （网速从快到慢）
    • network.png

测试结果：

网速 http1 http2
正常 耗时 25.9s 耗时 2.1s
Fast 3G（较慢） 耗时 37.1s 耗时 9.0s
Slow 3G（最慢） 耗时 126.5s 耗时 23.5s

正常网速
http12.png

Fast 3G （比正常网速要慢）
http12-fast3G.png

Slow 3G （最慢）
http12-slow3G.png

结论

http2的性能十分强劲。在并发请求多的情况下，和http1对比的性能差异更加明显

分析http1的队首阻塞问题，以及http2如何解决

通过chorme开发者工具内的 Network 来检测

  • （我当前谷歌版本：91.0.4472.77 ）如果test的效果和我不一样可以考虑升级chorme

图片环境是 Fast 3G （Fast 3G的 http2的请求段会明显一点）

http12-overview.png

红色框是http1的请求段，

  • 我们可以看到有6行，其实是开了6个tcp连接，最多并发6个请求。而且每个都是阻塞的(前面的处理完了，才会处理后面的)。

蓝色框是http2的请求段，

  • 可以看到只有一行，只需一个tcp连接，
  • 请求是没有阻塞的，可以并发100个请求
    • （可能是浏览器限制，并不是无限的。本人根据图片名判断，http2支持100个并发请求，然后开始会阻塞）

如何确定 http1的请求段 是开了6个tcp连接呢？

6-tcp.png

  • 橙色部分 Initial connection （连接初始化） 意思是：
    • The browser is establishing a connection, including TCP handshakes/retries and negotiating an SSL. （浏览器正在建立连接，包括 TCP 握手/重试和协商 SSL）

http1最后一个图片的请求情况

http1-last.png

总结：

http2解决了队头阻塞的问题：可以一个连接并行处理多个请求，几乎不受限制（chorme最多支持100个并发）。在多请求并发的场景，性能对比http1得到了很大的提升

另外：在解析一下Timing图

timing.png

来源：https://developer.chrome.com/docs/devtools/network/reference/#timing-explanation

附上英文原文，括号内是个人理解的翻译

  • Queueing（队列）. The browser queues requests when: （浏览器在以下情况下会让新的请求加入排队等待：）
    • There are higher priority requests. （现有的请求优先级更高）
    • There are already six TCP connections open for this origin, which is the limit. Applies to HTTP/1.0 and HTTP/1.1 only. （现有的情况已经打开了六个 TCP 连接，到上限了。针对HTTP/1.0和 HTTP/1.1）
    • The browser is briefly allocating space in the disk cache （浏览器在磁盘缓存中短暂分配空间）（可以理解为浏览器正忙）
  • Stalled（阻塞）. The request could be stalled for any of the reasons described in Queueing（队列） 。（Queueing（队列） 里的3种情况，都可以造成阻塞）
  • DNS Lookup DNS（查找）. The browser is resolving the request’s IP address. 。（浏览器正在解析请求的 IP 地址）（DNS解析时间）
  • Initial connection （连接初始化）. The browser is establishing a connection, including TCP handshakes/retries and negotiating an SSL. （浏览器正在建立连接，包括 TCP 握手/重试和协商 SSL）
  • Proxy negotiation （代理协商）. The browser is negotiating the request with a proxy server. (浏览器正在与代理服务器协商请求)（用户访问的资源不一定来源于源主机，中间可能经过了其他服务的代理，比如nginx）
  • Request sent （发送请求）. The request is being sent. （请求正在发送）
  • ServiceWorker Preparation （准备ServiceWorker）. The browser is starting up the service worker. （浏览器正在启动service worker）
  • Request to ServiceWorker （向服务员提出申请）. The request is being sent to the service worker. （请求正在发送到service worker）
  • Waiting (TTFB) （等候(Time To First Byte)） . The browser is waiting for the first byte of a response. TTFB stands for Time To First Byte. This timing includes 1 round trip of latency and the time the server took to prepare the response. (浏览器正在等待响应的第一个字节。TTFB 代表 Time To First Byte。这个计时包括1个往返的延迟和服务器准备响应所用的时间)
  • Content Download （内容下载）. The browser is receiving the response. （浏览器正在接收响应的资源）（把资源下载到本地）
  • Receiving Push （接收服务端推送）. The browser is receiving data for this response via HTTP/2 Server Push. （浏览器正在通过 HTTP/2的服务端推送功能 接收此响应的数据）
  • Reading Push （阅读推送）. The browser is reading the local data previously received. （浏览器正在读取以前接收到的本地数据）（浏览器在读 服务端推送资源 的缓存）

码字不易，点赞鼓励