Fundebug网站升级HTTP/2，真的变快了！

水深无声 2023-06-10 14:28 34阅读 0赞

作为新一代的HTTP协议，HTTP/2可以提高网站性能，优化用户体验，[Fundebug][]也是时候升级HTTP/2了，虽然已经有点晚了。

升级HTTP/2是一件很简单的事情，改1行Nginx配置就好了，但是，**工程师只知道How是远远不够的，还需要理解Why**，这就要求我们需要足够的事先调研（1. 什么是HTTP/2？）以及事后分析（4. 升级HTTP/2真的提高性能了吗？）。

### 1. 什么是HTTP/2？ ###

HTTP/2是新一代的HTTP协议，于2015正式发布。

与其他众多Web技术标准一样，推动HTTP/2标准的依然是Google。发布Chrome的时候Google说过要推动Web技术的发展，然后它真的做到了。（[JavaScript深入浅出第5课：Chrome是如何成功的？][JavaScript_5_Chrome]）

根据[W3Techs][]的统计，截止2019年10月26日，全世界41.3%的网站已经使用了HTTP/2。

根据[Can I use][]，绝大多数浏览器都支持了HTTP/2：

![format_png][]

HTTP/2主要有以下几个特性：

*  **HTTP/2为二进制协议**

![format_png 1][]  
**图片来源：[Valentin V. Bartenev][]**

由上图可知，HTTP/1.1传输的是文本数据，而HTTP/2传输的是二进制数据，提高了数据传输效率。

*  **HTTP/2支持TCP连接多路复用**

![format_png 2][]  
**图片来源：[Factory.hr][]**

由上图可知，HTTP 1.1需要为不同的HTTP请求建立单独的TCP连接，而HTTP/2的多个HTTP请求可以复用同一个TCP连接。

要知道，建立TCP连接时需要3次握手，再加上TLS的4次握手，加起来就是7次握手，如果可以复用TCP连接的话，则可以减少这些多余的开销。

*  **HTTP/2会压缩请求Header**

![format_png 3][]  
**图片来源：[运维实谈][Link 1]**

如上图所示，第2个请求的Header只有:path不一样，因此压缩空间非常可观。

Headers压缩的算法HPACK本身似乎很复杂(其实也不难)，但是算法思想其实非常简单的，假设我们在浏览器发起100个请求，它们的user-agent是不会变的，那我们为什么需要重复传输这个长长的字符串呢？用dictionary记录一次不就行了！

*  **HTTP/2支持服务器推送(Server Push)**

![format_png 4][]

**图片来源：[lujjjh][]**

由上图可知，当客服端向服务端请求HTML时，Server Push服务端可以提前返回HTML所依赖的css、js等资源，这样可以节省解析HTML以及请求资源的时间，从而缩短页面的加载时间。

### 2. 如何升级HTTP/2？ ###

我们使用了Nginx作为前端页面与后端接口的反向代理服务器(Reverse Proxy)，只需要修改一下Nginx配置文件就可以升级HTTP/2了，非常简单。

注意，在 Nginx 上 开启 HTTP/2 需要 Nginx 1.9.5 以上版本（包括1.9.5），并且需要 OpenSSL 1.0.2 以上版本(包括1.0.2)。使用`nginx -V`命令可以查看Nginx的版本信息：

nginx -V
    nginx version: nginx/1.12.1
    built by gcc 6.3.0 20170516 (Debian 6.3.0-18)
    built with OpenSSL 1.1.0f  25 May 2017
    TLS SNI support enabled
    configure arguments: --prefix=/etc/nginx --sbin3-path=/usr/sbin/nginx --modules-path=/usr/lib/nginx/modules --conf-path=/etc/nginx/nginx.conf --error-log-path=/var/log/nginx/error.log --http-log-path=/var/log/nginx/access.log --pid-path=/var/run/nginx.pid --lock-path=/var/run/nginx.lock --http-client-body-temp-path=/var/cache/nginx/client_temp --http-proxy-temp-path=/var/cache/nginx/proxy_temp --http-fastcgi-temp-path=/var/cache/nginx/fastcgi_temp --http-uwsgi-temp-path=/var/cache/nginx/uwsgi_temp --http-scgi-temp-path=/var/cache/nginx/scgi_temp --user=nginx --group=nginx --with-compat --with-file-aio --with-threads --with-http_addition_module --with-http_auth_request_module --with-http_dav_module --with-http_flv_module --with-http_gunzip_module --with-http_gzip_static_module --with-http_mp4_module --with-http_random_index_module --with-http_realip_module --with-http_secure_link_module --with-http_slice_module --with-http_ssl_module --with-http_stub_status_module --with-http_sub_module --with-http_v2_module --with-mail --with-mail_ssl_module --with-stream --with-stream_realip_module --with-stream_ssl_module --with-stream_ssl_preread_module --with-cc-opt='-g -O2 -fdebug-prefix-map=/data/builder/debuild/nginx-1.12.1/debian/debuild-base/nginx-1.12.1=. -specs=/usr/share/dpkg/no-pie-compile.specs -fstack-protector-strong -Wformat -Werror=format-security -Wp,-D_FORTIFY_SOURCE=2 -fPIC' --with-ld-opt='-specs=/usr/share/dpkg/no-pie-link.specs -Wl,-z,relro -Wl,-z,now -Wl,--as-needed -pie'

可知，我们使用的Nginx版本为1.12.1，OpenSSL版本为1.1.0f，符合要求。

还有一点，虽然HTTP/2标准并没有要求加密，但是所有浏览器都要求HTTP/2必须加密，这样的话，只有HTTPS才能升级HTTP/2。

如果你还没用过HTTPS的话，不妨看看我的博客：[教你快速撸一个免费HTTPS证书][HTTPS]，其实也很简单。

一切前提没问题的话(Nginx>=1.9.5，OpenSSL>=1.0.2，HTTPS)，只需要修改1行配置，在listen指令后面添加http2：

server
    {
        listen 443 ssl http2;
        server_name www.fundebug.com;
    }

重启Nginx，升级HTTP/2就成功了，可以使用curl命令检查：

curl -sI https://www.fundebug.com
    HTTP/2 200
    server: nginx/1.12.1
    date: Mon, 07 Oct 2019 00:12:53 GMT
    content-type: text/html; charset=UTF-8
    content-length: 4892
    x-powered-by: Express
    accept-ranges: bytes
    cache-control: public, max-age=0
    last-modified: Sun, 06 Oct 2019 23:07:25 GMT
    etag: W/"131c-16da353dbc8"
    vary: Accept-Encoding
    strict-transport-security: max-age=15768001

### 3. HTTP/2导致Safari浏览器OPTIONS请求失败 ###

升级HTTP/2之后，使用Safari的用户发现无法登陆Fundebug了：

![format_png 5][]

我们的前端异常监控插件捕获了这个报错：

![format_png 6][]

可知，是\*\*/api/members/login\*\*接口出错了。

经过排查发现是OPTIONS请求失败了：

curl -X OPTIONS https://api.fundebug.com/api/members/login -v
    *   Trying 120.77.45.162...
    * TCP_NODELAY set
    * Connected to api.fundebug.com (120.77.45.162) port 443 (#0)
    * ALPN, offering h2
    * ALPN, offering http/1.1
    * Cipher selection: ALL:!EXPORT:!EXPORT40:!EXPORT56:!aNULL:!LOW:!RC4:@STRENGTH
    * successfully set certificate verify locations:
    *   CAfile: /etc/ssl/cert.pem
      CApath: none
    * TLSv1.2 (OUT), TLS handshake, Client hello (1):
    * TLSv1.2 (IN), TLS handshake, Server hello (2):
    * TLSv1.2 (IN), TLS handshake, Certificate (11):
    * TLSv1.2 (IN), TLS handshake, Server key exchange (12):
    * TLSv1.2 (IN), TLS handshake, Server finished (14):
    * TLSv1.2 (OUT), TLS handshake, Client key exchange (16):
    * TLSv1.2 (OUT), TLS change cipher, Client hello (1):
    * TLSv1.2 (OUT), TLS handshake, Finished (20):
    * TLSv1.2 (IN), TLS change cipher, Client hello (1):
    * TLSv1.2 (IN), TLS handshake, Finished (20):
    * SSL connection using TLSv1.2 / ECDHE-RSA-AES128-GCM-SHA256
    * ALPN, server accepted to use h2
    * Server certificate:
    *  subject: CN=api.fundebug.com
    *  start date: Sep 15 16:38:43 2019 GMT
    *  expire date: Dec 14 16:38:43 2019 GMT
    *  subjectAltName: host "api.fundebug.com" matched cert's "api.fundebug.com" * issuer: C=US; O=Let's Encrypt; CN=Let's Encrypt Authority X3
    *  SSL certificate verify ok.
    * Using HTTP2, server supports multi-use
    * Connection state changed (HTTP/2 confirmed)
    * Copying HTTP/2 data in stream buffer to connection buffer after upgrade: len=0
    * Using Stream ID: 1 (easy handle 0x7fcfbb80ce00)
    > OPTIONS /api/members/login HTTP/2
    > Host: api.fundebug.com
    > User-Agent: curl/7.54.0
    > Accept: */*
    >
    * Connection state changed (MAX_CONCURRENT_STREAMS updated)!
    * http2 error: Invalid HTTP header field was received: frame type: 1, stream: 1, name: [content-length], value: [0]
    * HTTP/2 stream 1 was not closed cleanly: PROTOCOL_ERROR (err 1)
    * Closing connection 0
    * TLSv1.2 (OUT), TLS alert, Client hello (1):
    curl: (92) HTTP/2 stream 1 was not closed cleanly: PROTOCOL_ERROR (err 1)

根据curl的报错信息，可知是Header中content-length有问题：

* http2 error: Invalid HTTP header field was received: frame type: 1, stream: 1, name: [content-length], value: [0]

将Nginx配置文件中OPTIONS请求的Content-Length配置注释掉，问题就解决了：

if ($request_method = "OPTIONS")
    {
        add_header Access-Control-Allow-Origin *;
        add_header 'Access-Control-Max-Age' 86400;
        add_header 'Access-Control-Allow-Methods' 'GET, POST, PUT, OPTIONS, DELETE';
        add_header 'Access-Control-Allow-Headers' 'token, reqid, nid, host, x-real-ip, x-forwarded-ip, event-type, event-id, accept, content-type';
        # add_header 'Content-Length' 0; // 必须注释，否则HTTP/2会报错
        add_header 'Content-Type' 'text/plain, charset=utf-8';
        return 200;
    }

HTTP/2中对于Header有特殊处理，这应该是导致出错的根本原因，关于这一个问题，我会在下一篇博客中详细介绍。

### 4. 升级HTTP/2真的提高性能了吗？ ###

理论上来说，HTTP/2应该可以提高网站性能，但是实际情况是怎样呢？HTTP/2真的可以提高性能了吗？如果有的话，究竟提高了多少呢？

于是，我使用Chrome记录了升级HTTP/2前后[Fundebug首页][Fundebug]的加载时间，计算了5次加载的平均时间(单位为妙)，如下表：

<table> 
 <thead> 
  <tr> 
   <th><strong>HTTP版本</strong></th> 
   <th><strong>DOMContentLoaded</strong></th> 
   <th><strong>Load</strong></th> 
   <th><strong>Finish</strong></th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>HTTP/1.1</td> 
   <td>1.572</td> 
   <td>4.342</td> 
   <td>5.138</td> 
  </tr> 
  <tr> 
   <td>HTTP/2</td> 
   <td>1.0004</td> 
   <td>4.102</td> 
   <td>4.288</td> 
  </tr> 
 </tbody> 
</table>

可知，HTTP/2明显提高了首页加载时间，DOMContentLoaded、Load与Finish时间均有明显提高。

一共也就改了2行Nginx配置，就可以提高页面访问性能，多好啊！

### 参考 ###

*  [Module ngx\_http\_v2\_module][Module ngx_http_v2_module]
 *  [HTTP/2 Frequently Asked Questions][HTTP_2 Frequently Asked Questions]
 *  [HTTP的前世今生][HTTP]
 *  [The HTTP/2 Module in NGINX][Valentin V. Bartenev]
 *  [HTTP/2: the difference between HTTP/1.1, benefits and how to use it][Factory.hr]
 *  [HPACK: the silent killer (feature) of HTTP/2][HPACK_ the silent killer _feature_ of HTTP_2]
 *  [浅谈 HTTP/2 Server Push][lujjjh]

[Fundebug]: https://www.fundebug.com/
[JavaScript_5_Chrome]: https://blog.fundebug.com/2019/08/08/how-does-chrome-succeed/
[W3Techs]: https://w3techs.com/technologies/details/ce-http2/all/all
[Can I use]: https://caniuse.com/#search=http2
[format_png]: /images/20230531/395ad2bf505749eb9fdcc8e71b9d285f.png
[format_png 1]: /images/20230531/6ebb2428cee14390895cf7f63d199225.png
[Valentin V. Bartenev]: https://www.nginx.com/blog/http2-module-nginx
[format_png 2]: /images/20230531/b756adb2b4a3465f90489affc6303be4.png
[Factory.hr]: https://medium.com/@factoryhr/http-2-the-difference-between-http-1-1-benefits-and-how-to-use-it-38094fa0e95b
[format_png 3]: /images/20230531/dfaabb96ef7245bca77b88960361e483.png
[Link 1]: https://mp.weixin.qq.com/s/vcBEVaSfhrNZ3dYPMZSUQw
[format_png 4]: /images/20230531/e49c55539ba04541ba122f7ecd5c49c5.png
[lujjjh]: https://zhuanlan.zhihu.com/p/26757514
[HTTPS]: https://blog.fundebug.com/2018/07/06/apply-lets-encrypt-certificate/
[format_png 5]: /images/20230531/4a60bfbc99b54d37b6245db8d50781ca.png
[format_png 6]: /images/20230531/3e2df23f4692423f8d911c23650d831d.png
[Module ngx_http_v2_module]: http://nginx.org/en/docs/http/ngx_http_v2_module.html
[HTTP_2 Frequently Asked Questions]: https://http2.github.io/faq/
[HTTP]: https://coolshell.cn/articles/19840.html
[HPACK_ the silent killer _feature_ of HTTP_2]: https://blog.cloudflare.com/hpack-the-silent-killer-feature-of-http-2/