精简公司网站的首页

这几天老板一直在抱怨公司网站的首页一打开IE就会暴死,他用的是IE6,我在自己点开虽然不是很快但不会暴死,老板还把这个列入了工作安排,是得解决,不然会影响效率,也会影响客户体验。和同事一起去问了个牛人,牛人看了首页的源代码,复制进txt文档,一看代码(不包括js代码就有好几十k),我们的服务器配置并不低,正常情况下能挡几十百万的pv,所以排除硬件的问题,运行环境上看问题也不大,检查mysql的运行情况,我们对首页不少内容都做了缓存,用了smarty模版,所以这个问题也应该不大。再看看打开首页后的载入情况,刚开始打开时一般都会顿一下,也就是说载入的东西太多了,比如js就载入了好几个模版,而过多的js载入将会让客户端承受过大的压力。同时,首页里的代码冗余率比较高,重复性的代码比较多。
好了,说了这么多,先让我们看个例子 http://www.songtaste.com/music/ 。目前这个网站每日的pv已经超100万了,因为是音乐网站,数据的流量肯定很多,但这个网站很好的解决这个问题了。整个 http://www.songtaste.com/music/ 的源代码copy到文本文档上才15k,里面的代码冗余很少,死代码也很少,比如每个音乐的标题,上传者,上传者编号都用js来引用了,这样的话就减少了服务器的运算负载,把一部分运行的功能给了客户端,这样即使登录听歌的人很多,也能保证了服务器不当机。在 songtaste.com/music/ 的首页上运用到了一个名为 MSL的 js函数:
function MSL(SongName, SongID, UName, UID, UIcon, RecWidth, RateUID,
RateDT,RateUName){
ImgRoot = “http://image.songtaste.com”;
strLine = “<tr><td><a href=’javascript:;’ onClick=
window.open(‘/play.php?song_id=”+SongID+”‘,’popwin_kt’,’
menubar=no,location=no,resizable=no,
scrollbars=no,status=no,width=50,height=50′); >
<img src='”+ImgRoot+”/images/muleft.gif’ border=0></a>”;
strLine += “</td><td><input type=checkbox name=’chkSongID’ value=”+SongID+”>
<a href=’/song/”+SongID+”/’>”+SongName+”</a></td>”;
strLine += “<td>&nbsp;</td> <td><div style=’width:”+RecWidth+”px;’>
<a href=’/user/”+UID+”/’><img src='”
+ImgRoot+”/images/usericon/s/”+UIcon+”‘ width=15 align=absmiddle></a> <
a href=’/user/”+UID+”/’class=’white date11′>”+UName+”</a></div> </td>”;
strLine += “<td style=’background:white;’ class=’date11′> “;
if(RateUID != “” && RateUID != 0)
strLine +=” “+ RateDT +” <a href=’/user/”+RateUID+”/’>”+RateUName+”</a> <img src='”
+ImgRoot+”/images/up.gif’ align=absmiddle>”;
strLine += “</td></tr>”;
document.write(strLine);
这个js函数的参数分别是:音乐名,ID,歌手名称,ID,头像,头像大小,上传时间,当要显示内容时:
<script>
MSL(“H ī ρ а REMIX “, “1711356”, “¨.洛儷塔_ “, “133036”, “36/133036.jpg”,
“95”, “0”, “”, ” “);
</script>
看看这个页面多简洁,而我们采用了最原始的css代码形式,从效率来看肯定不如刚才讲过的那个例子。还有不要加载过多无用的js.

关于 beeboo

瘦仔,很傻很坚强
此条目发表在 coding 分类目录。将固定链接加入收藏夹。

发表评论

电子邮件地址不会被公开。 必填项已用*标注

您可以使用这些HTML标签和属性: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>