1 / 63

淘宝 网 前端应用与发展

淘宝 网 前端应用与发展. 小马. 内容提要. 内容提要. 淘 宝前端发展史 近四年来的问题与挑战 实践经验与 心得 前端发展展望. 关于我. { Name : “ 赵泽欣 ” , Nickname: “ 小马 ”, Job: “ 前端 工程 师 ” Company: “ 淘宝网 ” Twitter : “@ zhaozexin ” }. Taobao.com @ 2003. Taobao.com @ 2004. Taobao.com @ 2005. Taobao.com @ 2006. 淘宝网前端 @ 2006.

mave
Download Presentation

淘宝 网 前端应用与发展

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  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

  11. 问题与挑战 @ 2007 问题与挑战 @ 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. 问题与挑战 @ 2009 • 网站页面性能形势严峻 • YUI+TBra日益无法满足开发需求

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

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

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

  49. Taobao.com @ 2010

  50. 淘宝网前端 @ 2010

More Related