2. • Who Are We?
淘宝前端开发工程师
http://ued.taobao.com
3. Topic
• 前端技术的演进
• 技术实践
• 知识体系
• 未来展望
8. 2003-2006
• 静态页面,表格嵌套
• 无调试工具
• 兼职的“页面开发”,单一浏览器
• 谈不上“用户体验”
11. 2006-2007
• 交互复杂，页面“动”起来
• 新岗位：“Web前端开发工程师”
• 新增流程环节，进入磨合期
• 制定规范
14. 标准兼容
JS,W3C,HTML4..
HTML
调试工具
CSS Firefox,Firebug…
SEO
用户
体验
工具
FW,PS,DW..
浏览器
InternetExploer
16. 2007-2008
• 业务拆分,网站庞大
• 页面变慢
• 大量使用Ajax
• 内容暴增,内容管理成本太高
• 页面排版亟需重新规划
17. 标准兼容
JS,W3C,HTML4..
HTML
调试工具
CSS Firefox,Firebug…
SEO
用户
体验
工具
FW,PS,DW..
浏览器
InternetExploer
18. 标准兼容
栅格化
JS,W3C,HTML4..
HTML Reset/Grid.css.
调试工具
CSS Firefox,Firebug… 库/框架
YUI2/Tbra..
SEO
用户
体验 组件库
工具
部署
FW,PS,DW.. Jslint,YC,Ant..
TMS
性能
浏览器 优化
InternetExploer
24. 2009-2010
• 前端性能问题愈加严峻
• 多人协作/前端架构/Combo/模块化
• YUI/Tbra无法满足开发需求
• 组件需要本地化
25. 标准兼容
栅格化
JS,W3C,HTML4..
HTML Reset/Grid.css.
调试工具
CSS Firefox,Firebug… 库/框架
YUI2/Tbra..
SEO
用户
体验 组件库
工具
部署
FW,PS,DW.. Jslint,YC,Ant..
TMS
性能
浏览器 优化
InternetExploer
26. 标准兼容
栅格化
JS,W3C,HTML4..
HTML Reset/Grid.css.
前端架构
YUI3,Kissy…
调试工具
CSS Firefox,Firebug… 库/框架
YUI2/Tbra..
SEO
用户
体验 组件库
工具
部署
FW,PS,DW.. Jslint,YC,Ant..
TMS
性能
浏览器 优化
InternetExploer
29. 2010-2011
• 大尺寸屏幕
• 高级浏览器渐进增强
• 移动终端 (iOS/Android)
• OPOA（单页应用）
• 更“极致”的用户体验
30. 标准兼容
栅格化
JS,W3C,HTML4..
HTML Reset/Grid.css.
前端架构
YUI3,Kissy…
调试工具
CSS Firefox,Firebug… 库/框架
YUI2/Tbra..
SEO
用户
体验 组件库
工具
部署
FW,PS,DW.. Jslint,YC,Ant..
TMS
性能
浏览器 优化
InternetExploer
31. 标准兼容
栅格化
JS,W3C,HTML4..
HTML Reset/Grid.css.
前端架构
YUI3,Kissy…
调试工具
CSS Firefox,Firebug… 库/框架
YUI2/Tbra..
SEO 前端
用户
体验 组件库 MVC
工具
部署 HTML5
FW,PS,DW.. Jslint,YC,Ant..
CSS3
TMS 移动
性能
浏览器 优化 终端
InternetExploer
40. HTML
内容呈现
开发/调试/Bugfix…
[理论沉淀 /最佳实践 ]
server
41. CSS
BOM API
HTML DOM JavaScript
DOM API
内容呈现
开发/调试/Bugfix…
[理论沉淀 /最佳实践 ]
server
42. CSS YUI/Kissy/jQuery…
BOM API
HTML DOM JavaScript
DOM API
内容呈现 数据交换
开发/调试/Bugfix… xml
Json
[理论沉淀 /最佳实践 ] jsonp
server
43. Safari Firefox Opera IE6~IE9 Firefox Chrome Safari Chrome
Macintosh Windows Mobile
CSS YUI/Kissy/jQuery…
BOM API
HTML DOM JavaScript
DOM API
内容呈现 数据交换
开发/调试/Bugfix… xml
Json
[理论沉淀 /最佳实践 ] jsonp
server
44. Safari Firefox Opera IE6~IE9 Firefox Chrome Safari Chrome
Macintosh Windows Mobile
CSS YUI/Kissy/jQuery…
技术维度 : x 6 BOM API
HTML DOM JavaScript
操作系统 : x 3 DOM API
浏览器平台 : x 6
内容呈现 数据交换
渲染模式 : x 2
开发/调试/Bugfix… xml
Json
=216
[理论沉淀 /最佳实践 ] jsonp
server
46. 和后端相比，前端：
• 无法编译
• 代码开源
• 客户端环境不可预知
• 不能安装或存储
• 数据无法隐藏
• 更关注Web性能
52. • 1989 Tim Berners-Lee 发明HTML
• 1993 第一款浏览器“Mosaic”发布
• 1994 W3C成立
• 1997 HTML 3.2
• 1999 HTML4.01
• 2000 XHTML 1.0
• 2008 HTML5
http://www.w3.org/People/Raggett/book4/ch02.html
54. 常用元素
• 结构：p,div,span,h1-h6,body…
• 列表：ul,ol,dl,li,dd,dt
• 文本：a,em,strong,pre…
• 表单：form,input,button,label…
• 媒体：img,object…
• 表格：table,tr,td,caption,tbody…
• …
http://reference.sitepoint.com/html/elements
55. html5 标签
progress time
article
canvas ruby
nav datalist
figure
audio
keygen
section
http://www.w3.org/TR/html5/
56. html5 标签
progress time
article
canvas ruby
nav datalist
figure
audio
keygen
section
http://www.w3.org/TR/html5/
57. <header>
<h1>
<a href=“#”>
<strong>I</strong> love <em>u</em>
</a>
<span>I am Jay</span>
</h1>
<nav>
<ul>
<li>my journal</li>
<li>about me</li>
<li>the sandbox</li>
</ul>
</nav>
</header>
语义化的html
60. • 1994 Hakon Wium Lie提出CSS概念
• 1996 CSS Level 1
• 1997 CSSWorking Group
• 1998 CSS Level 2
• CSS Level 3 – 进化中…
http://www.w3.org/TR/css
61. 属性 值 属性 值
h1 {
color:red;font-size:14px;
}
选择器 声明 声明
64. display:
block
display:
inline
display:
inline-block
http://www.w3.org/TR/CSS2/box.html
65. 元素显示：display
• p、div、h1-h6 等是 block 元素
• span、a、img 等是 inline 元素
http://www.w3school.com.cn/css/pr_class_display.asp
67. Hack（样式补丁）
#box {
color:black; /*firefox*/
color:red9; /*所有ie*/
*color:blue; /*ie7*/
_color:green; /*ie6*/
}
71. • 1995 JavaScript 诞生
• 1996 ECMAScript 诞生
• 1999 ECMAScript 3
• 2009 ECMAScript 5
• ECMAScript Harmony 正在讨论中…
http://zh.wikipedia.org/zh-cn/JavaScript
72. Google Code中语言出现
fuck一词的比率
0.56%
0.29%
0.26%
0.24%
0.15%
0.13% 0.13% 0.12%
0.10%
0.04% 0.05%
74. 我对JavaScript既爱又恨，
它的优秀之处并非原创，
它的原创之处并不优秀…
-- Brendan Eich
http://www.ruanyifeng.com/blog/2011/06/birth_of_javascript.html
75. Java
Scheme
C
Self
JavaScript
77. 数据类型/内存管理
Java
基本语法 Scheme
C
Self
JavaScript
78. 数据类型/内存管理
函数式编程
Java
基本语法 Scheme
C
Self
JavaScript
79. 数据类型/内存管理
函数式编程
Java
基本语法 Scheme
C 基于原型
Self
JavaScript
82. 闭包
for(var i = 0;i<elements.length;i++){
elements[i].attachEvent ('click',function(){
alert(i);
});
}
83. 闭包
for(var i = 0;i<elements.length;i++){
(function(n){
elements[n].attachEvent('click',function(){
alert(n);
});
})(i);
}
84. 链式调用
var el = $(‘div’);
el.addClass(‘new Class’);
el.text(‘Hello World’);
el.show();
$(‘div’)
.addClass(‘new Class’)
.text(‘Hello World’)
.show();
91. Web性能优化手段
1. 减少HTTP请求数
2. 使用CDN
3. 给HTTP头部添加过期时间
4. 使用Gzip压缩
5. 样式表置于页面最前面
6. 把脚本放在最后
7. 使用外部JavaScript和CSS
8. 压缩(Minify)JavaScript和CSS
9. …
93. 网站渲染速度
0.5s 1.0s 1.5s 2.0s 3s
ebay
amazone
dangdang
360buy
taobao
94. 高性能网站建设(进阶)指南，高性能JavaScript
http://book.douban.com/subject/3132277/
http://book.douban.com/subject/4719162/
http://book.douban.com/subject/5362856/
106. （前端） （后端）
静态页面 套页面
html/css/js php/java/mv
107. （前端） （后端）
静态模板 数据接口
html/css/js php/java
javascriptMVC
108. （前端） （后端）
静态模板 数据接口
html/css/js php/java
javascriptMVC
更专注于UI和交互！
109. 更专注于底层数据！
（前端） （后端）
静态模板 数据接口
html/css/js php/java
javascriptMVC
更专注于UI和交互！
110. PC
Tablet
http://twitter.com
119. @jayli
F2E & Translator
htt[p://jayli.github.com
bachi@taobao.com
