黄慧攀:HTML5 应用加速

7月19日,由HTML5梦工场主办的第四届HTML5峰会暨攻城师嘉年华(iWeb峰会)首站在上海开幕,会上UPYUN(又拍云)的 CTO 黄慧攀发表了《HTML5 应用加速》主题演讲。

以下是演讲实录: 01

大家好,我叫黄慧攀,今天给大家讲的主题是加速H5应用,这个东西非常简单,只需要5分钟就能把这个东西提速。

03

我们今天就来一个实例,我们现在加速一下我们H5峰会上海站的主站,这个是我们的活动官网,可以看到他整个页面的加载总耗时2.17秒;这里我们不允许浏览器缓存这些资源,每一个请求都必须落到服务器里面去。

04

今天给大家介绍的工作是什么?他就是全站加速的工具,如果你把它接入到你的网站或者应用里面,你马上就能得到效果的提升。

05

这个是我自己在我的UPYUN的空间,只要绑到我们要加速的网站上,这样一弄加载速度就变成1.26秒,这个加速达到了40%的样子。

06

我分析了一下我们这个官网有什么特点,官网服务器在北京一个BGP机房里面,他的网络条件都是十分优秀,全国的访问质量都能够保障。我在测试的地点就是在浙江杭州电信的网络连上去,在这里我分析了整个页面的加载。第一个肯定是页面本身的动态页面,他的加载如果我直接去源站BGP机房的话只有60毫秒,这个速度非常棒。但如果走的CDN的话,他要达到140多毫秒,这里是变慢了很多。静态内容我看了一下,从源站下载能力要1秒从CDN下载却只要300多毫秒,这个速度提升了70%,快了3倍。

07

07

这张告诉大家具体的怎样的,我们就可以看到1.07秒是原来主站上面下载图片的速度,上面那个小图是我从CDN下载的数据,300多毫秒。

08

在这里我们需要总结一下,为什么说整个页面加速了40%呢?我们刚刚说到动态页面反而慢了一倍,而静态的资源加速速度是达到了3倍。我们会发现这个页面里面,那些静态资源的数量比起我这个页面本身要多得多,比如说这个官网就有102个静态资源,如果我把静态资源这些东西加速的话,相当于我整个页面打开时间会得到一个提升,所以他的整体速度是能够加速到40%。并且这些静态资源还可以被缓存,如果在边缘缓存速度是非常棒的。为什么这些资源我要缓存在节点上面呢?UPYUN有120多个节点全国的电信、联通、移动网络都可以得到覆盖,UPYUN网络覆盖是全国领先的,没有其他公司可以对比,移动有22个节点,电信、联通是几乎百分之百覆盖的,只有新疆、西藏没有覆盖。

09

边缘节点的覆盖率越高,得到加速的效果会越好,为什么会这样?从我们浙江电信这里,如果我要源站北京的BGP机房下载一个资源,他走的链路是怎么样的?第一个我肯定从家里连到浙江电信的骨干,再从浙江电信连到北京电信,再从北京电信落到北京BGP机房,这里面可以分成三段,最慢的那段就是浙江电信到北京电信,这里是跨省的网络,会出现很多问题,因为我们骨干那一块带宽是有限的,他不像在一个省内,一个区域内,区域内的带宽是非常充裕的,但是一出省了,那就会遇到带宽瓶颈的问题。

10

下面这个图是我临时加上去的,这个图会说明为什么是这样,并且他的真实情况就是这样。这张图是某一个网站下载速度的截图,是最近7天的,他应该在晚上7点钟到晚上10点钟会是速度的低谷,这个低谷已经用到了CDN还会出现低谷,因为在本省内带宽都已经出现拥堵,更何况要跨省,他的速度会更慢。

11

还有一些创业者的服务器资源不是这么好,有可能用的单线的服务器,跨网的网络质量更差,下载速度非常慢,除非你用BGP,这又面临高昂的成本,这个成本绝对是CDN的两三倍以上,所以这个静态资源更适合放到CDN,并且效果比BGP还要好。

12

这个是UPYUN骨干网络,在我们的网络里面经过链路优化达到最快的速度访问源站的服务器,骨干的网络投入非常大,我们有从广东到浙江、山东到浙江和香港到广东的长传光纤(在我们公司就可以流畅观看Youtube 4K的视频,一点都不卡)。我们下半年还在建设美国到香港,法国到香港的长传光纤链路。大家听到这些应该就能了解到,我们正式开始向国际加速迈进。我们刚刚还真正上了一个美国自建节点,怎么样叫自建?是指所有的硬件、路由器、交换机都是自己的采购的。

13

刚才我们说的都是比较简单的,裤子都脱了,再给大家更给力一点的东西。

14

16

这里还可以再提升10%的速度,达到加速度是50%,其实这50%用到的只是非常小的功能,他就是HTTPS+SPDY,如果你的静态资源多的话,他给你的是一个加速,而不是说他会变慢。

17

我找了很久找到一个HTPP/2的请求说明图,这里面主要说明如何在一个TCP链路里面,可以让你同时下载多个资源,做到链路复用,可以节省网络TCP握手的开销,会使得整体下载速度变得更快。尤其在我们移动网络,在3G/4G网络更好。

18

并且我们用了HTTPS的话,我们内容更安全,不会被国内运营商劫持你的内容,大家可能看到网上很多介绍,如APP里面弹出一个广告,这种就是链路劫持,他把你的内容都改变了。如果你还用了我们的HTTPDNS服务的话,可以防止域名劫持,这个也是很重要的手段,尤其在移动网络内,他甚至会把你的APK劫持,比如说我下载的是一个小游戏,但我下载回来的内容居然是一个应用市场,这种莫名其妙情况是非常多的。

20

我们要得到这一切的话,那个成本会是多少?我需要付出什么?第一个,我要买一个域名的证书,如果我们到国外直接购买,一般几十美金就好了。另外是CDN加速,目前我们UPYUN应该是最便宜的,0.29元/GB 流量,如果你加入UPYUN联盟,甚至是每月免费15GB流量。

21