yupoo新版前端技术初探

标签: yupoo 前端 技术 | 发表时间:2011-06-02 20:06 | 作者:chaoren1641 小白
出处:http://www.cnblogs.com/chaoren1641/

听说yupoo改版了,打开看了一下,我对设计风格什么的不太懂,所以直接看了下源代码,发现他们用了Modernizr和labjs这两个工具,所以很有兴致的分析了一下前端代码,的确做得不错的说。

首页顶部:

<!--[if lt IE 7]> <html class="no-js ie ie6" lang="zh"> <![endif]--> 
<!--[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。

 

继续看:

<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 

IE=edge告诉IE使用最新的引擎渲染网页,chrome=1则可以激活Chrome Frame

 

<meta name="viewport" content="width=device-width, initial-scale=1.0">

 当使用了这个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="shortcut icon" href="http://www.yupoo.com/favicon.ico"> 
<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下好像没有这个东东。

 

 

<!--[if lt IE 7 ]>
<script type="text/javascript" src="http://www.yupoo.com/js/pngfix.js?15126896.js"></script>
<![endif]
--> 

 

当浏览器为IE6时,加载pngfix.js,pngfix目的是在IE6下能够设定PNG图片的透明度。冒似这样的开源JS库有不少,IE6要用到透明时很棒的解决方案。

 

再往下看:

 

var _gaq = _gaq || [];
    _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。

 

下一亮点:

 

if (Browser.ie6) {
     $$(
'.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来解决同样的效果,这样的代码有好几处,充份利用了浏览器自有功能。

 

最后一个亮点:

 

$LAB.setOptions({BasePath: uPai.app.scriptRoot + '/'})
        .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的相关链接:  

【译文】Modernizr——为HTML5和CSS3而生!

LABjs分析

作者: chaoren1641 发表于 2011-06-02 20:06 原文链接

评论: 4 查看评论 发表评论


最新新闻:
· Facebook在英国市场份额下降(2011-08-11 08:44)
· 四年智能手机平台概览:绿机器人的崛起(2011-08-11 08:44)
· 美国大学生的电子产品依赖(2011-08-11 08:26)
· 使用Rx和Silverlight编写异步测试(2011-08-11 08:24)
· QQ最高在线帐户首度下降 半年投资耗95亿现金流(2011-08-11 08:23)

编辑推荐:为什么要关闭数据库连接,可以不关闭吗?

网站导航:博客园首页  我的园子  新闻  闪存  小组  博问  知识库

相关 [yupoo 前端 技术] 推荐:

yupoo新版前端技术初探

- 小白 - 博客园-superman 技术园地
听说yupoo改版了,打开看了一下,我对设计风格什么的不太懂,所以直接看了下源代码,发现他们用了Modernizr和labjs这两个工具,所以很有兴致的分析了一下前端代码,的确做得不错的说. 为各个IE版本设置了class,目的应该是处理各种css hack. IE=edge告诉IE使用最新的引擎渲染网页,chrome=1则可以激活Chrome Frame.

前端技术

- - CSDN博客综合推荐文章
随着互联网产业的爆炸式增长,与之伴生的Web前端技术也在历经洗礼和蜕变. 尤其是近几年随着移动终端的发展,越来越多的人开始投身或转行至新领域,这更为当今的IT产业注入了新的活力. 尽管Web前端技术诞生至今时日并不长,但随着Web技术的逐渐深入,今后将会在以下几方面发力. JavaScript的兄弟们.

转“国内图片网站yupoo的架构”-迷梦江南...

- - 网站架构_搜搜博客搜索
  .NET-C# 高级技术群:16750189,湖南IT交流群:91576466,欢迎您加入.   本文转自:http://www.cnblogs.com/lonelysharer/archive/2011/1 1/10/2243828.html.   之前向大家介绍过全球最大在线图片服务网站Flickr网站架构,Yupoo(又拍网)作为国内最大的图片服务提供商,我们也一起来看看它的架构,同样是提供图片服务,看看他与Flickr的差别在哪里,大家看完本文可以思考一下.

前端开发技术的发展

- - 互联网实践
前端开发技术,从狭义的定义来看,是指围绕HTML、JavaScript、CSS这样一套体系的开发技术,它的运行宿主是浏览器. 专门为手持终端设计的类似WML这样的类HTML语言,类似WMLScript这样的类JavaScript语言. VML和SVG等基于XML的描述图形的语言. 从属于XML体系的XML,XPath,DTD等技术.

关于前端开发那些事儿(三)技术之变现

- 競 - rank&#39;s technical notes
我想现在做开发的同行有很大一部分人应该每天都在想,我们的每天的工作事项都是. 写业务代码,项目评审,代码review,沟通业务是否符合需求. 每天都围着技术含量不高的业务代码. 这是个引子,业务技术不是我今天要罗嗦的主题. 我想表达的是我们其实都想去学习,去深入的了解某项技术,更去应用,让人用,让自己有强烈的成就感.

关于国内前端和JS技术发展的乱想

- blankyao - hax的技术部落格
玉伯在我的一条微博后面写了一些(和主题不是很相关但)非常值得思考的评论. 而这些评论的源头来自于我非常尊敬的不在你们前端界混的JS大师愚公(爱民). 想起愚公的一番言论:我们做了一个不错的东西,有很多好的 IDEA. 最终这些东西却消散了,变成了另外一些更大更好的东西的局部. 我们——我指的是国内的软件开发的现状——什么“好”的东西也做不出来.

2010 Web前端技术趋势及总结

- bluesnail - 博客园-首页原创精华区
经过这段时间国内(百度,淘宝,新浪)及国外(Facebook,Youtube,Yahoo)各大公司的集中自曝,我们可以从中总结出2010 Web前端技术的一些趋势. 总的来说,随着后端技术(存储,并发,分布式)的成熟,各大公司已经把重点从后端架构调整/建设转移至前端(TTI时间,快速发布,带宽利用率).

2011年 5 大 Web 前端技术展望

- King - cnBeta.COM
感谢鸟人网BirdUser的投递. 刚刚过去的2010年里,我们看到了 HTML5技术的崛起,以及 CSS3的日渐成熟,经历了 Rails 3.0 新版本的推出,以及全球范围内采用的@font-face selector 技术等等一些更多的新技术和新鲜事情. 2011年将会有什么web前端技术出现或者成熟.

“豆瓣说” 背后的前端开源技术

- chaoping - 幸福收藏夹
提及网站: http://shuo.douban.com/. 这是一篇毫无技术含量而又不得不说的文章. 一、我不能深度评论这些技术,因为本身并不熟悉,所以可能看起来真的“毫无技术含量”,但要介绍的这些又都是含金量很高的开源技术. 二、豆瓣说太简单了,简单的都不知道从哪个地方谈这个产品,但又答应了 @gaowhen 同学说要写某个产品的时候第一篇应该写豆瓣说;另外一个不得不说的原因是这些开源技术都是值得前端去研究的.

D2前端技术沙龙(北京场)纪录

- blankyao - Taobao UED Team
淘宝北京前端团队在此分享一下整场的精彩内容. 本次北京会场由淘宝技术嘉年华与淘宝北京新业务前端团队共同组织协办,现场100多人,整个会场围绕着浓厚的技术氛围,技术牛人带动刚步入前端行业的新人共同畅言分享. 同时本次的技术交流会是淘宝北京前端团队第一次组织,有很多不尽人意的地方,譬如稍过形式化,重点没有放在交流讨论上等.