Submit Search
Upload
淘宝网前端应用与发展
•
Download as PPTX, PDF
•
167 likes
•
6,053 views
taobao.com
Follow
《淘宝前端应用与发展》 @ QCon2010 北京
Read less
Read more
Technology
Report
Share
Report
Share
1 of 63
Download now
Recommended
赵泽欣 - 淘宝网前端应用与发展
赵泽欣 - 淘宝网前端应用与发展
d0nn9n
Top100summit前端的云时代支付宝前端平台架构 王保平
Top100summit前端的云时代支付宝前端平台架构 王保平
drewz lin
写更好的CSS
写更好的CSS
Smallni Ding
Net 6 的 blazor 開發新視界
Net 6 的 blazor 開發新視界
Gelis Wu
美团点评技术沙龙011 - 客户端用户体验数据量化
美团点评技术沙龙011 - 客户端用户体验数据量化
美团点评技术团队
[ Study4TW Visual Studio Everywhere ] Vsts + microsoft teams 建構企業的Devops
[ Study4TW Visual Studio Everywhere ] Vsts + microsoft teams 建構企業的Devops
Edward Kuo
前端大型系統的基石 TypeScript
前端大型系統的基石 TypeScript
Gelis Wu
大規模微服務導入 - #1, 從零開始的系統架構設計概觀
大規模微服務導入 - #1, 從零開始的系統架構設計概觀
Andrew Wu
Recommended
赵泽欣 - 淘宝网前端应用与发展
赵泽欣 - 淘宝网前端应用与发展
d0nn9n
Top100summit前端的云时代支付宝前端平台架构 王保平
Top100summit前端的云时代支付宝前端平台架构 王保平
drewz lin
写更好的CSS
写更好的CSS
Smallni Ding
Net 6 的 blazor 開發新視界
Net 6 的 blazor 開發新視界
Gelis Wu
美团点评技术沙龙011 - 客户端用户体验数据量化
美团点评技术沙龙011 - 客户端用户体验数据量化
美团点评技术团队
[ Study4TW Visual Studio Everywhere ] Vsts + microsoft teams 建構企業的Devops
[ Study4TW Visual Studio Everywhere ] Vsts + microsoft teams 建構企業的Devops
Edward Kuo
前端大型系統的基石 TypeScript
前端大型系統的基石 TypeScript
Gelis Wu
大規模微服務導入 - #1, 從零開始的系統架構設計概觀
大規模微服務導入 - #1, 從零開始的系統架構設計概觀
Andrew Wu
常用Js框架比较
常用Js框架比较
Adam Lu
使用 .NET Standard 開發跨平台應用程式
使用 .NET Standard 開發跨平台應用程式
Gelis Wu
美团点评技术沙龙13-酒旅Hybrid架构体系及演进
美团点评技术沙龙13-酒旅Hybrid架构体系及演进
美团点评技术团队
2015 年逢甲大學資訊系:ASP.NET MVC 4 教育訓練1
2015 年逢甲大學資訊系:ASP.NET MVC 4 教育訓練1
Duran Hsieh
Asp.net mvc 基礎
Asp.net mvc 基礎
Gelis Wu
美团点评技术沙龙05 - Node.js业务应用实践和服务监控
美团点评技术沙龙05 - Node.js业务应用实践和服务监控
美团点评技术团队
前端开发规范
前端开发规范
aNd1coder
从无阻塞并行脚本加载(Lab.js)到浏览器消息模型
从无阻塞并行脚本加载(Lab.js)到浏览器消息模型
裕波 周
N-layer design & development
N-layer design & development
Xuefeng Zhang
美团点评技术沙龙05 - H5在线制作发布平台dpub
美团点评技术沙龙05 - H5在线制作发布平台dpub
美团点评技术团队
Data Storage Practice
Data Storage Practice
Davies Liu
豆瓣技术架构的发展历程 @ QCon Beijing 2009
豆瓣技术架构的发展历程 @ QCon Beijing 2009
Qiangning Hong
Scaling MySQL in Amazon Web Services
Scaling MySQL in Amazon Web Services
Laine Campbell
Build scalable microblog qcon beijing 2010
Build scalable microblog qcon beijing 2010
Tim Y
Bunding Or Binding Dr. Shriniwas Kashalikar
Bunding Or Binding Dr. Shriniwas Kashalikar
shriniwaskashalikar
Olswang 2nd Annual Construction Law Conference
Olswang 2nd Annual Construction Law Conference
Francis Ho
Analytical Evaluation of the Edinburgh 2010 Conference
Analytical Evaluation of the Edinburgh 2010 Conference
markoxbrow
Techspo 2010
Techspo 2010
MHS
AdminStudio Suite - French
AdminStudio Suite - French
Flexera
Terminating a Construction Contract: Getting it Right
Terminating a Construction Contract: Getting it Right
Francis Ho
广告前端代码优化
广告前端代码优化
taobao.com
Tips for a successful Salesforce.com implementation
Tips for a successful Salesforce.com implementation
Kathy Herrmann
More Related Content
What's hot
常用Js框架比较
常用Js框架比较
Adam Lu
使用 .NET Standard 開發跨平台應用程式
使用 .NET Standard 開發跨平台應用程式
Gelis Wu
美团点评技术沙龙13-酒旅Hybrid架构体系及演进
美团点评技术沙龙13-酒旅Hybrid架构体系及演进
美团点评技术团队
2015 年逢甲大學資訊系:ASP.NET MVC 4 教育訓練1
2015 年逢甲大學資訊系:ASP.NET MVC 4 教育訓練1
Duran Hsieh
Asp.net mvc 基礎
Asp.net mvc 基礎
Gelis Wu
美团点评技术沙龙05 - Node.js业务应用实践和服务监控
美团点评技术沙龙05 - Node.js业务应用实践和服务监控
美团点评技术团队
前端开发规范
前端开发规范
aNd1coder
从无阻塞并行脚本加载(Lab.js)到浏览器消息模型
从无阻塞并行脚本加载(Lab.js)到浏览器消息模型
裕波 周
N-layer design & development
N-layer design & development
Xuefeng Zhang
美团点评技术沙龙05 - H5在线制作发布平台dpub
美团点评技术沙龙05 - H5在线制作发布平台dpub
美团点评技术团队
What's hot
(10)
常用Js框架比较
常用Js框架比较
使用 .NET Standard 開發跨平台應用程式
使用 .NET Standard 開發跨平台應用程式
美团点评技术沙龙13-酒旅Hybrid架构体系及演进
美团点评技术沙龙13-酒旅Hybrid架构体系及演进
2015 年逢甲大學資訊系:ASP.NET MVC 4 教育訓練1
2015 年逢甲大學資訊系:ASP.NET MVC 4 教育訓練1
Asp.net mvc 基礎
Asp.net mvc 基礎
美团点评技术沙龙05 - Node.js业务应用实践和服务监控
美团点评技术沙龙05 - Node.js业务应用实践和服务监控
前端开发规范
前端开发规范
从无阻塞并行脚本加载(Lab.js)到浏览器消息模型
从无阻塞并行脚本加载(Lab.js)到浏览器消息模型
N-layer design & development
N-layer design & development
美团点评技术沙龙05 - H5在线制作发布平台dpub
美团点评技术沙龙05 - H5在线制作发布平台dpub
Viewers also liked
Data Storage Practice
Data Storage Practice
Davies Liu
豆瓣技术架构的发展历程 @ QCon Beijing 2009
豆瓣技术架构的发展历程 @ QCon Beijing 2009
Qiangning Hong
Scaling MySQL in Amazon Web Services
Scaling MySQL in Amazon Web Services
Laine Campbell
Build scalable microblog qcon beijing 2010
Build scalable microblog qcon beijing 2010
Tim Y
Bunding Or Binding Dr. Shriniwas Kashalikar
Bunding Or Binding Dr. Shriniwas Kashalikar
shriniwaskashalikar
Olswang 2nd Annual Construction Law Conference
Olswang 2nd Annual Construction Law Conference
Francis Ho
Analytical Evaluation of the Edinburgh 2010 Conference
Analytical Evaluation of the Edinburgh 2010 Conference
markoxbrow
Techspo 2010
Techspo 2010
MHS
AdminStudio Suite - French
AdminStudio Suite - French
Flexera
Terminating a Construction Contract: Getting it Right
Terminating a Construction Contract: Getting it Right
Francis Ho
广告前端代码优化
广告前端代码优化
taobao.com
Tips for a successful Salesforce.com implementation
Tips for a successful Salesforce.com implementation
Kathy Herrmann
Splinternet Marketing.Com Rankings 2 8 2011
Splinternet Marketing.Com Rankings 2 8 2011
SEO, LLC dba www.SplinternetMarketing.com
Walking To Wellness Holistic View Dr Shriniwas Kashalikatr
Walking To Wellness Holistic View Dr Shriniwas Kashalikatr
shriniwaskashalikar
格林威治天文台
格林威治天文台
Josephine C
Master of international Business Administration
Master of international Business Administration
MIBA University of Hamburg
Energy manager
Energy manager
kkulib-somphot
Dịch vụ quảng cáo, thiết kế và phát triển website
Dịch vụ quảng cáo, thiết kế và phát triển website
Hai Yen Tran
Massage And Superliving Dr. Shriniwas Kashalikar
Massage And Superliving Dr. Shriniwas Kashalikar
shriniwaskashalikar
Viewers also liked
(19)
Data Storage Practice
Data Storage Practice
豆瓣技术架构的发展历程 @ QCon Beijing 2009
豆瓣技术架构的发展历程 @ QCon Beijing 2009
Scaling MySQL in Amazon Web Services
Scaling MySQL in Amazon Web Services
Build scalable microblog qcon beijing 2010
Build scalable microblog qcon beijing 2010
Bunding Or Binding Dr. Shriniwas Kashalikar
Bunding Or Binding Dr. Shriniwas Kashalikar
Olswang 2nd Annual Construction Law Conference
Olswang 2nd Annual Construction Law Conference
Analytical Evaluation of the Edinburgh 2010 Conference
Analytical Evaluation of the Edinburgh 2010 Conference
Techspo 2010
Techspo 2010
AdminStudio Suite - French
AdminStudio Suite - French
Terminating a Construction Contract: Getting it Right
Terminating a Construction Contract: Getting it Right
广告前端代码优化
广告前端代码优化
Tips for a successful Salesforce.com implementation
Tips for a successful Salesforce.com implementation
Splinternet Marketing.Com Rankings 2 8 2011
Splinternet Marketing.Com Rankings 2 8 2011
Walking To Wellness Holistic View Dr Shriniwas Kashalikatr
Walking To Wellness Holistic View Dr Shriniwas Kashalikatr
格林威治天文台
格林威治天文台
Master of international Business Administration
Master of international Business Administration
Energy manager
Energy manager
Dịch vụ quảng cáo, thiết kế và phát triển website
Dịch vụ quảng cáo, thiết kế và phát triển website
Massage And Superliving Dr. Shriniwas Kashalikar
Massage And Superliving Dr. Shriniwas Kashalikar
Similar to 淘宝网前端应用与发展
中小互联网公司服务端优化实践
中小互联网公司服务端优化实践
moonbingbing
[DCTPE2010] 從企劃到開發維護的 Drupal 專案經驗
[DCTPE2010] 從企劃到開發維護的 Drupal 專案經驗
Drupal Taiwan
[2008]网站重构 -who am i
[2008]网站重构 -who am i
Twinsen Liang
价值中国网站开发、管理经验探讨、分享、交流
价值中国网站开发、管理经验探讨、分享、交流
hizhubo
ASP.Net MVC2 简介
ASP.Net MVC2 简介
Allen Lsy
Csdn Java电子杂志第1期
Csdn Java电子杂志第1期
yiditushe
Java Web框架汇总
Java Web框架汇总
yiditushe
Web爬虫那点事
Web爬虫那点事
Yihua Huang
前端样式开发演变之路
前端样式开发演变之路
Zhao Lei
广告投放代码和创意代码持续优化
广告投放代码和创意代码持续优化
leneli
Web development introduced history and future
Web development introduced history and future
jarryli
淘宝网前端开发面试题
淘宝网前端开发面试题
Lumend
漫谈web前端
漫谈web前端
woody huang
2016年逢甲大學資訊系:ASP.NET MVC 4 教育訓練1(20160222)
2016年逢甲大學資訊系:ASP.NET MVC 4 教育訓練1(20160222)
Duran Hsieh
Web前端开发的现状和未来
Web前端开发的现状和未来
raywill02
新浪云计算公开课第一期:Let’s run @ sae(丛磊)
新浪云计算公开课第一期:Let’s run @ sae(丛磊)
锐 张
前端开发的现状和未来
前端开发的现状和未来
cly84920
美团前端架构简介
美团前端架构简介
pan weizeng
广告投放代码和创意代码持续优化
广告投放代码和创意代码持续优化
taobao.com
實踐 Clean Architecture(實作高可用性的軟件架構)
實踐 Clean Architecture(實作高可用性的軟件架構)
Gelis Wu
Similar to 淘宝网前端应用与发展
(20)
中小互联网公司服务端优化实践
中小互联网公司服务端优化实践
[DCTPE2010] 從企劃到開發維護的 Drupal 專案經驗
[DCTPE2010] 從企劃到開發維護的 Drupal 專案經驗
[2008]网站重构 -who am i
[2008]网站重构 -who am i
价值中国网站开发、管理经验探讨、分享、交流
价值中国网站开发、管理经验探讨、分享、交流
ASP.Net MVC2 简介
ASP.Net MVC2 简介
Csdn Java电子杂志第1期
Csdn Java电子杂志第1期
Java Web框架汇总
Java Web框架汇总
Web爬虫那点事
Web爬虫那点事
前端样式开发演变之路
前端样式开发演变之路
广告投放代码和创意代码持续优化
广告投放代码和创意代码持续优化
Web development introduced history and future
Web development introduced history and future
淘宝网前端开发面试题
淘宝网前端开发面试题
漫谈web前端
漫谈web前端
2016年逢甲大學資訊系:ASP.NET MVC 4 教育訓練1(20160222)
2016年逢甲大學資訊系:ASP.NET MVC 4 教育訓練1(20160222)
Web前端开发的现状和未来
Web前端开发的现状和未来
新浪云计算公开课第一期:Let’s run @ sae(丛磊)
新浪云计算公开课第一期:Let’s run @ sae(丛磊)
前端开发的现状和未来
前端开发的现状和未来
美团前端架构简介
美团前端架构简介
广告投放代码和创意代码持续优化
广告投放代码和创意代码持续优化
實踐 Clean Architecture(實作高可用性的軟件架構)
實踐 Clean Architecture(實作高可用性的軟件架構)
More from taobao.com
编辑器设计U editor
编辑器设计U editor
taobao.com
Berserk js
Berserk js
taobao.com
淘宝开放产品前端实践
淘宝开放产品前端实践
taobao.com
第三方内容开发最佳实践
第三方内容开发最佳实践
taobao.com
编辑器设计Kissy editor
编辑器设计Kissy editor
taobao.com
百度前端性能监控与优化实践
百度前端性能监控与优化实践
taobao.com
Node.js在淘宝的应用实践
Node.js在淘宝的应用实践
taobao.com
Kind editor设计思路
Kind editor设计思路
taobao.com
Java script physical engine
Java script physical engine
taobao.com
Html5环保小游戏
Html5环保小游戏
taobao.com
阅读类Web应用前端技术探索
阅读类Web应用前端技术探索
taobao.com
完颜:移动网站的兼容性探索
完颜:移动网站的兼容性探索
taobao.com
张平:JavaScript引擎实现
张平:JavaScript引擎实现
taobao.com
高力:19楼现有前端架构
高力:19楼现有前端架构
taobao.com
李成银:前端编译平台
李成银:前端编译平台
taobao.com
钱宝坤:多浏览器集成的JavaScript单元测试工具
钱宝坤:多浏览器集成的JavaScript单元测试工具
taobao.com
张克军:前端基础架构的实践和思考
张克军:前端基础架构的实践和思考
taobao.com
刘平川:【用户行为分析】Marmot实践
刘平川:【用户行为分析】Marmot实践
taobao.com
吴英杰:【用户行为分析】淘宝页面显微镜系统原理及实践
吴英杰:【用户行为分析】淘宝页面显微镜系统原理及实践
taobao.com
前端Mvc探讨及实践
前端Mvc探讨及实践
taobao.com
More from taobao.com
(20)
编辑器设计U editor
编辑器设计U editor
Berserk js
Berserk js
淘宝开放产品前端实践
淘宝开放产品前端实践
第三方内容开发最佳实践
第三方内容开发最佳实践
编辑器设计Kissy editor
编辑器设计Kissy editor
百度前端性能监控与优化实践
百度前端性能监控与优化实践
Node.js在淘宝的应用实践
Node.js在淘宝的应用实践
Kind editor设计思路
Kind editor设计思路
Java script physical engine
Java script physical engine
Html5环保小游戏
Html5环保小游戏
阅读类Web应用前端技术探索
阅读类Web应用前端技术探索
完颜:移动网站的兼容性探索
完颜:移动网站的兼容性探索
张平:JavaScript引擎实现
张平:JavaScript引擎实现
高力:19楼现有前端架构
高力:19楼现有前端架构
李成银:前端编译平台
李成银:前端编译平台
钱宝坤:多浏览器集成的JavaScript单元测试工具
钱宝坤:多浏览器集成的JavaScript单元测试工具
张克军:前端基础架构的实践和思考
张克军:前端基础架构的实践和思考
刘平川:【用户行为分析】Marmot实践
刘平川:【用户行为分析】Marmot实践
吴英杰:【用户行为分析】淘宝页面显微镜系统原理及实践
吴英杰:【用户行为分析】淘宝页面显微镜系统原理及实践
前端Mvc探讨及实践
前端Mvc探讨及实践
淘宝网前端应用与发展
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.
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架构改造 挑战:性能要求苛刻 对策:速度委员会
55.
56.
目标 (2010) 目标(2010)
探索和研发最适合自己的前端框架 精雕细琢地前端编码 Fast by Default
57.
淘宝网前端实践之路
58.
淘宝网前端发展展望
59.
前端岗位发展展望
60.
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.
谢谢
Download now