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等技术.

前端技术学习路线图

- - 菜鸟教程
以下 Web 开发人员学习路线图是来自 Github developer-roadmap 项目,目前已经有繁体版翻译 developer-roadmap-chinese. 主要有三个方向,分别为前端开发、后端开发和运维. 可以看到,作为 Web 开发者,不管从事什么职位,下面这些技能点是必须掌握的:.

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

- 競 - 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 同学说要写某个产品的时候第一篇应该写豆瓣说;另外一个不得不说的原因是这些开源技术都是值得前端去研究的.