2011淘宝首页开发实践
51
2011淘宝首页开发实践 2011-01-14 • 拔赤 http://jayli.github.com
description
2011新年版淘宝首页开发实践总结
Transcript of 2011淘宝首页开发实践
拔赤 - 前端开发工程师2008.4 - 2009.9 Yahoo!
2009.9 - present Taobao
一、从单兵作战到团队开发
约定“词汇表”
css/js命名规则源自词汇表
各自独立的demo.html
统一的layout.html通过SSI调用各模块demo
搭建本地a.tbcdn.cn环境，模拟cdn的combo
http://wiki.ued.taobao.net/doku.php?id=ued.bj:f2e:tbcdn
http://www.slideshare.net/lijing00333/yui-combo?from=ss_embed
基于kissy 1.1.6
各自使用沙箱，避免全局变量冲突
使用打包脚本 build.sh 统一发布js/css
小结：
• 约定词汇表
• 基于 SSI 和 combo 的本地开发环境
• 打包脚本
目的：减少冲突
• http://wiki.ued.taobao.net/doku.php?id=ued.bj:f2e:tbcdn
• http://www.slideshare.net/lijing00333/yui-combo?from=ss_embed
ref
二、摆脱栅格的束缚
栅格
“万变”的layout布局?
淘宝现有 950 栅格原型
990 栅格
30(列宽) x 25(列) + 10(槽宽) x 24(槽数)
290
300
1000px “栅格”?
C(列宽) x n(列) + 10(槽宽) x (n-1)(槽数)n∈[15,40],C∈Z 无解
设计和实现都不必拘泥于栅格系统
典型的双飞翼布局,无确切语义的多余标签
标识位置的“语义” => 描述内容的“语义”
绝对定位，简单高效
• http://grid.mindplay.dk/
• http://ued.taobao.com/blog/2008/10/22/grid_system_research_1/
• http://ued.taobao.com/blog/2008/10/22/grid_system_research_2/
• http://ued.taobao.com/blog/2008/10/22/grid_system_research_3/
• http://ued.taobao.com/blog/2008/10/22/grid_system_research_4
ref
三、从 HTML4 到 HTML5
IE 9
Safari 4+
Opera 10+
Chrome 4+
Firefox 3.6+
让ie6/7/8 支持 HTML5 标签
<html><head><style>figure { color:orange; }
</style><script>document.createElement("figure");</script></head><body><figure>
淘宝网！
</figure></body></html>
Let’s Do it!
淘宝网 ie6/7/8 禁用脚本访问量占 0.1%+
如果ie6/7/8禁用脚本？
<!--[if lte IE 8]> <noscript><style>.html5-wrappers {display:none !important;}</style><div class="ie-noscript-warning">
您的浏览器禁用了脚本，请<a href="">查看这里</a>来启用脚本!或者<a href="/?noscript=1">继续访问</a>.
</div></noscript> <![endif]-->
如果禁用了 ie 脚本
IE 禁用脚本访问/?noscript=1
Firefox 禁用脚本
Opera 禁用脚本
• 跟随向导启用脚本
• 进入 html4 标签页面
IE 6/7/8 禁用脚本用户的选择
根据可用性设计的思想，这个时候，你应该告诉用户，哪些事是不对的，以及怎样纠正，这种做法被称之为"防御性设计" （Defensive Design）。
—— Joel Spolsky
• http://ejohn.org/blog/html5-shiv/
• http://www.alistapart.com/articles/previewofhtml5
• http://www.impressivewebs.com/demo-files/easy-html5-template/
• http://www.facebook.com/home.php?_fb_noscript=1
ref
四、fast by default
我们过于依赖 Yslow 和 pageSpeed？
却忽视了影响体验最重要的因素：时间！
目标：将 first rendering(绿) 提前
• 内容的延时加载
• Dom节点的延时渲染
• 函数的延时执行
• 将 sprites 载入提前
• 缓存、combo…
传统优化策略依然适用
最易被忽视的真相：JavaScript 执行效率
• 首页去 Tbra
• 减少对DomReady的依赖
• 重构臃肿的逻辑
2010c (旧)版首页 CPU 消耗
2011a (新)版首页 CPU 消耗
客户端 CPU 损耗对 FirstRendering 的影响
0.5s 1.0s 1.5s 2.0s 3s
ebay
amazone
dangdang
buy360
taobao
E-Shopping 网站渲染速度
• http://v.youku.com/v_show/id_XMjM2MTkxNTIw.html
• http://www.webpagetest.org/result/110110_0J_879P
• http://www.webpagetest.org/result/110110_7N_87A7
ref
五、其他细节
必要的菜单延时
/* except for ie 6/7/8 */.J_slide li {
-moz-border-radius:20px;-webkit-border-radius:20px;border-radius:20px;height:20px;
}
圆角的实现
/* 圆角 for ie6,7,8 use vml */var css = document.createStyleSheet();css.addRule("v\\:roundrect", "behavior:
url(#default#VML);display:inline-block;");var rect = document.createElement('v:roundrect');setAttribute(rect, {
arcsize:"20px",stroked:false
});rect.css({
width:"20px",height:"20px", antialias:true});
IE 6/7/8使用js实现圆角
首页开发文档
Just for fun…
• http://msdn.microsoft.com/en-us/library/bb250524%28v=vs.85%29.aspx
• http://wiki.ued.taobao.net/doku.php?id=team:udc:fp_2011a_dev:start
ref
鸣谢!
昂首挺胸 迈进HTML5时代！
![淘宝数据可视化[2010 SD2.0]](https://static.fdocument.pub/doc/165x107/5563572ad8b42a2f508b45a5/2010-sd20.jpg)
