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 >
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 ) ;
" 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 ) ;
" 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 >
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 不能确保执行顺序
typesetting industry. 这是一个行内块级元素 display: inline-block; 。Lorem Ipsum is simply dummy text of the printing and typesetting industry. DEMO 行内块级元素，一行之内横向的排列，宽高起作用
" 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 >
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 ; / * 右浮动 * / }
" 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 >
/ 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 实现兼容
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 ; }
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.
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 ; }
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 ; }
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
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 ` * /
' ' + ' < 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 ( ' ' ) ;
' + ' < 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 : ' 内容' } ) ;
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 > ` ;
. 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 ' ) ;
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 ' ) ;
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 + + ; } 这是一个死循环！
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 ] ) ; } 链接多了之后很慢！
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 ( ) { / / 记录操作 } ) ;
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操作放到一个队列里面。在将 来的某个时候执行（例如屏幕刷新前）
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
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
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 操作都在一个方法体里面
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
nagix
hiracky16
oracle4engineer
mixi_engineers
soracom
hacobu
nejumi
ren8k
mochico50
asanoharuki
shlominoach
nikkihalliwell
jonrohan
scottboms
inesmontani
katarinadahlin
andyhume
reverentgeek
danielanewman
ivargrimstad
garrettdimon
codingconduct
