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

news/2024/5/11 16:58:35/文章来源:https://blog.csdn.net/mengxiangone/article/details/8828631

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

  坦白说,我不太想注册,也不想研究太多太多,一般来说,一个网站最重要的是首页,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.luyixian.cn/news_show_868430.aspx

如若内容造成侵权/违法违规/事实不符,请联系dt猫网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

使用GitHub Pages+Hexo 搭建个人网站详细教程

文章目录 -GitHub Pages和Hexo的介绍-安装Node.js-安装Git-验证是否安装成功-点击Git Bash-点击鼠标右键 -安装Hexo-Hexo 初始化配置-查看网站初始效果 - 将博客部署到 Github Pages 上-注册git-创建 repository-配置GitHub账户信息-配置SSH密钥-在 GitHub 账户中添加你的公钥-…

大型网站架构的演变

大型网站架构演变 转自:http://wenku.baidu.com/view/52b477b765ce0508763213c8.html 今天我们来谈谈一个网站一般是如何一步步来构建起系统架构的,虽然我们希望网站一开始就能有一个很好的架构,但告诉我们事物是在发展中不断前进的&#xff…

[转]李平:大型网站的灵魂——性能

这篇文章,可以对才入换联网,还没形成整体概念的人,提供一些基础入门,特别从请求开始到结束部分,了解了解 还是不错的。 原文地址:http://www.csdn.net/article/2014-09-30/2821940 什么是性能 有人说性能就…

提高网站速度的最佳实践

今天偶尔在网上看到了这篇文章,http://developer.yahoo.com/performance/rules.html,是Yahoo 人写的《提高网站速度的最佳实践》共有 14 条,是英文的,本来想翻译一下,google 了一下,已经有翻译版了。贴出来…

提高网站速度的最佳实践

今天偶尔在网上看到了这篇文章,http://developer.yahoo.com/performance/rules.html,是Yahoo 人写的《提高网站速度的最佳实践》共有 14 条,是英文的,本来想翻译一下,google 了一下,已经有翻译版了。贴出来…

大型网站架构演变和知识体系

网站在经过长时间的积累,架构也在慢慢的演变以适应网站的发展。 架构演变第一步:物理分离webserver和数据库 最开始,由于某些想法,于是在互联网上搭建了一个网站,这个时候甚至有可能主机都是租借的,但由于这…

网站返回503

网站需要临时维护,这是个经常性的问题,在这期间必须关闭网站一小段时间,而在这段维护的期间内,我们应该做些什么,我们应该向搜索引擎返回什么样的header信息?200?404?500&#xff1f…

Android应用实例之---使用Linkify + 正则式区分微博文本链接及跳转处理如同新浪微博Android版的应用上,当我们点击微博文本上的链接会自动跳转界面,或网站链接跳转网页浏览,或邮箱链接

http://www.cnblogs.com/ryan1012/archive/2011/07/12/2104087.html 如同新浪微博Android版的应用上,当我们点击微博文本上的链接会自动跳转界面,或网站链接跳转网页浏览,或邮箱链接跳转邮箱服务,或电话号码链接跳转拨号界面。And…

JavaScript中的mouseover与mouseenter,mouseout和mouseleave的区别

1、mouseover与mouseenter mouseover事件:不论鼠标指针穿过被选元素或其子元素,都会触发 mouseover 事件。 mouseenter事件:只有在鼠标指针穿过被选元素时,才会触发 mouseenter 事件。 简单写个例子: [html] view pl…

大型网站的灵魂——性能

大型网站的灵魂——性能 前言 在前一篇随笔《大型网站系统架构的演化》中,介绍了大型网站的演化过程,期间穿插了一些技术和手段,我们可以从中看出一个大型网站的轮廓,但想要掌握设计开发维护大型网站的技术,需要我们一…

为Symfony2和Redis正名,基于PHP的10亿请求/周网站打造

摘要:Octivi当下网站每周请求数已达10亿次,然而出人意料的是,他们仍然使用着Symfony2这个通常被认为低性能的PHP Framework。除此之外,他们更使用了Redis作为主要储存。 【编者按】如果你还在Symfony2和Redis使用中存在这样的错误…

自学改变一生,6个适合年轻人自学的网站,知乎超100万人推荐

在学校或者工作中,觉得自己的能力毫无提升,怎么办?在做好自己本职工作,不妨多去学习一些知识,让自己的技能更加强,收入更上一层,何乐不为? 第一个:慕课网 第二个&#x…

一些网站设计原型图

看到了一些非常棒的网站产品的原型图设计,分享给大家看看,任何一个伟大的互联网产品设计都是从这些看似简单,粗糙的线框图开始的。 有时候用纸和笔来进行快速的创意描绘会得到更迅捷的成果,你可以在一个简单的模式中速写你的结构设…

把HTTPS网站中的安全证书导入到java中的cacerts证书库

第一步:下载证书 第二步:导入证书 以管理员身份运行任务 C:\Windows\system32>keytool -importcert -alias COMODO_RSA_Extended_Validation_Secure_Server_CA -keystore "C:\Program Files\Java\jdk-11.0.8\lib\security\cacerts" -fil…

爱奇艺视频网站数据清洗整理和结论研究

1、数据清洗 - 去除空值import numpy as np import pandas as pd data pd.read_csv(C:/Users/HP/Desktop/爱奇艺视频数据.csv,engine python)def data_cleaning(df):for col in df.columns:if df[col].dtype object:df[col].fillna(缺失数据,inplace True) #fillna方法填充…

ASP.NET 2.0网站专案同时使C#与VB.NET之技巧

转自:http://blog.csdn.net/dotnetcool/archive/2006/09/07/1189291.aspx 在以往VS.NET 2002及VS.NET 2003的Visual Studio工具本身不支援多个组件档(Assembly),也就是专案编译后只会产生一个.dll组件,而一个组件只允许…

从零打造视频播放网站(2)-后端接口设计篇

后端接口设计篇 环境:接口文档:说明:测试: 环境: centos7系统php7.0框架:thinkphp5.0服务器:nginx 接口文档: http://39.106.207.193:8000/doc 说明: 返回类型均为 JSON数据格式 测试: http://39.106.207.193:8000/play/group/2337?fromkkm3u8 [{"id": 1, &q…

从零打造视频播放网站(1)-数据采集篇

数据采集篇 1.数据库设计:2.环境:3.创建项目:4. settings.py5.爬虫编写:6.增量式爬虫:7.启动爬虫:8.总结: 1.数据库设计: source表(播放源): idnamedescparseshow自增id播放源名称播放源描述解析url展示名 video表: idtitledesctypeareathumbyeardirectorintroductionactors…

黑马就业班(02.JavaWeb+项目实战\16.JavaWeb综合项目实战手把手学习)旅游网站项目(发现案例有问题!已修正)+浏览器页面代码调试(视频45-16.00)

本文对应项目:目录:G:\idea_java_project 下的travel项目本文参考资料《综合案例笔记》笔记 1、准备工作 项目导入 将资料的空travel项目导入IDEA中。(注意导入项目的方法,选择的是pom.xml文件,参考视频1-4.00&#…

缓存、动态页面静态化、网站优化

一、缓存 缓存(Cache)技术在软件开发过程中有着广泛的用途, 它对提升软件性能和改善客户体验有很大帮助. 所谓缓存, 是指将那些经常重复的操作结果暂时存放起来, 在以后的执行过程中, 只要使用前面的暂存结果即可. 缓存技术在日常生活中随处可见, 就拿排队买票来说吧: 买票时需…