2011淘宝首页改版实践

test

Transcript

1. 2011淘宝首页开发实践 2011-01-14 • 拔赤 http://jayli.github.com
2. 拔赤 - 前端开发工程师 2008.4 - 2009.9 Yahoo! 2009.9 - present Taobao
3. http://www.taobao.com
4. 一、从单兵作战到团队开发
5. 约定“词汇表” css/js命名规则源自词汇表
6. 各自独立的demo.html 统一的layout.html 通过SSI调用各模块demo
7. 搭建本地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
8. 基于kissy 1.1.6 各自使用沙箱，避免全局变量冲突
9. 使用打包脚本 build.sh 统一发布js/css
10. 小结： • 约定词汇表 • 基于 SSI 和 combo 的本地开发环境 • 打包脚本 目的：减少冲突
11. • http://wiki.ued.taobao.net/doku.php?id=ued. bj:f2e:tbcdn • http://www.slideshare.net/lijing00333/yui- combo?from=ss_embed ref
12. 二、摆脱栅格的束缚
13. 栅格 “万变”的layout布局?
14. 淘宝现有 950 栅格原型
15. 990 栅格 30(列宽) x 25(列) + 10(槽宽) x 24(槽数) 290
16. 300 1000px “栅格”? C(列宽) x n(列) + 10(槽宽) x (n-1)(槽数) n∈[15,40],C∈Z 无解
17. 设计和实现都不必拘泥于栅格系统
18. 典型的双飞翼布局,无确切语义的多余标签
19. 标识位置的“语义” => 描述内容的“语义” 绝对定位，简单高效
20. • 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
21. 三、从 HTML4 到 HTML5
22. IE 9 Safari 4+ Opera 10+ Chrome 4+ Firefox 3.6+
23. 让ie6/7/8 支持 HTML5 标签 <html> <head> <style> figure { color:orange; } </style> <script>document.createElement("figure");</script> </head> <body> <figure> 淘宝网！ </figure> </body> </html>
25. Let’s Do it!
26. 淘宝网 ie6/7/8 禁用脚本访问量占 0.1%+ 如果ie6/7/8禁用脚本？
27. <!--[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]-->
28. 如果禁用了 ie 脚本
29. IE 禁用脚本访问 /?noscript=1 Firefox 禁用脚本 Opera 禁用脚本
30. • 跟随向导启用脚本 • 进入 html4 标签页面 IE 6/7/8 禁用脚本用户的选择
31. 根据可用性设计的思想，这个时候，你应该 告诉用户，哪些事是不对的，以及怎样纠正， 这种做法被称之为"防御性设计" （Defensive Design）。 —— Joel Spolsky
32. • http://ejohn.org/blog/html5-shiv/ • http://www.alistapart.com/articles/previewofh tml5 • http://www.impressivewebs.com/demo- files/easy-html5-template/ • http://www.facebook.com/home.php?_fb_no script=1 ref
33. 四、fast by default
34. 我们过于依赖 Yslow 和 pageSpeed？
35. 却忽视了影响体验最重要的因素：时间！
36. 目标：将 first rendering(绿) 提前
37. • 内容的延时加载 • Dom节点的延时渲染 • 函数的延时执行 • 将 sprites 载入提前 • 缓存、combo… 传统优化策略依然适用
38. 最易被忽视的真相：JavaScript 执行效率 • 首页去 Tbra • 减少对DomReady的依赖 • 重构臃肿的逻辑
39. 2010c (旧)版首页 CPU 消耗 2011a (新)版首页 CPU 消耗 客户端 CPU 损耗对 FirstRendering 的影响
40. 0.5s 1.0s 1.5s 2.0s 3s ebay amazone dangdang buy360 taobao E-Shopping 网站渲染速度
41. • http://v.youku.com/v_show/id_XMjM2MTkxNTI w.html • http://www.webpagetest.org/result/110110_0 J_879P • http://www.webpagetest.org/result/110110_7 N_87A7 ref
42. 五、其他细节
43. 必要的菜单延时
44. /* except for ie 6/7/8 */ .J_slide li { -moz-border-radius:20px; -webkit-border-radius:20px; border-radius:20px; height:20px; } 圆角的实现
45. /* 圆角 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实现圆角
46. 首页开发文档
47. Just for fun…
48. • 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
49. 鸣谢!
50. 昂首挺胸 迈进HTML5时代！
51. 拔赤 bachi@taobao.com http://jayli.github.com