代码优化
本文章来自：蓝色理想 http://bbs.blueidea.com/thread-2979007-1-1.html
由于JS部分还来不及消化，所以把文章转到自己博客来，留言以后看~~
前些日子，对hao.360.cn首页进行了优化，首页从原来的120k,变到了56k,速度缩短了200ms左右
一下是我的一些修改意见，分享给大家0.
图没有用sprite,我看了一下图都很小，应该用一张代替所有的，以减少http的请求
1. js优化
1.
<script type="text/javascript" src="css/top_20100301.js?v1267607618"></script>
<script type="text/javascript" src="css/nav_20100304.js?v1267685104"></script>
http://clkstat.qihoo.com/qhstat.js
http://hao.360.cn/css/bottom_20100301.js?1267608765
http://hao.360.cn/css/visit.js
应该合并，减少http请求的次数，并且动态加载合并后的js，js应该用gzip压缩
2.
<body onmousedown="setDisplay('suggests', 0);">
应该写在外部，以减少html的大小
外部js会被缓存
3.
<script type="text/JavaScript">
<!--
hr0 ='<a href="http://tui.qihoo.com/22629655/article_604658.html?sk=0e26" target="_blank">泡论坛的好处，网吧绝不能封！</a>';
hr1 ='<a href="http://tui.qihoo.com/22629655/article_604607.html?sk=463c" target="_blank">千万记住别这样跳舞，会没命的</a>';
hr2 ='<a href="http://tui.qihoo.com/22629655/article_604545.html?sk=e562" target="_blank">去国外上错厕所，太有才了！</a>';
hr3 ='<a href="http://tui.qihoo.com/22629655/article_604521.html?sk=8cae" target="_blank">生个这样的孩子能把爹妈气死</a>';
hr4 ='<a href="http://tui.qihoo.com/22629655/article_604506.html?sk=dd15" target="_blank">说我不是男人，我掏出来给你看</a>';
function getunum(){
var now=new Date();
var number = now.getSeconds()%5;
document.write(eval('hr'+number));
}
getunum();
//-->
</script>
我的改进代码
-function(){
var d = {
0:['604658','0e26','泡论坛的好处，网吧绝不能封！'],
1:['604658','0e26','泡论坛的好处，网吧绝不能封！'],
2:['604658','0e26','泡论坛的好处，网吧绝不能封！'],
3:['604658','0e26','泡论坛的好处，网吧绝不能封！'],
4:['604658','0e26','泡论坛的好处，网吧绝不能封！']
},c = d[+new Date %5];
document.write('<a href="http://tui.qihoo.com/22629655/article_'+c[0]+'.html?sk='+c[1]+'target="_blank">'+c[2]+'</a>')
}()
4.
<script type="text/javascript">
init();
highlightSearchTab();
</script>
domcontentload onload
这些也是，放在外部js里，写在页面里，不好维护也不能被缓存
5.
google的监控的加载方式，变成了动态加载的方式
6.？
<iframe id="weather_com_cn" src="" width="100%" height="55" marginwidth="0" marginheight="0" hspace="0" vspace="0" frameborder="0" scrolling="no"></iframe>
所有的iframe采用动态加载，onload阻止了
7.
<ul id="tag"><span id="m5" onClick="Menu(5);" style="display:none;">最近未关闭页面</span><li class="at" id="m1" onClick="Menu(1);">名站导航</li><li id="m4" onClick="Menu(4);">我的导航</li><li id="m7" onClick="Menu(7);">常用软件</li><li id="m2" onClick="Menu(2);">股票彩票</li><li id="m6" onClick="Menu(6);">网上购物</li><li id="m3" onClick="Menu(3);">热门游戏</li></ul>
所有的tab都是这种方式，不好，一是每个都要写onclick结构臃肿，其次容易溢出
机构
<ul id="tag">
<li id="m5" onClick="Menu(5);" style="display:none;">最近未关闭页面</li>
<li class="at" id="m1">名站导航</li>
<li id="m4">我的导航</li>
<li id="m7" >常用软件</li>
<li id="m2" >股票彩票</li>
<li id="m6" >网上购物</li>
<li id="m3" >热门游戏</li>
</ul>
我的方式,去掉所有的onclick写在页面上的，而且结构不符合html语义ul下只能放li,第一个span应改成li
var ul = document.getElementById('tag');
ul.onclick = function(e){
e = e||event;
var t = e.target||e.srcElement;
if(t.tagName == 'LI'>{
Menu(t.id.match(/\d/)[0])
}
}
写在外部js里
8.
tab中每个tab的内容都是通过script取得数据，但我这看到的是会有一个时间的白板，就是数据加载慢导致
可以预加载，将所有的数据放在全局变量中（每次加载的数据），在页面已加载时就做
9.
页面中写的js，可以放在外部的都放在外部，
10.
js中的代码也可以做很多的优化
1.
function()
{
}
这种写法是忌讳的
因为会发生这种情况
function test()
{
return
{
}
}
alert(test());//undefined
这个不是我们期望的
应该是object object
所以代码应该这样写
function test(){
return{
}
}
alert(test())//[object Object]
2.
function logClick(type,host,args,dest)
{/*{{{*/
rnd = Math.random( );
srnd = rnd.toString( ).substr(2,4);
new Image().src = "http://"+host+"/stat.gif?"+args+"&_u="+dest+"&_r=" + srnd +"&_t="+type;
}/*}}}*/
function writePvStatCode(host,statArgs)
{/*{{{*/
rnd = Math.random( );
srnd = rnd.toString( ).substr(2,4);
new Image().src = "http://"+host+"/stat.gif?"+statArgs+"&r=" + srnd;
}/*}}}*/
合并成一个方法
function(host,args,type,dest){
(new Image).src = "http://"+host+"/stat.gif?"+args+"&r="+(Math.random()+'').slice(2,4)+(type?"&_t="+type:'')+(dest?"&_u="+dest:'');
}
2. css文件的优化
1.css应该压缩
2.改进
0px 0
#FFFFFF #fff
0 0 6px 0 0 0 6px
#aaccee #ace
#339900 #390
font-weight bold 700
normal 400
45 .getDiy{ padding-top:10px;} padding:10px 0 0;
117 padding-top: 5px;padding-bottom: 5px; padding:5px 0;
.cGreen,a.cGreen{ color:#339900;}
a.cGreen:hover {color:#339900; text-decoration:underline;}
页面上没有用到
3. html的优化
html应该压缩
0.
页面中dom数大概有1200多个，实在太多了，建议将li套a标签的li去了
这样减少了dom的数量，也减少了html的大小
1.
<p class="blank5"></p>
为了每个每个模块跟下个模块有个空挡
这个可以去掉，可以用css来实现
css中的blank5属性也可以去掉
blank6可以去掉
将这些写在<div class="border" id="rightBo">这个div中
#rightBo div {margin:0 0 5px;}
#rightBo {margin:0 0 2px;}
类似的
<p class="blank10"></p>
6.
<iframe width="263" height="104" marginwidth="10" scrolling="no" src="" id="setPageIfrm" frameborder="0" name="setMenu" ></iframe>
name="setMenu" 多余的
8.
<td class="week" id="chineseCalendar">
有id就不要用class,多余 而且css中.date td.week{margin:0;padding:0;} 选择器过长，
#chineseCalendar代贴所有而且级别最高，减少css代码长度
类似的
<span class="setBox" id="semodeBox" style="display:none">
<em class="setBtn" onclick="setPage();" id="setBt">
<div id="weatherborder" class="diy">
<strong class="bStyle" id="web_page">
<div id="selectId" class="select">
<div class="buyBox" id="buyBox">
还有非常多
这些class都可以去了，相应的css也可以减少
9.
<iframe id="game_cards_chongzhi" frameborder="0" width="100%" class="sH" allowtransparency="true" src=""></iframe>
既然有了class那么width可以写在class中，外部css可以缓存，并且html代码变少
10.
<ul>
<li><a href="ruanjianxiazai.html">软件</a></li>
<li><a href="diannaowangluo.html">电脑</a></li>
<li><a href="bokewangzhai.html">博客</a></li>
<li><a href="heikeanquan.html">黑客</a></li>
<li><a href="btxiazai.html">BT</a></li>
<li><a href="liaotiangongju.html">聊天</a></li>
<li><a href="yingjianshebei.html">硬件</a></li>
<li><a href="sousuoyinqing.html">搜索</a></li>
<li><a href="chengxubiancheng.html">编程</a></li>
<li><a href="wangzhanjianshe.html">建站</a></li>
<li><a href="shadufangdu.html">杀毒</a></li>
<li><a href="shejishijue.html">设计</a></li>
<li><a href="flashxinshang.html">动画</a></li>
<li><a href="mianfeiziyuan.html">资源</a></li>
<p class="fix"></p>
</ul>
大量的代码中都用了像<p class="fix"></p>
p是为了清掉float后不占位的问题，这个可以去掉
只要在ul中添加float:left
减少html的dom数，减少css的代码
