前端101.pdf

前端工程师进阶用PPT

Transcript

1. 前端 101 / MZhou @mmzhou
2. HTML
3. < ! D O C T Y P E h t m l > < ! - - H T M L 5 - - > < h t m l l a n g = " e n " > < h e a d > < m e t a c h a r s e t = " U T F - 8 " > < t i t l e > 标题< / t i t l e > < / h e a d > < b o d y > 内容< / b o d y > < / h t m l >
4. HTML语义化
5. p - 段落 h1,h2,h3,h4,h5,h6 - 层级标题 strong,em - 强调 ins - 插入 del - 删除 abbr - 缩写 code - 代码标识 cite - 引述来源作品的标题 q - 引用 blockquote - 一段或长篇引用 ul - 无序列表 ol - 有序列表 dl,dt,dd - 定义列表 table - 表格，列表
6. article - 独立的文档、页面、应用、站点 section - 按主题将内容分组，层级标题，并非「语义化的 div」。当你希望这个元素的 内容体现在文档的提纲 (outline) 中时，用 section 是合适的。 nav - 导航 aside - 与周围内容关系不太密切的内容 (eg. 广告 / 侧边栏内容） header - 一组介绍性描述或导航信息（eg. 目录 / 搜索框 / logo） footer - 底部元素，代表最近的父级区块内容的页脚 address - 联系人信息 更多详细信息
7. SEO 有标准、不纠结 高大上
8. CSS、JAVASCRIPT的引入
9. < l i n k r e l = " s t y l e s h e e t " h r e f = " p a g e . c s s " / > < s c r i p t s r c = " p a g e . j s " > < / s c r i p t >
10. Protocol-Relative URL < l i n k r e l = " s t y l e s h e e t " h r e f = " / / q q . c o m / p a g e . c s s " > 使用 protocol-relative URL 引入 CSS，在 IE7/8 下，会发两 次请求。
12. Stalled / Blocking - 请求发起之前等待的时间总和。包含了用于处理代理的时间。 另外，如果有已经建立好的连接，那么这个时间还包括等待已建立连接被复用的时间，这个 遵循 Chrome 对同一源最大6个TCP连接的规则。 Proxy Negotiation - 处理代理的时间 DNS Lookup - 查找DNS的时间，页面上每个新的域都需要一次完整的寻路来完成DNS 查找 Initial Connection / Connecting - 建立链接的时间，包括TCP三次握手及 重试握手，还有处理SSL SSL - 处理 SSL 握手 Request Sent / Sending - 请求发送的时间 Waiting (TTFB) - Time To First Byte，等待首个字节返回的时间 Content Download / Downloading - 全部内容下载完成的时间 Chrome的bug导致stalled了21秒
13. Performance API
14. 多普勒测速
15. Yahoo的军规
16. < ! - - B A D : 会b l o c k 外部s c r i p t 请求 - - > < s c r i p t s r c = " / / e x a m p l e . c o m / t e s t . j s " > < / s c r i p t > < p > < / p > < ! - - G O O D : 外部s c r i p t 会异步加载 - - > < s c r i p t > < / s c r i p t > v a r s c r i p t = d o c u m e n t . c r e a t e E l e m e n t ( ' s c r i p t ' ) ; s c r i p t . s r c = " / / e x a m p l e . c o m / t e s t . j s " ; d o c u m e n t . g e t E l e m e n t s B y T a g N a m e ( ' h e a d ' ) [ 0 ] . a p p e n d C h i l d ( s c r i p t ) ;
17. < l i n k h r e f = " h t t p : / / e x a m p l e . c o m / t e s t . c s s ? r t t = 2 " r e l = " s t y l e s h e e t " > < ! - - b o d y 内容 - - > < s c r i p t > < / s c r i p t > < s c r i p t > < / s c r i p t > v a r s c r i p t = d o c u m e n t . c r e a t e E l e m e n t ( ' s c r i p t ' ) ; s c r i p t . s r c = " h t t p : / / e x a m p l e . c o m / t e s t . j s ? r t t = 1 & a " ; d o c u m e n t . g e t E l e m e n t s B y T a g N a m e ( ' h e a d ' ) [ 0 ] . a p p e n d C h i l d ( s c r i p t ) ; v a r s c r i p t = d o c u m e n t . c r e a t e E l e m e n t ( ' s c r i p t ' ) ; s c r i p t . s r c = " h t t p : / / e x a m p l e . c o m / t e s t . j s ? r t t = 1 & b " ; d o c u m e n t . g e t E l e m e n t s B y T a g N a m e ( ' h e a d ' ) [ 0 ] . a p p e n d C h i l d ( s c r i p t ) ;
18. Javascript 可以操作 CSSOM，所以需要等到 css 完全加载 解析完毕之后才能执行 script 标签
19. < l i n k h r e f = " h t t p : / / e x a m p l e . c o m / t e s t . c s s ? r t t = 2 " r e l = " s t y l e s h e e t " > < ! - - b o d y 内容 - - > < s c r i p t s r c = " h t t p : / / e x a m p l e . c o m / t e s t . j s ? r t t = 1 & a " > < / s c r i p t > < s c r i p t s r c = " h t t p : / / e x a m p l e . c o m / t e s t . j s ? r t t = 1 & b " > < / s c r i p t >
20. 浏览器（包括 IE8/9 和 Android 2.3/2.2）会预解析查找可以 下载的外部文件，并行下载，串行执行
21. < ! - - 现代浏览器使用 ' a s y n c ' ，旧I E 使用 ' d e f e r ' - - > < s c r i p t s r c = " / / s o m e h o s t . c o m / a w e s o m e - w i d g e t . j s " a s y n c d e f e r > < / s c r i p t > 并行下载，不会 block DOM 不能确保执行顺序
22. No Rules! Just Tools!
23. 布局
24. 本质上是一个个长方形框的布局
25. 盒模型 . b o x { m a r g i n : 1 0 p x ; p a d d i n g : 1 0 p x ; w i d t h : 1 0 0 p x ; h e i g h t : 1 0 0 p x ; b o r d e r : 1 p x s o l i d # C C C ; } box-sizing
28. 这是一个块级元素 display: block; DEMO 块级元素，新开始一行并且尽可能撑满容器
29. Lorem Ipsum is simply dummy text of the printing and typesetting industry. 这是一个行内元素 display: inline; 。Lorem Ipsum is simply dummy text of the printing and typesetting industry. DEMO 行内元素，一行之内横向的排列，宽高不起作用
30. Lorem Ipsum is simply dummy text of the printing and typesetting industry. 这是一个行内块级元素 display: inline-block; 。Lorem Ipsum is simply dummy text of the printing and typesetting industry. DEMO 行内块级元素，一行之内横向的排列，宽高起作用
31. < d i v c l a s s = " d e m o " > < p > L o r e m I p s u m i s s i m p l y < s p a n > 这是一个行内块级元素 d i s p l a y : i n l i n e ; < / s p a n > < p > L o r e m I p s u m i s s i m p l y < s p a n > 这是一个行内块级元素 d i s p l a y : i n l i n e ; < / s p a n > < / d i v >
32. Lorem Ipsum is simply 这是一个行内块 级元素 display: inline; Lorem. Lorem Ipsum is simply 这是一个行内块 级元素 display: inline; Lorem. DEMO
33. 红色 - 块级框 绿色 - 行框 橙色 - 行内框 普通文档流，一般是从左至右、从上到下
34. 浮动元素
35. . d e m o - b o x { m a r g i n : 2 0 p x ; p a d d i n g : 1 0 p x ; b o r d e r : 5 p x d a s h e d # 0 0 0 ; } . d e m o - f l o a t - r , . d e m o - f l o a t { m a r g i n : 1 0 p x ; f l o a t : l e f t ; / * 左浮动 * / w i d t h : 1 0 0 p x ; h e i g h t : 1 0 0 p x ; b a c k g r o u n d : r e d ; } . d e m o - f l o a t - r { f l o a t : r i g h t ; / * 右浮动 * / }
36. left right DEMO
37. 1. 浮动元素脱离文档流 2. 对于它的父元素来说，浮动元素是不存在的（父元素不 会自适应以包裹浮动元素，所以需要清除浮动） 3. 一个浮动元素的位置会尽可能的靠近他父元素的左上角 或者右上角 4. 行内元素添加浮动属性会变成块级元素 5. 浮动元素不会浮动出父元素的边界
38. 1 2 3 4 5 6 7 8 9 Lorem Ipsum is simply dummy text of the printing . DEMO
39. 1. 浮动元素前面定义的元素会把浮动元素挤到下面 2. 先声明的浮动元素有优先靠近父元素左上角或者右上角 位置的权利 3. 如果有多个相同方向的浮动元素，浮动元素也会尽可能 的靠近左上角或者右上角，直到父元素宽度没法放下这 个元素的时候，这个元素才会被挤下去
40. 清除浮动
41. . d e m o - c l e a r { c l e a r : l e f t ; / * 清除左浮动 * / m a r g i n : 1 0 p x ; w i d t h : 1 0 0 p x ; h e i g h t : 1 0 0 p x ; b a c k g r o u n d : b l u e ; }
42. 1 2 3 4 5 6 7 8 9 clear DEMO clear 属性定义了元素的左侧或右侧或全部不允许出现 浮动元素 clear 属性仅仅应用于块级元素
43. < d i v c l a s s = " d e m o - b o x d e m o - c l e a r f i x " > < d i v c l a s s = " d e m o - f l o a t " > 1 < / d i v > < d i v c l a s s = " d e m o - f l o a t - r " > 2 < / d i v > < ! - - 清除浮动 - - > < d i v c l a s s = " d e m o - c l e a r " > < / d i v > < / d i v >
44. / * * * h t t p : / / n i c o l a s g a l l a g h e r . c o m / m i c r o - c l e a r f i x - h a c k / * F o r m o d e r n b r o w s e r s * 1 . 处理 O p e r a 下 c o n t e n t e d i t a b l e 时候的b u g * 2 . 使用 t a b l e 是为了触发 B F C ，解决顶部元素的 m a r g i n 折叠问题 * / . d e m o - c l e a r f i x : b e f o r e , . d e m o - c l e a r f i x : a f t e r { c o n t e n t : ' ' ; / * 1 * / d i s p l a y : t a b l e ; / * 2 * / } . d e m o - c l e a r f i x : a f t e r { c l e a r : b o t h ; } / * * * I E 6 / 7 下触发 h a s L a y o u t 实现兼容
45. 1 2 3 4 5 6 7 8 9 DEMO
46. 学习CSS布局
47. CSS 兼容性 Hack
48. IE 条件注释 < ! - - [ i f I E 6 ] > 这段文字只在I E 6 浏览器显示 < ! [ e n d i f ] - - >
49. 属性前缀 Hack Selector IE6(s) IE7(s) IE8(s) IE9(s) IE10(s) color:red Y Y Y Y Y color:red\0 N N Y Y Y color:red\9\0 N N N Y Y *color:red Y Y N N N _color:red Y N N N N
50. CSS Hack Table
51. CSS 会忽略不支持的属性或选择器
52. . t e s t 1 { b a c k g r o u n d - c o l o r : # F F F ; / * 不支持r g b a * / b a c k g r o u n d - c o l o r : r g b a ( 2 5 5 , 2 5 5 , 2 5 5 , . 8 ) ; / * 支持r g b a * / } . t e s t 2 { b a c k g r o u n d - i m a g e : u r l ( t o p . p n g ) ; / * I E 9 + 不支持多背景 * / b a c k g r o u n d - i m a g e : u r l ( d a t a : i m a g e / s v g + x m l ; b a s e 6 4 , . . . . ) , n o n e ; }
53. Selector
54. . p o r t a l . l b f - c o m b o b o x # u s e r - i d . l b f - c o m b o b o x - l a b e l { / * . . . * / } 解析顺序：从右到左
55. # u s e r - i d { / * . . . * / }
56. CSS selector matching is now reasonably fast for the absolute majority of common selectors that used to be slow at the time of the profiler implementation. This time is also included into the Timeline "Recalculate Style" event. As such, I believe the CSS selector profiler is not as useful as it [might have been] used to and can safely be dropped. This will also reduce the fraction of developers trying to micro-optimize already fast selectors.
57. Chrome 的 CSS 选择器匹配性能已经足够快了，Chrome 30中移除了自己的 CSS selector性能分析器 Github 遇到的 CSS 性能挑战
58. 避免冲突 / * i n d e x _ h e a d e r . c s s * / . h e a d e r . c u r r e n t { b a c k g r o u n d : # F E F E F E ; } / * i n d e x _ l i s t . c s s * / . c u r r e n t { b a c k g r o u n d : b l u e ; }
59. / / OOCSS SMACSS BEM
60. BEM
61. / * B l o c k * / . m e n u { d i s p l a y : b l o c k ; } / * E l e m e n t * / . m e n u _ _ i t e m { f l o a t : l e f t ; } / * M o d i f i e r * / . m e n u _ _ i t e m _ c u r r e n t { b a c k g r o u n d - c o l o r : # E F E F E F ; }
62. 优点 减少后代选择器 易重用，可扩展
63. 但是很丑
64. AMCSS
65. 缺点 各种 JS 库支持不够好 开发者的习惯很难改
66. CSS Modules / * c o m p o n e n t s / s u b m i t - b u t t o n . c s s * / . c o m m o n { / * f o n t - s i z e s , p a d d i n g , b o r d e r - r a d i u s * / } . n o r m a l { c o m p o s e s : c o m m o n ; / * b l u e c o l o r , l i g h t b l u e b a c k g r o u n d * / } . e r r o r { c o m p o s e s : c o m m o n ; / * r e d c o l o r , l i g h t r e d b a c k g r o u n d * / } . c o m p o n e n t s _ s u b m i t _ b u t t o n _ _ c o m m o n _ _ a b c 5 4 3 6 { / * f o n t - s i z e s , p a d d i n g , b o r d e r - r . c o m p o n e n t s _ s u b m i t _ b u t t o n _ _ n o r m a l _ _ d e f 6 5 4 7 { / * b l u e c o l o r , l i g h t b l u e b a c k g r . c o m p o n e n t s _ s u b m i t _ b u t t o n _ _ e r r o r _ _ 1 6 3 8 b c d { / * r e d c o l o r , l i g h t r e d b a c k g r o u n
67. / * u t i l . l e s s * / . c l e a r f i x ( ) { / * 清除浮动代码 * / } / * c o m m o n . l e s s * / / * ` g - ` 作为全局模块的前缀 * / . g - h e a d e r { . c l e a r f i x ( ) ; } / * p a g e / i n d e x . l e s s * / / * ` p a g e - ` 作为页面c l a s s 的前缀 * / . p a g e - i n d e x { / * 页面模块B l o c k 名 * / . h e a d e r { . c l e a r f i x ( ) ; / * 页面模块中的E l e m e n t * / & - m e n u { / * . . . * / } / * 尽可能使用标签，确保 H T M L 语义化 * / & - m e n u l i { f l o a t : l e f t ; } / * E l e m e n t 的状态名 * / / * 非B l o c k 命名尽量简写，` c u r = = = c u r r e n t ` * /
68. Javascript 用 ID 选择器，CSS 用 Class 选择器 尽量做到“行为和样式分离”
69. JAVASCRIPT 单线程
71. s e t T i m e o u t ( f u n c t i o n ( ) { c o n s o l e . l o g ( 1 ) ; } , 0 ) ; c o n s o l e . l o g ( 2 ) ;
72. 字符串拼接
73. v a r r e s u l t = ' ' + ' < h 1 > ' + t i t l e + ' < / h 1 > ' + ' < p > ' + c o n t e n t + ' < / p > ' ; v a r r e s u l t = [ ' < h 1 > ' + t i t l e + ' < / h 1 > ' , ' < p > ' + c o n t e n t + ' < / p > ' ] . j o i n ( ' ' ) ;
74. Array.join > +操作符 只是在旧浏览器下（IE7-），现代浏览器中差不多 性能测试
75. String.replace 或者模板引擎更好 v a r t p l = ' ' + ' < h 1 > { t i t l e } < / h 1 > ' + ' < p > { c o n t e n t } < / p > ' ; v a r t e m p l a t e = f u n c t i o n ( t p l , d a t a ) { r e t u r n t p l . r e p l a c e ( / { ( [ ^ } ] + ) } / g , f u n c t i o n ( r , $ 0 ) { r e t u r n d a t a [ $ 0 ] | | ' ' ; } ) ; } ; v a r r e s u l t = t e m p l a t e ( t p l , { t i t l e : ' 标题' , c o n t e n t : ' 内容' } ) ;
76. 优势 直观可读性好 模板字符串可复用 模板默认提供转义，更安全 JS压缩引擎可以合并字符串，压缩后没有 + 操作符
77. ES2015 / ES6 的模板字符串 v a r d a t a = { t i t l e : ' 标题' , c o n t e n t : ' 内容' } ; v a r r e s u l t = ` < h 1 > $ { d a t a . t i t l e } < / h 1 > < p > $ { d a t a . c o n t e n t } < / p > ` ;
78. 正则表达式
79. MDN String.prototype.match() String.prototype.replace() RegExp.prototype.exec()
80. 11年 Twitter 改版
81. 引入了无限滚动特性 页面滚动时速度变的很慢！ jQuery 1.4.2 升级到 1.4.4
82. 定位Bug $ ( w i n d o w ) . b i n d ( ' s c r o l l ' , f u n c t i o n ( ) { i f ( n e a r B o t t o m O f P a g e ( ) ) { / / l o a d m o r e t w e e t s . . . } } ) ; $ d e t a i l s . f i n d ( ' . d e t a i l s - p a n e - o u t e r ' ) ;
83. jQuery 1.4.3开始选择器引擎 Sizzle 会优先使用 querySelectorAll
84. / / 1 . 4 . 2 d o c u m e n t . g e t E l e m e n t s B y C l a s s N a m e ( ' d e t a i l s - p a n e - o u t e r ' ) ; / / 1 . 4 . 4 d o c u m e n t . q u e r y S e l e c t o r A l l ( ' d e t a i l s - p a n e - o u t e r ' ) ;
85. v a r d i v s = d o c u m e n t . g e t E l e m e n t s B y T a g N a m e ( " d i v " ) ; v a r i = 0 ; w h i l e ( i < d i v s . l e n g t h ) { d o c u m e n t . b o d y . a p p e n d C h i l d ( d o c u m e n t . c r e a t e E l e m e n t ( " d i v " ) ) ; i + + ; } 这是一个死循环！
86. Live NodeList 快 Static NodeList 慢
87. 为什么 getElementsByTagName() 比 querySelectorAll() 快？
88. DOM 查询结果需要重用时一定要缓存 绑定重复触发的事件时（例如window scroll 事件）一定 要做 throttle 或 debounce
89. Throttle 和 Debounce
90. - 阻止事件触发直到N段时间后 - 限制事件触发频率 debounce throttle
91. throttle 和 debounce 的区别
92. 记录页面的 A 标签的点击事件
93. $ ( ' a ' ) . c l i c k ( f u n c t i o n ( e ) { d o s o m e t h i n g ( ) ; } ) ; v a r l i n k s = d o c u m e n t . g e t E l e m e n t s B y T a g N a m e ( ' a ' ) ; f o r ( v a r i = 0 , l = l i n k s . l e n g t h ; i < l ; i + + ) { l i n k s [ i ] . o n c l i c k = ( f u n c t i o n ( l i n k ) { d o s o m e t h i n g ( ) ; } ) ( l i n k s [ i ] ) ; } 链接多了之后很慢！
94. 事件代理
95. 捕获与冒泡
96. d o c u m e n t . b o d y . a d d E v e n t L i s t e n e r ( ' c l i c k ' , f u n c t i o n ( e ) { e . p r e v e n t D e f a u l t ( ) ; v a r t a r g e t = e . t a r g e t ; v a r i s L i n k = t a r g e t . n o d e N a m e = = = ' A ' ; i f ( i s L i n k ) { / / 记录操作 } } , f a l s e ) ; $ ( ' b o d y ' ) . o n ( ' c l i c k ' , ' a ' , f u n c t i o n ( ) { / / 记录操作 } ) ;
97. 优势 能处理动态更新的DOM元素 DOM元素很多时，有性能优势
98. DOM 操作
99. relayout / reflow - 重新计算节点的位置 repaint - 重新绘制节点到屏幕上 composite - GPU 合成
101. 渲染流程
102. Layout Thrashing
103. / / 读 v a r h e i g h t = e l e m e n t . c l i e n t H e i g h t ; / / 写 e l e m e n t . s t y l e . h e i g h t = ( h e i g h t + 2 ) + ' p x ' ; / / 写 e l e m e n t . s t y l e . h e i g h t = ( h e i g h t + 3 ) + ' p x ' ; 浏览器优化之后，会把DOM操作放到一个队列里面。在将 来的某个时候执行（例如屏幕刷新前）
104. / / 读 v a r h e i g h t 1 = e l e m e n t 1 . c l i e n t H e i g h t ; / / 写 e l e m e n t 1 . s t y l e . h e i g h t = ( h e i g h t 1 + 2 ) + ' p x ' ; / / 读 v a r h e i g h t 2 = e l e m e n t 2 . c l i e n t H e i g h t ; / / 写 e l e m e n t 2 . s t y l e . h e i g h t = ( h e i g h t 2 + 2 ) + ' p x ' ; 此时第二次读操作执行前，会强迫浏览器 relayout 一次， 这样才能计算得到新的 height
105. / / 读 v a r h e i g h t 1 = e l e m e n t 1 . c l i e n t H e i g h t ; / / 读 v a r h e i g h t 2 = e l e m e n t 2 . c l i e n t H e i g h t ; / / 写 e l e m e n t 1 . s t y l e . h e i g h t = ( h e i g h t 1 + 2 ) + ' p x ' ; / / 写 e l e m e n t 2 . s t y l e . h e i g h t = ( h e i g h t 2 + 2 ) + ' p x ' ; 读写分离，减少 layout thrashing
106. f u n c t i o n c a l l 1 ( ) { / / 读 v a r h e i g h t 1 = e l e m e n t 1 . c l i e n t H e i g h t ; / / 写 e l e m e n t 1 . s t y l e . h e i g h t = ( h e i g h t 1 + 2 ) + ' p x ' ; } f u n c t i o n c a l l 2 ( ) { / / 读 v a r h e i g h t 2 = e l e m e n t 2 . c l i e n t H e i g h t ; / / 写 e l e m e n t 2 . s t y l e . h e i g h t = ( h e i g h t 2 + 2 ) + ' p x ' ; } c a l l 1 ( ) ; c a l l 2 ( ) ; 不一定 DOM 操作都在一个方法体里面
107. f u n c t i o n c a l l 1 ( ) { / / 读 v a r h e i g h t 1 = e l e m e n t 1 . c l i e n t H e i g h t ; / / 写 r e q u e s t A n i m a t i o n F r a m e ( f u n c t i o n ( ) { e l e m e n t 1 . s t y l e . h e i g h t = ( h e i g h t 1 + 2 ) + ' p x ' ; } ) ; } f u n c t i o n c a l l 2 ( ) { / / 读 v a r h e i g h t 2 = e l e m e n t 2 . c l i e n t H e i g h t ; / / 写 r e q u e s t A n i m a t i o n F r a m e ( f u n c t i o n ( ) { e l e m e n t 2 . s t y l e . h e i g h t = ( h e i g h t 2 + 2 ) + ' p x ' ; } ) ; } Fast dom
108. 合成线程
109. css triggers
110. 话说回来，一般调用没那么频繁。只是特殊情况下（动 画）需要注意优化
111. No Rules! Just Tools!
112. Q & A