质量为本、客户为根、勇于拼搏、务实创新
HTTP/1.1已经陪伴了我们很多年,随着我们的网络带宽条件越来越好,HTTP/1.1的性能问题日益凸显,而HTTP/2标准的推出正是可以解决这个问题。为了直观的看到使用HTTP/2协议所带来的优化效果,本文将介绍如何使用腾讯云CDN,COS以及万象优图来实现一个简单的demo。
HTTP/2的优势
多路复用
在HTTP/1.1中,浏览器并发多个请求,必须使用多个TCP链接,而浏览器会对单个域名有6-8的个数限制,因此出现了散列域名等优化策略;
而在HTTP/2中,同域名下多个请求和响应可在单个TCP连接上完成,请求之间并行处理。
考虑到大部分网站中图片请求是占比比较高的,随着请求数这部分的优化
头部压缩
HTTP/2中使用专门设计的HPACK来对headers进行压缩处理,这里的性能提升相对较小,本文暂不讨论
ServerPush
目前服务端支持较少,本文暂不涉及
一图胜千言
或者直接访问https://imgcache.qq.com/qcloud/cdn/official/h2test/index.html
注意:需要使用支持HTTP/2的浏览器,建议使用谷歌Chrome或者QQ浏览器(高速内核)
具体浏览器支持可以查询http://caniuse.com/#search=http2
该示例的代码在https://github.com/tencentyun/cdn-http2-test
HTTP/2样例的解析
页面组成
在本例子中,为了对比HTTP/1.1和HTTP/2在多图片加载情况下的性能差异,我们需要准备3个页面:
index.html:入口页面,我部署在imgcache.qq.com这个域名了,也可以部署在其他域名,或者本地打开都可以;
test-h1.html:HTTP/1.1测试页面,我部署在h1.qcloudcdn.com这个域名,该页面内嵌了400个小图片;
test-h2.html:HTTP/2测试页面,我部署在h2.qcloudcdn.com这个域名,该页面内嵌了400个小图片;
样例架构
测试效果
在我的100M网速+Win7Chrome56的条件下测试,HTTP/1.1全部400个图片加载完毕约1.8s,而HTTP/2只需要0.4s,加载时间大大缩短!
注意:不同的网络,机器环境下,测试数据可能会有差异,因此为了更准确与公平,建议您获取代码后部署到自己的环境上再进行测试
基本原理
test-h1.html和test-h2.html以iframe的形式嵌入到index.html里。俩个测试页面分别使用了2组图片分别进行加载,每组包含400个图片,每组图片部署在不同的域名,在每组图片完全加载完毕之后统计页面加载总时间。
为了保证公平,当打开index.html的时候,会先加载test-h1.html的内容,等完全加载完毕之后,再开始加载test-h2.html的内容。
注意:由于test-h2.html的资源是通过HTTP/2协议加载的,默认都启用了HTTPS证书,为了保证公平,test-h1.html内的资源也必须用HTTPS访问
图片生成
这里有一个难点,就是如何用大图生成400个小图?如果我想更换其他图片,或者切分成更细的粒度,改动成本是很高的。
所以我这里用到了万象优图的图片裁剪功能,简单介绍一下,当图片上传到万象优图的Bucket内之后,可以直接根据访问的url进行图片裁剪!
举个例子,在上面的示例中,我的原图是https://h2.qcloudcdn.com/qcloud-h2.jpg
使用万象优图的裁剪接口的话,比如我要获取左上角坐标(0,0),宽高是64*64那块图片,则可以直接访问https://h2.qcloudcdn.com/qcloud-h2.jpg?imageMogr2/cut/64x64x0x0
聪明的你一看就明白,图片裁剪就是在url后面加上
?imageMogr2/cut/{width}x{height}x{x}x{y}
其中width是你需要裁剪的图像宽度像素值,height表示高度,x表示距离左上角原点的横坐标距离,y表示距离左上角原点的纵坐标距离
就是这么简单!通过url参数,我就可以获得图片的任意一小块,可以大大减少图片切分的工作量!并且可以通过程序生成各种想要的版本