让你的网站升级到HTTP/2

相比前端界、APP开发中各种新事物层出不穷,服务端的新标准和新技术相对而言关注的人就少多了,这些标准、技术是互联网的基石,可是跟消费者、用户有点距离,什么毫秒级别100%的乃至500%的性能提升,多少KB字节的优化balabala对于用户来说也是没有多大感受,某种程度上,觉得倒蛮心疼的,吃水的不会记得挖井的人,吃好水的人记不住保护环境的人,最后记住的都是饮水机的代言人。

今年早些时候,Nginx 曾发布过一个 early-alpha patch 来提供对 HTTP/2 的支持,但从最新发布的 Nginx 1.9.5 开始,http_v2_module 已经替换了 ngx_http_spdy_module 并正式开始提供全面的 HTTP/2 支持。

前段时间在看《HTTP权威指南》,想着就再折腾一下吧。

HTTP/2今年也算是一个热点,几经扭转,终于在今年5月定稿发布了。

谷娘同他的亲儿子Chrome早早地就在推SPDY,世界上几个最大的网站Facebook、雅虎、Twitter、Youtube也都早早地部署了SPDY协议。今年二月,在HTTP/2.0集成了SPDY并进入标准化的最后阶段时,Google宣布不再开发SPDY。

然,SPDY这个小妾某种程度上可以理解已经被休了,或者换个角度,SPDY正式当上了正房大夫人。

对于SPDY和HTTP/2的详细就不再啰嗦,强烈推荐一下360前端工程师@屈光宇的系列文章:

挺欣赏@屈光宇前辈的,对HTTP和Web性能的研究十分深入,他的博客就是集Web优化大成者。

下面说下如何升级到HTTP/2,目前nginx 1.9.5已经实验性地支持HTTP/2了。

SSL部署

对于从无到有的问题就不再这里再多废文墨,请大家自行谷歌SSL部署HTTPS等关键字即可。

CentOS / Red Hat 升级HTTP/2

首先升级nginx版本,确保使用的是主源(包含了最新实验发行版)。

修改/etc/yum.repos.d/nginx.repo的nginx仓库地址

[nginx]
name=nginx repo
baseurl=http://nginx.org/packages/mainline/centos/$releasever/$basearch/
gpgcheck=0
enabled=1

如果还没有安装nginx,直接执行yum install nginx,如果已经安装了,则可以通过yum clean all && yum update nginx升级。

Ubuntu / Debian 升级HTTP/2

同理,首先修改apt仓库源/etc/apt/source.list的地址,增加下面两行仓库。

deb http://nginx.org/packages/mainline/debian/ codename nginx
deb-src http://nginx.org/packages/mainline/debian/ codename nginx

接下来执行apt-get clean && apt-get install nginx即可。

验证Nginx版本

下面确认我们机器上的Nginx已经升级到至少1.9.5版本。

$ nginx -v
nginx version: nginx/1.9.5

Nginx启动HTTP/2

开启HTTP/2也十分简单,直接在指定的域名nginx.conf中配置。


server {
  listen        443 ssl http2; 
  server_name   luolei.org;

  #SSL配置
  ssl                   on;
  ssl_certificate       /etc/nginx/conf.d/certificate.crt;
  ssl_certificate_key   /etc/nginx/conf.d/certificate.key;

}

listen后面增加http2即可。

  • 注意:不能混用SPDY和HTTP/2,如果你两个都同时开启,会报错。
nginx: [warn] invalid parameter "spdy": ngx_http_spdy_module was superseded by ngx_http_v2_module in /etc/nginx/conf.d/vhost.conf:12

重启Nginx

service nginx restart重启nginx。

这个时候回到你的浏览器,打开开发者工具,进入网络Network,打开Protocol

刷新一下你的网页,主域的Protocol已经变了成了h2,这就意味着已经成功升级到HTTP/2。

或者使用Chrome的网络工具,在地址栏中输入chrome://net-internals/#http2

这个时候,应该也能看到你网站的请求信息,Protocol Negotiated一栏也已经变成了h2

性能差异

对于HTTPS、SPDY和HTTP/2性能的比较,推荐可以参考:

后言

Web性能优化这块对于前端开发者而言,也是很值得深入研究的,雅虎14条什么的是个人都会背,不要仅仅局限在纸上谈兵,自己动手实践一遍。

下面,问题来了:

从输入URL 到页面加载完成发生了什么事?

这是一个很好的问题,每一步,每一个节点,都能从不同的角度发现很多好玩的东西。

如果你是一名前端开发者,你会怎么回答这个问题呢,每一步都能做到哪些优化呢?

嗯哼,看书去了。(ノ`⊿´)ノ

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 157,298评论 4 360
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 66,701评论 1 290
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 107,078评论 0 237
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 43,687评论 0 202
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 52,018评论 3 286
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 40,410评论 1 211
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 31,729评论 2 310
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 30,412评论 0 194
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 34,124评论 1 239
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 30,379评论 2 242
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 31,903评论 1 257
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 28,268评论 2 251
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 32,894评论 3 233
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 26,014评论 0 8
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,770评论 0 192
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 35,435评论 2 269
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 35,312评论 2 260

推荐阅读更多精彩内容

  • 转载于:http://mrpeak.cn/blog/http2/ HTTP 2.0的那些事 在我们所处的互联网世界...
    柒黍阅读 2,312评论 0 8
  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 170,544评论 25 707
  • 第一章 Nginx简介 Nginx是什么 没有听过Nginx?那么一定听过它的“同行”Apache吧!Ngi...
    JokerW阅读 32,438评论 24 1,003
  • 本文转载自:众成翻译译者:为之漫笔链接:http://www.zcfy.cc/article/22原文:https...
    极乐君阅读 685评论 0 10
  • 我喜欢诗,我总想把日子过成诗的模样,可奈生活让我湿了一片。 最近一段时间以来,我把自己关在小房间里...
    衘觞赋诗阅读 212评论 1 1