nomospace / frontend

也说说 yupoo 的页面

2011-06-06 posted in [frontend]

不久前又拍网(Yupoo.com)进行了一次改版,UI风格类似Flickr。Twitter上有不少yupoo用户,对这次改版褒贬不一。目前已经有人写过关于新版yupoo前端技术的文章了,不过很多细节没有深入。在此我也随便说说yupoo的页面吧。

一、关于doctype与条件注释
也说说yupoo的页面 - nomospace(昌里大金猪) - Nomospace
又拍使用了HTML5头和“safe CSS hacks”,利用ie特有的条件注释为先天不足的ie编写特定样式。关于条件注释详细可参考ppkConditional comments。个人认为第二行的条件注释完全可以去掉以进一步减少文档体积。

二、关于meta标签
也说说yupoo的页面 - nomospace(昌里大金猪) - Nomospace
根据ppk的Google Chrome Frame — technical notes,meta这段代码实际上相当于:
 <meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta http-equiv="X-UA-Compatible" content="chrome=1">
告诉浏览器若有Chrome Frame则使用它,否则使用IE最新引擎来对页面进行渲染。

也说说yupoo的页面 - nomospace(昌里大金猪) - Nomospace
 viewport针对的是移动端设备,属性值详情见iOS Safari 浏览器 Viewport,在此不再赘述。

也说说yupoo的页面 - nomospace(昌里大金猪) - Nomospace
  apple-touch-icon顾名思义是给ios平台下的浏览器使用的,具体属性值可参考Safari Developer Library或者iPhone Icon | Apple Touch Icon

也说说yupoo的页面 - nomospace(昌里大金猪) - Nomospace
通过rel="search",把搜索功能放到浏览器的快捷搜索工具上,详见此处
也说说yupoo的页面 - nomospace(昌里大金猪) - Nomospace
 

三、关于html标签
yupoo虽然已经使用HTML5头了,但却尚未使用HTML5标签。

四、关于script
也说说yupoo的页面 - nomospace(昌里大金猪) - Nomospace
在firebug中发现html标签里有一长串class,这是Modernizr的功劳。Modernizr是为HTML5而生的,用来检测浏览器对HTML5和CSS3特性支持的JS库。如果浏览器支持某个属性,就在html标签上添加一个相应的class,不支持则添加一个no-前缀的class。为进一步了解Modernizr,推荐阅读神飞Modernizr与HTML5一文或者查看官方Doc

也说说yupoo的页面 - nomospace(昌里大金猪) - Nomospace
同样使用了一个条件注释,优雅地解决ie6以及更老版本ie下png图片透明度的问题,PNG fix有非常详细的解决方案。

再来看看head中的一段脚本吧:
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();}} 
不难看出这是一段防XSS攻击的脚本,也是twitter的处理方式

在页面接近底部的位置散落了几段看似涉及到页面逻辑的内联脚本。连续检查了几个页面,发现这段代码会重复出现:
  1. uPai.addEvent('load'function(module){  
  2.     uPai.log(module + ' loaded');  
  3.     switch(module) {  
  4.     case 'base':  
  5.         if (Browser.ie6) {  
  6.             $$('.button').addEvents({  
  7.                 mouseover: function(){this.addClass('button-hover')},  
  8.                 mouseout: function(){this.removeClass('button-hover')},  
  9.                 mousedown: function(){this.addClass('button-active')},  
  10.                 mouseup: function(){this.removeClass('button-active')}  
  11.             });  
  12.         }  
  13.         break;  
  14.     case 'dropmenu':  
  15.         this.dropmenu.init([  
  16.             {name: 'home', popup: false},  
  17.             {name: 'mine'},  
  18.             //{name: 'activity'},  
  19.             {name: 'friends'},  
  20.             {name: 'explore'},  
  21.             {name: 'account'},  
  22.             {name: 'upload', popup: false}], 'home');  
  23.         break
不知处于什么考虑yupoo并没有对这段重复代码进行优化。为何不将其重构放置在global.js里,如此一来也能减少页面体积,同时被浏览器更好地缓存住。

底部的这段代码着实让人眼前一亮:
  1. uPai.addEvent('domready'function(){  
  2.     $LAB.setOptions({BasePath: uPai.app.scriptRoot + '/'})  
  3.         .script('global.js?15128261.js').wait()  
  4.         .script('dashboard.js?15126745.js').wait()  
  5.         .script('postbox.js?15127849.js').wait()  
  6.         .script('timeline.js?15128915.js').wait()  
  7.         .script('share.js?15127136.js').wait()  
  8.         .script('textboxlist.js?15126834.js').wait(function(){ uPai.fireEvent('ready', [uPai]); });  
  9. }); 

yupoo使用LABjs来动态load scirpt,好处是不仅能保证JavaScript文件的平行下载,同时又能管理执行顺序,开发者无需在页面上维护script tag顺序。把原来在head中加载改成延迟加载,提升了页面渲染速度。个人认为如此一来脚本粒度虽然细了,请求数却增加了(相对于将这些模块合并成一个脚本而言),看来一切皆权衡。

ps:yupoo的个人动态页面细节处理地非常不错,仍有不少有价值的东西等待挖掘。

参考资料
yupoo新版前端技术初探
In defense of CSS hacks — introducing “safe CSS hacks”
CSS Device Adaptation

弱小版 ImageLazyLoad

2011-04-01 posted in [frontend]

IE6 下的多类选择符

2011-03-31 posted in [frontend]

高度自适应与 Opera's 32767 Bug

2011-03-29 posted in [frontend]