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的相关链接：
