《淘宝前端应用与发展》 @ QCon2010 北京

1. 淘宝网前端应用与发展 小马

2. 淘宝前端发展史 近四年来的问题与挑战 实践经验与心得 前端发展展望 内容提要 内容提要

3. 关于我 { Name: “赵泽欣”, Nickname: “小马”, Job: “前端工程师” Company: “淘宝网” Twitter: “@zhaozexin” }

4. Taobao.com @ 2003

5. Taobao.com @ 2004

6. Taobao.com @ 2005

7. Taobao.com @ 2006

8. 淘宝网前端 @ 2006

9. Taobao.com @ 2007

10. 淘宝网前端 @ 2007

12. UED开发流程

13. 问题:团队合作成本高，编码规范缺失 对策：制定与交互/视觉的合作规范 Axure 淘斯基 标注规范

14. 标注示例

15. 提高与后端开发的合作效率 对策：制定与后端开发的合作规范 共用的基础脚本库 代码约定

16. 自行开发 Prototype jQuery YUI dojo Ext 选择一个脚本类库

17. Prototype like Prototype likes

18. jQuery jQuery likes

19. dojo dojo likes

20. YUI YUI likes

21. Ext Ext likes

22. 适用于网站 适合淘宝的协作开发环境 功能齐全 稳定 可靠 Why YUI？

23. TBra：基于YUI的电子商务网站常用组件库

24. 对策：制定与后端开发的合作规范 共用的基本脚本库 代码约定

25. 合作中最常遇到的问题： HTML 嵌套错误或标签未关闭 Hook 标签被误删或更改 脚本开发分工不明，全局变量名冲突 制定与后端开发的合作规范

26. 问题: HTML嵌套错误或标签未关闭 解决方法： 约定特定格式的注释 培训开发人员使用Firebug & HTML Validator 制定与后端开发的合作规范

27. 制定与后端开发的合作规范 问题: Hook 标签被误删或更改 解决方法： Hook命名约定

28. 代码约定示例 <span class=“ww:token”> <a class=“ww-online”>…</a> </span>

29. 代码约定示例 <div id=“fp:slide” class=“tb-slide”> …… </div> <div id=“J_Slide” class=“tb-slide”> …… </div>

30. 制定与后端开发的合作规范 问题: 脚本开发分工不明，全局变量冲突 解决方法： 展现层由前端工程师开发 业务逻辑涉及脚本由后端工程师开发

31. 小结 (2007) 小结 (2007) 制定UED规范 制定前端代码规范 制定前端与后端开发的协作规范

32. Taobao.com @ 2008

33. 淘宝网前端 @ 2008

34. 淘宝的业务拆分，网站日益庞大。如何保持页面的一致性？ 促销活动频繁，促销页面和垂直频道占用大量前端工作量 用户抱怨淘宝页面慢 问题与挑战 @ 2008

35. 统一页头页尾 栅格化 TMS 系统 对策：工业化

36. TMS

37. 对策：根据ySlow规则优化前端性能 CSS Sprite 减少HTTP请求 首页 JavaScript/CSS 内嵌 CSS/JavaScript文件合并（将YUI+TBra打包成tbra-aio.js) 引入CDN Assets域名 assets.taobaocdn.com JavaScript/CSS压缩 YUICompressor

38. 小结 （2008） 小结 (2008) 完善规范，将规范转化为工业化工具(TMS) 使用 ySlow / YUICompressor等工具优化前端性能

39. Taobao.com @ 2009

40. 淘宝网前端 @ 2009

41. 网站页面性能形势严峻 YUI+TBra日益无法满足开发需求 问题与挑战 @ 2009

42. 问题：网站页面性能形势严峻 一些研究数据 Amazon 慢0.1 s -> 1% 用户放弃交易 Google 慢 0.4s -> 0.6% 放弃搜索 Yahoo! 慢 0.4s -> 减少 5%-9% 的流量 Bing 慢 2s ->收入下降 4.3 %

43. 商品详情页面优化项目 首页性能优化项目 搜索结果页性能优化项目 其他 图片延迟加载 cookie 优化 assets.taobaocdn.com -> a.tbcdn.cn 图片强制压缩 对策：性能优化别动组

44. 性能收益公式 页面节省的带宽费用/年 = 优化减少的下载量(KB) x 页面PV x 20%(无缓存用户比率) x (8/1000/12/3600*750000/100)

45. 2010 前端性能年 Fiddler - Microsoft Pagetest - AOL ySlow – YAHOO!

46. 网站页面性能形势严峻 YUI+TBra日益无法满足开发需求 YUI的组件体验不合国情 YUI组件较为笨重 TBra 扩展性不足 问题与挑战 @ 2009

47. 建立开源 Kissy 框架 重写常用组件 AutoComplete ImageLazyLoad RichEditor …… 困难与挑战 @ 2009 对策：尝试研发新脚本库

48. 小结 (2009) 小结 (2009) 联合开发/运维/测试工程师一起立项全面优化网站性能 创建Kissy开源项目，逐步迁移YUI/TBra组件到Kissy组件，改善体验，优化性能

49. Taobao.com @ 2010

50. 淘宝网前端 @ 2010

51. 用户个性化需求强烈 YUI + TBra的前端架构不再适合淘宝 性能要求苛刻 项目前端开发工作量占比不断提高，后台架构和开发过程需要改革 问题与挑战 @ 2010 问题与挑战 @ 2010

52. Kissy Core 重写，不再依赖YUI Kissy UI 开源组件库 TBra基于 Kissy，成为淘宝专用组件库 建立各产品线工具类库 对策：设计新的淘宝前端架构

53. 淘宝2010前端架构 Shop 3C … Kissy … TBack YUI2 TBra Mall 基础类库 { } 公司类库 { } 应用类库 { }

54. HTML5 & CSS3 HTML压缩 DOM预加载 本地存储 data：url CSS圆角 淘宝性能指数 性能自动化测试 Firefox + ySlow + showslow + xvfb CDN改造 基于Nginx的 CDN combo 实现 MVC架构改造 挑战：性能要求苛刻 对策：速度委员会

56. 目标 （2010） 目标(2010) 探索和研发最适合自己的前端框架 精雕细琢地前端编码 Fast by Default

57. 淘宝网前端实践之路

58. 淘宝网前端发展展望

59. 前端岗位发展展望

61. 前端团队人才与成长 好的设计驱动技术创新(Design) 好的技术为设计提供无限的想象(Develop)

62. 淘宝UED的设计流程: http://ued.taobao.com/blog/2007/08/13/our_design_flow/ 网页栅格系统研究: http://lifesinger.org/blog/2008/10/grid-system-1/ Kissy on GoogleCode: http://code.google.com/p/kissy/ ySlowrules: http://developer.yahoo.com/performance/rules.html WebPageTest: http://www.webpagetet.org/ YUICompressor: http://developer.yahoo.com/yui/compressor/ Let‘s make the web faster：http://code.google.com/speed/articles/html5-performance.html @kejunz: http://twitter.com/kejunz

63. 谢谢