Fundebug网站升级HTTP/2,真的变快了!

作为新一代的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是如何成功的?)

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

根据Can I use,绝大多数浏览器都支持了HTTP/2:

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

  • HTTP/2为二进制协议


图片来源:Valentin V. Bartenev

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

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


图片来源:Factory.hr

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

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

  • HTTP/2会压缩请求Header


图片来源:运维实谈

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

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

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

图片来源: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证书,其实也很简单。

一切前提没问题的话(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了:

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

可知,是/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首页的加载时间,计算了5次加载的平均时间(单位为妙),如下表:

HTTP版本 DOMContentLoaded Load Finish
HTTP/1.1 1.572 4.342 5.138
HTTP/2 1.0004 4.102 4.288

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

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

参考

  • Module ngx_http_v2_module
  • HTTP/2 Frequently Asked Questions
  • HTTP的前世今生
  • The HTTP/2 Module in NGINX
  • HTTP/2: the difference between HTTP/1.1, benefits and how to use it
  • HPACK: the silent killer (feature) of HTTP/2
  • 浅谈 HTTP/2 Server Push

你可能感兴趣的