未来已到——HTTP/2

15

HTTP/2 is the future of the Web, and it is here!

使用 HTTP/1.1 和 HTTP/2 在相同环境各加载 300 多张小图片,性能相差一倍。

效果对比

你可以点击这里的 DEMO 体验一下,HTTP/2 的加载快感。

历史

超文本传输协议(英文:HyperText Transfer Protocol,缩写:HTTP)是互联网上应用最为广泛的一种网络协议。设计 HTTP 最初的目的是为了提供一种发布和接收 HTML 页面的方法。通过 HTTP 或者 HTTPS 协议请求的资源由统一资源标识符(Uniform Resource Identifiers,URI)来标识。

HTTP 的发展是由蒂姆·伯纳斯-李于 1989 年在欧洲核子研究组织(CERN)所发起。由万维网协会(World Wide Web Consortium,W3C)和互联网工程任务组(Internet Engineering Task Force,IETF)制定标准,最终发布了一系列的 RFC,其中最著名的是 1999 年 6 月公布的 RFC 2616,定义了 HTTP 协议中现今广泛使用的一个版本——HTTP 1.1。

2014 年 12 月,互联网工程任务组(IETF)的 Hypertext Transfer Protocol Bis(httpbis)工作小组将 HTTP/2 标准提议递交至 IESG 进行讨论 [1],于 2015 年 2 月 17 日被批准。[2] HTTP/2 标准于 2015 年 5 月以 RFC 7540 正式发表,替换 HTTP 1.1 成为 HTTP 的实现标准。

以上摘要自 维基百科

SPDY

SPDY(发音如英语:speedy)。实际上在 HTTP2 提出来之前,SPDY 流行了很长一段时间。该系列协议由谷歌开发,于 2009 年公开。它的设计目标是降低 50% 的页面加载时间。当下很多著名的互联网公司都在自己的网站或 APP 中采用了 SPDY 系列协议(当前最新版本是 SPDY/3.1),因为它对性能的提升是显而易见的。主流的浏览器(谷歌、火狐、Opera)也都早已经支持 SPDY,它已经成为了工业标准。HTTP Working-Group 最终决定以 SPDY/2 为基础,开发 HTTP/2。

突然在 Chrome 51 版本之后不支持 SPDY 了,Chrome 弃用了 SPDY,开始全面支持 HTTP2。

HTTP/2 的优势

相比 HTTP/1.x,HTTP/2 在底层传输做了很大的改动和优化:

  1. 每个服务器只用一个连接。HTTP/2 对每个服务器只使用一个连接,而不是每个文件一个连接。这样,就省掉了多次建立连接的时间,这个时间对 TLS 尤其明显,因为 TLS 连接费时间。

  2. 加速 TLS 交付。HTTP/2 只需一次耗时的 TLS 握手,并且通过一个连接上的多路利用实现最佳性能。HTTP/2 还会压缩首部数据,省掉 HTTP/1.x 时代所需的一些优化工作,比如拼接文件,从而提高缓存利用率。

  3. 简化 Web 应用。使用 HTTP/2 可以让 Web 开发者省很多事,因为不用再做那些针对 HTTP/1.x 的优化工作了。

  4. 适合内容混杂的页面。HTTP/2 特别适合混合了 HTML、CSS、JavaScript、图片和有限多媒体的传统页面。浏览器可以优先安排那些重要的文件请求,让页面的关键部分先出现,快出现。

  5. 更安全。通过减少 TLS 的性能损失,可以让更多应用使用 TLS,从而让用户信息更安全。

Can I use?

在以下浏览器的版本都开始支持 HTTP2。

clipboard.png

这就尴尬了!Android 4.4.4 也就是 Kitkat 版本以下都不支持 HTTP2,谷歌 2016 年 6 月份的数据显示 该版本的用户占 31.6%。

不过好消息是,支持 HTTP/2 的 Web Server 基本都支持 HTTP/1.1。这样,即使浏览器不支持 HTTP/2,双方也可以协商出可用的 HTTP 版本,没有兼容性问题。

clipboard.png

谁在用 HTTP2

推荐一个浏览器插件HTTP/2 and SPDY indicator,蓝色的小图标亮起,就表示该网站使用了 HTTP/2 协议。

clipboard.png

大公司已经走在了时代的前沿,我们这些追随者有什么理由不跟上呢。

不过百度这次又没有跟上,不信你们自己去看。

服务器支持

这里是 一览,主流的开发语言和应用服务器都已经支持了 HTTP/2。

最佳实践

安装

我们从 NGINX 开始,nginx 从 1.9.5 开始支持 HTTP/2。

  1. openssl。建议全局安装。

  2. SSL/TLS。http2 严格要求使用 https,所以你得准备一个证书。当然也可以在 let's encrypt 申请一个。

  3. nginx 至少需要启用 http_v2_module 和 http_ssl_module 这两个模块。先下载源码,在安装目录执行

./configure --with-http_v2_module --with-http_ssl_module
make&&make install

配置

  1. 重定向所有的请求到 SSL/TLS

    server {
     listen 80;
     location / {
     return 301 https://$host$request_uri;
     }
    }
  2. 开启 HTTP/2

    server {
     listen 443 ssl http2 default_server;
    
     ssl_certificate server.crt;
     ssl_certificate_key server.key;
     ...
    }
  3. 最后一步,重启 nginx

    nginx -s reload
  4. 为了验证 HTTP/2 是否开启,你可以安装浏览器插件 HTTP/2 and SPDY indicator 进行查看。

负载均衡方案

向下兼容

需要指出的是 HTTP/2 的服务器都是向下兼容的 HTTP/1.1 的,升级了之后,你不需要担心,之前的老版本用户怎么办。访问方式如下图,

clipboard.png

非完整链路的 HTTP/2 和 TLS

客户端使用期望的协议连接代理服务器,比如 TLS 或 HTTP/2,然后代理服务器再去连接应用服务器、数据库服务器等,但不需要使用相同的协议。

clipboard.png

配合负载均衡

LVS 有 4 层和 7 层协议负载。所谓四层就是基于 IP+端口的负载均衡;七层就是基于 URL 等应用层信息的负载均衡。研究过阿里云的 SLB,暂时还不支持 HTTP/2 的支持,也没有看到 AWS、IBM 有对应的服务支持。所以我们能用的解决方案就是:

LVS 4 层 + HTTP/2 web Server

LVS 只做请求分发,由应用服务器来处理加密解密和 HTTP/2 的支持。这样的方式,对性能影响有多少呢,需要实际的测试,不过目前来说,没有其他方案。

不是银弹

对于 web 前端

HTTP1.1 时代,我们针对这个协议的特性做了很多 WEB 前端优化,比如说 域名分片、文件合并压缩、雪碧图、行内代码等。但是到了 HTTP/2 时代,这些操作都是多余的了,对于同一个域名,只会建立起一个 TCP 连接。太多的域名还会增加新建连接的初始化和 TLS 握手的时间。

在采用 HTTP/2 之前,需要找出应用了这些优化的代码,分析一下它们会不会影响你的应用设计和工作流程。这样在迁移到 HTTP/2 之后,就可以着手改造它们,甚至撤销某些优化

HTTPS 的压力

HTTPS 正式启用之前还有很多问题要解决。

  1. 单连接开销比较大。HPACK 数据压缩算法会更新两端的查找表。这样可以让连接有状态,而破坏状态就意味着要重建查找表,另外单连接占用内存较多

  2. 全站点 HTTPS 的改造。可能涉及到 web,CDN,native 客户端。

其他问题

  1. 需要抛弃针对 HTTP/1.x 的优化。

  2. 对下载大文件不利。

  3. 你的客户也许不在乎。你的客户很可能不在乎他分享的自家猫咪的视频是否受到 TLS 和 HTTP/2 的保护。

参考文献


如果觉得我的文章对你有用,请随意赞赏
已赞赏

你可能感兴趣的

13 条评论
wozhaoying · 2016年11月30日

呵呵呵,在我这里http/2加载出来竟然比http/1.1要慢。

+1 回复

娃娃脾气 · 2016年11月30日

真的哎,HTTP2加载出来的图片比HTTP1.1漂亮多了。

回复

娃娃脾气 · 2016年11月30日

HTTP/1.1

Latency: 60ms
Load time: 3.84s

HTTP/2

Latency: 56ms
Load time: 3.43s

回复

Chandler心沒長大 · 2016年11月30日

请问那个chrome插件的其它颜色代码什么啊。我现在看到了蓝,绿,红,灰,和不支持的无色。没查到什么资料解释颜色啊,github上也没有说明。求科普

回复

流星狂飙 作者 · 2016年11月30日

我这里除了灰色就是蓝色,蓝色表示支持。你打开 google 的页面看看就知了

回复

xgqfrms · 2016年11月30日

回复

Chandler心沒長大 · 2016年11月30日

google我的是红色。。不然我也问不出这么多颜色。。

回复

magicly · 2016年12月01日

我的也是, mac和ios下chrome中都是http2比http1.1慢了30%以上! 什么鬼啊。。。

回复

magicly · 2016年12月01日

但是用http://http2.golang.org/gophe... 这个链接测试, 就能看到http2明显快很多

回复

wenber · 2016年12月01日

这样重定向所有请求到https不是死了吗?死循环?

回复

jrainlau · 2016年12月01日

http2并非真的这么牛逼,他的速度优势是有条件的,详情可以参考我的一篇文章

回复

流星狂飙 作者 · 2016年12月07日

你们被未来抛弃了。哈哈, http2 有时候确实不快,好的情况就要好上一倍多

回复

pc813 · 2017年02月18日

作者你好,我把此文章放到了 linkedinfo.co,我的一个业余小项目。如您觉得不妥,请随时联系我将之撤下。

linkedinfo.co 是一个集合了各类优秀技术文章的站点,它并不展现全文,所有条目都附上作者与原文链接,读者最终都会进入到作者原文的站点。做 linkedinfo 的初衷是想方便自己且方便其他想学习的朋友,能更方便地找到自己感兴趣的技术文章。同时这也是一个我自己练习的过程,比如将正在学习的 Semantic Web 技术应用到 linkedinfo 来更好地连接不同的知识。

各位感兴趣的朋友可以去 linkedinfo.co 看看,非常希望能得到你们的意见与建议(可在 about 页面留言)。

回复

载入中...