Fundebug网站升级HTTP/2,真的变快了!-阿里云开发者社区

开发者社区> fundebug> 正文

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

简介: 作为新一代的HTTP协议,HTTP/2可以提高网站性能,优化用户体验,Fundebug也是时候升级HTTP/2了,虽然已经有点晚了。 升级HTTP/2是一件很简单的事情,改1行Nginx配置就好了,但是,工程师只知道How是远远不够的,还需要理解Why,这就要求我们需要足够的事先调研(1. 什么是HTTP/2?)以及事后分析(4. 升级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配置,就可以提高页面访问性能,多好啊!

参考

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
阿里云服务器怎么设置密码?怎么停机?怎么重启服务器?
如果在创建实例时没有设置密码,或者密码丢失,您可以在控制台上重新设置实例的登录密码。本文仅描述如何在 ECS 管理控制台上修改实例登录密码。
9967 0
阿里云服务器端口号设置
阿里云服务器初级使用者可能面临的问题之一. 使用tomcat或者其他服务器软件设置端口号后,比如 一些不是默认的, mysql的 3306, mssql的1433,有时候打不开网页, 原因是没有在ecs安全组去设置这个端口号. 解决: 点击ecs下网络和安全下的安全组 在弹出的安全组中,如果没有就新建安全组,然后点击配置规则 最后如上图点击添加...或快速创建.   have fun!  将编程看作是一门艺术,而不单单是个技术。
10878 0
阿里云服务器如何登录?阿里云服务器的三种登录方法
购买阿里云ECS云服务器后如何登录?场景不同,阿里云优惠总结大概有三种登录方式: 登录到ECS云服务器控制台 在ECS云服务器控制台用户可以更改密码、更换系.
13727 0
题解 P1534 【不高兴的津津(升级版)】
题目链接 不算太难。就是题目有歧义。wa了好几次才发现。上一天要是小于8的话。结算是昨天一个负值在加上今天课时数。再减去8。233.。。。而不是上一天小于8个小时。就清零了。。大家要注意(ps:题解第一遍完美的没过233.。
1254 0
+关注
fundebug
一行代码搞定BUG监控!
228
文章
1
问答
文章排行榜
最热
最新
相关电子书
更多
《2021云上架构与运维峰会演讲合集》
立即下载
《零基础CSS入门教程》
立即下载
《零基础HTML入门教程》
立即下载