yupoo新版前端技术初探
首页顶部：
<!-- [if IE 7]> <html class="no-js ie ie7" lang="zh"> <![endif] -->
<!-- [if IE 8]> <html class="no-js ie ie8" lang="zh"> <![endif] -->
<!-- [if IE 9]> <html class="no-js ie ie9" lang="zh"> <![endif] -->
为各个IE版本设置了class，目的应该是处理各种css hack。
继续看：
IE=edge告诉IE使用最新的引擎渲染网页，chrome=1则可以激活Chrome Frame
当使用了这个meta后，网页宽度默认为设备屏幕的宽度，这个标记适用于手机，平板电脑等移动设备。
看下面的JS代码：
<script>function bust(){document.write='';window.top.location=window.self.location;setTimeout(function(){document.body.innerHTML='';},0);window.self.onload=function(evt){document.body.innerHTML='';};}if(window.top !== window.self){try{if (window.top.location.host){}else{bust();}}catch(ex){bust();}}</script>
这里目的是为了防止网站被iframe的安全处理，冒似是参考的twitter,可以看我前一篇文章。
看下一个亮点：
< link rel ="apple-touch-icon" href ="http://www.yupoo.com/apple-touch-icon-iphone.png" />
< link rel ="apple-touch-icon" sizes ="72x72" href ="http://www.yupoo.com/apple-touch-icon-ipad.png" />
< link rel ="apple-touch-icon" sizes ="114x114" href ="http://www.yupoo.com/apple-touch-icon-iphone4.png" />
< link rel ="search" type ="application/opensearchdescription+xml" href ="http://www.yupoo.com/opensearch.xml" title ="又拍照片" >
第一个不多说了，每个网站都应该有。
app-touch-icon作用是ipad和iphone创建快捷方式时的图标。
rel="search"则是为了应对firefox右上角出现它的搜索选项，chrome下好像没有这个东东。
<script type="text/javascript" src="http://www.yupoo.com/js/pngfix.js?15126896.js"></script>
<![endif] -->
当浏览器为IE6时，加载pngfix.js，pngfix目的是在IE6下能够设定PNG图片的透明度。冒似这样的开源JS库有不少，IE6要用到透明时很棒的解决方案。
再往下看：
_gaq.push([ ' _setAccount ' , ' UA-8399606-3 ' ]);
_gaq.push([ ' _addOrganic ' , ' soso ' , ' w ' ]);
_gaq.push([ ' _addOrganic ' , ' yodao ' , ' q ' ]);
_gaq.push([ ' _addOrganic ' , ' vnet ' , ' kw ' ]);
_gaq.push([ ' _addOrganic ' , ' sogou ' , ' query ' ]);
_gaq.push([ ' _trackPageview ' , ' /index/index ' ]);
_gaq.push([ ' _setDomainName ' , ' .yupoo.com ' ]);
( function (d,t){ var g = d.createElement(t),s = d.getElementsByTagName(t)[ 0 ];g.async = 1 ;
g.src = ( " https: " == location.protocol ? " //ssl " : " //www " ) + " .google-analytics.com/ga.js " ;
s.parentNode.insertBefore(g,s)}(document, " script " ));
这里是谷歌统计的ga.js，异步加载的，没什么好说的。
再最下面只有一个很小的JS。整个首页的优化我认为做到了极致，也充分利用了各种资源，首页只用到了首页要用的JS，并没加载其它。
看内页（登录后的）：
<script type="text/javascript" src="http://www.yupoo.com/js/bootstrap.js?15126871.js"></script>
Modernizr（官方被墙了） + labjs放到了一起，大小只有9k。
下一亮点：
$$( ' .button ' ).addEvents({
mouseover: function (){ this .addClass( ' button-hover ' )},
mouseout: function (){ this .removeClass( ' button-hover ' )},
mousedown: function (){ this .addClass( ' button-active ' )},
mouseup: function (){ this .removeClass( ' button-active ' )}
});
}
如果是非ie6则用了:hover伪类来做鼠标移上去的样式处理，ie6则用js来解决同样的效果，这样的代码有好几处，充份利用了浏览器自有功能。
最后一个亮点：
.script( ' global.js?15127281.js ' ).wait()
.script( ' dashboard.js?15126745.js ' ).wait()
.script( ' postbox.js?15127849.js ' ).wait()
.script( ' timeline.js?15127232.js ' ).wait()
.script( ' share.js?15127136.js ' ).wait()
.script( ' textboxlist.js?15126834.js ' ).wait( function (){ uPai.fireEvent( ' ready ' , [uPai]); });
利用3K大小左右的labjs加载了页面所用到的全部JS，异步并行加载且保证了加载和执行顺序，充分节约了浏览器资源。总之yupoo前端的处方面在我看过的这么些网站中算很棒的了，不像大多数网站，一系列的<script src="xxx.js"，极其影响效率。
yupoo的页面结构不算复杂，代码不量不大所以很容易看清楚结构。只看了下首页和登录后的首页，这样的代码结构其实正是我所想的。Modernizr + labjs都是目前比较新且炒得比较火的JS库，有兴趣的可以google一下，yupoo在前端性能方面可谓算是做得很不错的了,赞一个！
当然有亮点肯定不止这么一点，不足也肯定有，待有时间再细细品尝吧！
附上介绍modernizr和labjs的相关链接：