青青子衿, 悠悠我心, 但为君故, 沉吟至今
« 后谷歌时代的中国互联网生态Twitter API中文文档 »

网站技术分析报告之——开心网

  读者投稿:一直在研究互联网技术,经常访问这样那样的网站,突发奇想,为什么我们不去看看这些网站的技术架构是怎么样的呢?研究一下源代码?于是便有了这个系列,首先找谁呢?还是找山寨版的开心网开刀吧,这个开心网,不是那个开心网,呵呵。

  坦白说,我不太想注册,也不想研究太多太多,一般来说,一个网站最重要的是首页,Ok,那我们就从首页开始吧。

  本系列文章仅仅是个人研究发布,仅供参考。

  分析工具:各种浏览器,firebug(一个基于firefox的插件)

  开心网首页是一个简单的登陆页,居然做到了385.2KB之大,像开心网这么大的流量,每多1kb就意味着每天N多的钱哪。我没有找到官方的pv 或独立Ip的数据,根据alexa的数据参考一下吧,估计日均独立IP为528,000,我们估计按每独立IP访问一次登陆吧,实际上可能少一些,因为很多用户可能直接在首页上登陆了(alexa的数据也不是那么可靠,供参考吧)。

  开心网的网页每增加1k,我们需要多少带宽?算一下,我们需要528,000/1024=515MB/天的带宽,然后我们平均一下,按一天24小时用户访问很平均来计算(实际上不可能,一般峰值访问会是平均值的一倍以上),每秒需要消耗带宽是528000 / (24小时 * 60分钟 * 60秒)=6Kb,考虑到峰值,估计要到12k以上。

  看官,像开心网这么简单的登陆,完全可以控制在100k以内的大小,为什么要这么多呢,一会儿看网页的分析就可以知道了。这是什么概念?385-100=285k,再算出带宽得出:285k * 12k / 1024 = 3.3M.乖乖,开心网每天需要添加3.3M的独享带宽。3.3M的带宽会是多少钱呢?我们就以中档的机房来举例,北京中档的3M独立带宽,怎么也得3-5万块吧,再加上CDN的带宽,估计开心网每年需要为此增加5-8万的费用。

开心网

  分析一下开心网存在的问题:

  1. Javascript文件直接写在了网页当中

  开心网的登陆页有大量的javascript的代码,这样的代码一方面不利于维护,另一方面,也不利用用户加载页面。大致计算了一下,开心网登陆页一个有180余行的javascript代码,而总代码仅在336行,也就是说代码中的javascript代码占了1/2 强。

  2. 网页没有开启gzip

  根据文件头返回的信息可以看到,开心网应该在linux上搭建了nginx ,添加gzip应该不会是很难的事吧?而且像html及静态js/css这些文件,gzip后起码可以减少50%的传输量,当是这一项,就可以每年省下上百万的费用。

  当然有人会反对,认为gzip会加重服务器的压力,并且客户端解压的时间与减小文件大小带来的传输速度不会有太多好处。但我认为,对于静态文件来说,可以放到独立的服务器,这个服务器可以把文件压缩后放到缓存中,这样不用去读IO,响应速度会提高。同时,虽然现在用户的带宽都已经是512k的 adsl以上了,但是为什么我不可以让用户更快的看到我们的网页呢?退一万步说,用户真的在乎这个快几秒的,那么我们为什么不可以减小带宽的压力以节省成本呢?如果把节省下的这些钱去奖励员工,没准他们可以给我带来更多的惊喜呢。

  3. Javascript没有做任何处理

  开心网的 javascript可真有意思,他们的开发人员代码质量还不错,起码注释写得还不错,可是问题是,你需要把这些注释都发到客户端么,难道开心网想教我们怎么写javascript代码?这样的代码发到客户端,既占带宽又会泄密网站的代码。

  开心网的核心javascript文件xn.core.js有105k,这么大的其中注释占了不少的代码,我尝试使用yahoo和google的压缩工具进行压缩,但因为代码中有错误无法完成,所以只好放弃。但我估计这个js,最基本的压缩去除空行和注释,可以减少1/5左右的大小,如果进行一些混淆的话,应该可以在40k左右,如果再gzip的话,应该就只有15k以内了。

  4. 图片文件过大

  登录页有一个157k的sys-bj2.jpeg文件,天啦,这么大的。我下载这张图片一看,发现这个图片实际是同几张图片组合的。他们的设计人员其实是想减少网页对服务器的请求数,所以把几个图片合并到一块。但是,他们这种做法是错误的。

  我们要减少请求数,一般是把小图片,一般是几k的36 px* 36px以下的小图片合并,而不是把大图片也合并。因为小图片数量多,而大图的合并,也会增加图片的大小。我将这个图片用ps再优化一下,优化到 66k,也没发现明显的失真。所以我认为,就算是大图,也可以优化到80k以内,而不是如此157k大小的图片。

  再多一句,这个图片总量才5个合并是完全没有必要的,并且图片最大的有600px*255px,而最小的只有10px*10px以下,这种合并没有任何益处,百害而无一益!

  总结

  开心网作为一个访问量非常大的网站,网页结构也非常简单,理应做得更小,比如在100k以内。从我的分析中可以看出,主要问题集中在 javascript,gzip和图片上,代码质量总体还可以。当然,我们不仅只是挑刺,也应该看到一些好的地方,如下:

  1. 首页处理得比较到位,虽然javascript也没有压缩,但总大小只有108k

  2. 文件请求数较少,这个和开心网本身有关,开心网本来就不是一个网页结构复杂的网站,所以文件数自然会比较少了

  3. 静态文件和网页分开部署

  4. Javascript注释比较好,但不应该发到客户端

  重要建议:

  1. 开启gzip压缩

  2. 压缩javascript及css,并将这些文件缓存起来

  最后,这次的分析就写到这里了,就事论事而已,和任何网站及相关的人员没有任何关系,呵呵。

  来源:读者Conis投稿,原文地址。版权声明:本文授转月光博客刊登,其他非授权网站媒体转载,需要添加作者网站地址http://iove.net,否则视为侵权。



  除非注明,月光博客文章均为原创,转载请以链接形式标明本文地址

  本文地址:http://www.williamlong.info/archives/2151.html
  • 文章排行:
  • 2.捡宝贝
  • 分析的很到位,学习了,做好一个站真的是很难的呀。太累人了,在累中寻求快乐吧。
  • 2010/4/21 4:59:33   支持(10)反对(4) 回复
  • 3.摩尔博客
  • 仔细读了一遍,很客观,比较到位!
  • 2010/4/20 9:52:08   支持(10)反对(5) 回复
  • 6.evan
  • 要想减少流量提高速度,去掉一个flash够你压缩几十个网页了。
  • 2010/4/21 12:27:57   支持(14)反对(10) 回复
  • 7.任鸟飞
  • 在补充一下:
    靠节约这点流量 根本没有明显改变 !开心网多少页面?首页只有一页而已!
  • 2010/4/20 11:12:07   支持(9)反对(6) 回复
  • 8.偶行偶酷
  • ie 6不支持 gzip
    如果启用了 gzip
    那么中国 占 很大市场份额的ie6 会 造成很多 页面显示不正常 或者没法显示
    ops2000 于 2010-4-24 16:43:05 回复
    浏览器不支持gzip,服务端就不会压缩的,不会出现所说的不兼容情况。
    ccyj 于 2010-5-12 19:10:26 回复
    ops2000 于 2010-4-24 16:43:05 回复
    浏览器不支持gzip,服务端就不会压缩的,不会出现所说的不兼容情况。

    你确定试过?
  • 2010/4/21 16:08:17   支持(10)反对(7) 回复
  • 9.CH5iRe
  • 不是商业级别也没那么费劲。可惜个人站长时间不多,力量不足,资金不够。
  • 2010/4/23 13:13:54   支持(12)反对(9) 回复
  • 10.留名
  • 不是每个人都希望页面做的越简单越好的~~这是一
    天涯的页面首页也很大,以前的还大些,大到我朋友笔记本根本就打不开,以前(大概4年前)有人分析过为什么加载那么多代码,可惜咱不懂。。
    楼主说的也很有道理~~~~~
  • 2010/4/25 3:40:03   支持(8)反对(5) 回复
  • 11.博踩众山
  • 开心网是一个跟随成功的特例,时机、策略和资金定位都很运气。
  • 2010/4/25 21:45:48   支持(9)反对(6) 回复
  • 13.geox
  • 不错啊
    开心网注册就比较恶心了,和域名备案一样
  • 2010/4/20 10:29:39   支持(11)反对(9) 回复
  • 14.解梦
  • 都是讲的网站优化设计,值得借签
  • 2010/4/20 10:30:47   支持(11)反对(9) 回复
  • 15.RayChow
  • 呵呵,分析的应该是山寨开心网吧,说不定正牌开心网做了优化,故意放出未经优化的版本呢
  • 2010/4/20 12:25:28   支持(10)反对(8) 回复
  • 16.dsdas
  • 博主意思是别人一个团队都不如博主一个人技术强
  • 2010/4/20 12:35:58   支持(7)反对(5) 回复
  • 17.pw
  • 博主写的这篇文章其实挺好的,要是放在自己的博客上,肯定会有不少好评+跟贴的。

    可是,你干嘛要推荐到月光博客呢?虽然你分析的有点道理,但分析的够全面吗?你的意思是:开心网如果请了你,就可以节省一个团队的费用,是这样吗?
  • 2010/4/20 13:23:10   支持(9)反对(7) 回复
  • 18.灰太狼
  • 博主说的全面也没有错误,但是不代表正确,对网站应用来说,只有合适的没有绝对的对和错。我会在我的博客发表下我的看法。
  • 2010/4/20 16:04:13   支持(8)反对(6) 回复
  • 20.程程
  • 前面已经有这么多人了,仰视。
  • 2010/6/11 17:17:10   支持(11)反对(9) 回复
  • 22.日记男孩
  • 要做好一个网站不容易啊
  • 2010/4/20 11:25:07   支持(8)反对(7) 回复
  • 23.无处非中
  • 没有玩过开心网,只是听人说过有这个网站。
  • 2010/4/20 12:25:50   支持(9)反对(8) 回复
  • 24.海南特产
  • 读完了,个别观点认同···
  • 2010/4/20 14:18:25   支持(7)反对(6) 回复
  • 26.武汉办公用品中心
  • 我还是觉得IE6号
  • 2010/4/20 21:25:06   支持(8)反对(7) 回复
  • 27.evan
  • 相对于图片和视频,html和js文件的大小根本不是问题。良好的注释和编码习惯带来的是长期的可维护性和人才积累。花时间到js和css的压缩上是丢了西瓜捡芝麻。
    况且看网页代码学习的人很多,看到一个做的很好的网页我经常会看源代码学习,如果是一坨紧缩代码我立马关掉网页,再漂亮也不看,因为恶心到了。
  • 2010/4/21 12:24:37   支持(10)反对(9) 回复
  • 28.KyleHu
  • 完全同意!很多人没读过这篇文章,可能他们不在乎这点带宽吧,有钱烧的:
    Best Practices for Speeding Up Your Web Site
    http://developer.yahoo.com/performance/rules.html
  • 2010/4/20 10:41:00   支持(7)反对(7) 回复
  • 29.任鸟飞
  • 我觉得楼主高估了国内网民的水平了,开心网用户群体可能很多都是学生 工作族,应该是女士居多吧,像这类群体大多计算机水平都一般,也就是说他们对这方面要求很“低”。所以说 作为一个网页设计师更应该站在网民的角度考虑问题,而不是站在专家的角度。

    太专业了 “不好”!
    三松 于 2010-4-20 11:51:22 回复
    人家说的是对网站来说,不是对用户来说的,你网站烧多少钱,对用户没什么感觉。你都没看清楚,说的是网站优化节省带宽。不过页面小了,用户的速度也快了吧
  • 2010/4/20 11:09:45   支持(13)反对(13) 回复
  • 30.博百优
  • 我发现很多大网站的优化 ,结构都不怎么样!
  • 2010/4/20 16:11:07   支持(8)反对(8) 回复
  • 31.phpman
  • ie6对gzip的支持不知道怎么样?
  • 2010/4/20 18:02:25   支持(7)反对(7) 回复
  • 32.白洋淀
  • 这个应该发表在开心网才对啊
  • 2010/4/25 20:19:15   支持(9)反对(10) 回复
  • 35.玩家博客
  • 虽然不是很懂,还是全部看完了.....
  • 2010/4/20 14:57:17   支持(4)反对(6) 回复
  • 36.老实人博客
  • 感觉从来不关心开心网~
  • 2010/4/20 15:42:29   支持(9)反对(11) 回复
  • 37.阿熊
  • 楼主分析比较到位,不过提醒一下:
    js混淆是不推荐做的,混淆的执行容易导致客户端cpu彪高,如果客户的浏览器/windows因此而crash了,你想他下次还来么?
    另一个比较尴尬的地方就是之前遇到部分国产娱乐类杀毒工具,如金xx霸,瑞xx会把packer过的代码当成病毒。
    所以综合考量起来还是只作minify+gzip不做混淆的好。

    图片可以用smash.it或者具体对应的工具去优化一下,比ps应该不惶多让,合并小图片的说法是对的。

    css/js部分可以选择性合并以及minify,这要看你代码结构的整站重用性规划,合并过度反而浪费带宽。
    vivi 于 2010-4-23 22:18:54 回复
    况且看网页代码学习的人很多,看到一个做的很好的网页我经常会看源代码学习,如果是一坨紧缩代码我立马关掉网页,再漂亮也不看,因为恶心到了。
    --
    这个。。。人家没义务把原始代码给你看吧~~
  • 2010/4/21 15:43:38   支持(7)反对(9) 回复
  • 39.月落天涯
  • 那样的网站主要面向的是浏览者体验
  • 2010/4/20 9:54:28   支持(8)反对(11) 回复
  • 41.集思
  • SNS一般都是上班的,上学的人玩网页游戏的地方,首页做得那么大,真影响网速的时候,他们的用户不会去像开心网的问题,他们回去电信ISP升级带宽。
    刚才试了下,打开开心网首页用了10S,我家是3M联通宽带。
  • 2010/4/20 16:54:40   支持(5)反对(8) 回复
  • 42.lanye
  • 一切网站方式全得听运营的。
  • 2010/11/2 10:10:31   支持(7)反对(10) 回复
  • 43.Mutoo
  • 把峰值算在登陆页上合理吗?大部分人是保留登陆记录的吧。
  • 2010/4/28 23:55:03   支持(7)反对(11) 回复
  • 44.羽中
  • 真不知道楼主是懂还是不懂技术。。- =
  • 2010/4/21 19:46:32   支持(7)反对(12) 回复
  • 45.太阳博客
  • 今天很靠前啊,学习一下。
  • 2010/4/20 10:08:00   支持(5)反对(13) 回复

发表评论:

 请勿发送垃圾信息、广告、推广信息或链接,这样的信息将会被直接删除。

订阅博客

  • 订阅我的博客:订阅我的博客
  • 关注新浪微博:关注新浪微博
  • 关注腾讯微博:关注腾讯微博
  • 关注认证空间:关注QQ空间
  • 通过电子邮件订阅
  • 通过QQ邮件订阅

站内搜索

热文排行


月度排行

本站采用创作共用版权协议, 要求署名、非商业用途和相同方式共享. 转载本站内容必须也遵循“署名-非商业用途-相同方式共享”的创作共用协议.
This site is licensed under a Creative Commons Attribution-NonCommercial-ShareAlike 3.0 License.