也说说yupoo的页面

2019独角兽企业重金招聘Python工程师标准>>>

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

一、关于doctype与条件注释

又拍使用了HTML5头和“safe CSS hacks”，利用ie特有的条件注释为先天不足的ie编写特定样式。关于条件注释详细可参考ppk的Conditional comments。个人认为第二行的条件注释完全可以去掉以进一步减少文档体积。

二、关于meta标签

根据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最新引擎来对页面进行渲染。

 viewport针对的是移动端设备，属性值详情见iOS Safari 浏览器 Viewport，在此不再赘述。

  apple-touch-icon顾名思义是给ios平台下的浏览器使用的，具体属性值可参考Safari Developer Library或者iPhone Icon | Apple Touch Icon。

通过rel="search"，把搜索功能放到浏览器的快捷搜索工具上，详见此处。

 

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

四、关于script

在firebug中发现html标签里有一长串class，这是Modernizr的功劳。Modernizr是为HTML5而生的，用来检测浏览器对HTML5和CSS3特性支持的JS库。如果浏览器支持某个属性，就在html标签上添加一个相应的class，不支持则添加一个no-前缀的class。为进一步了解Modernizr，推荐阅读神飞的Modernizr与HTML5一文或者查看官方Doc。


同样使用了一个条件注释，优雅地解决ie6以及更老版本ie下png图片透明度的问题，PNG fix有非常详细的解决方案。

再来看看head中的一段脚本吧：
function bust(){document.write='';window.top.location=window.self.location;setTimeout(function(){document.body.innerHTML='';},0);window.self.οnlοad=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

阅读(1055)| 评论(0)

转载于:https://my.oschina.net/yonghan/blog/468674