High performance JavaScript and CSS

The entire web is married to JavaScript. That’s not the fact. Fact is the guys who are cooking for the web, is crazy about JavaScript. Hence, you cannot imagine a single website (desktop or mobile) without JavaScript. Saving the marriage is not an option when your world is occupied by your better half in loading resources, delicious libraries, fancy charts/ visualization, two way binding, interactions with DOM, responsive U,I so and so on...
When JavaScript do the core work like (grocery, taking dogs to walk/ kids to child care, weekends/ vacation plan, marathon shopping) CSS makes your site interesting. CSS performance is the silent killer that we always ignore.
The goal of this talk is not to save the marriage rather to make the marriage most enjoyable, highly interesting and tremendously performing. High performance doesn’t have to some miracle that somehow works. After this talk, you would be the guy who rocks for high performance JavaScript and CSS. And you will believe, high performance code could reusable, readable and maintainable.

Transcript

1. High Performance JS & CSS / http://bit.ly/1gx0FRU MD Khan @mdkhan005
2. Performance matters ! ! ! !
3. Optimization :- Subjective Could be Expensive Not Always Valid Don't Guess, Measure it
4. Expectations !!! Browser CSS JavaScript Debug
5. Browser
6. Browser Versions Bugs Changing
7. Why learn about Browser? Play Ground Geek / Freak
8. How Browser Works
9. Your Html 1 . < h t m l > 2 . < b o d y > 3 . < p > 4 . H e l l o W o r l d 5 . < / p > 6 . < d i v > 7 . < i m g s r c = " e x a m p l e . p n g " / > 8 . < / d i v > 9 . < / b o d y > 1 0 . < / h t m l >
11. Validate Html Don’t Just Wrap a DIV Around It Make HTML Parsing Easier 30 CSS Best Practices
12. Style p , d i v { m a r g i n - t o p : 3 p x ; } . e r r o r { c o l o r : r e d ; }
14. Render Tree
15. So far
16. Layout CSS Layout Engines
17. Paint
18. Avoid Change Minimum change Don't change Layout Change Background Color Change Text Color Visibility: hidden
19. Re paint
20. More Changes => More Work
21. Change Layout Change Width / Height Change Font Move DOM Node Resize Window Display: none
22. Re Flow
23. Avoid Re flow Use DOM DocumentFragment Clone the DOM John Resig: DOM DocumentFragment MDN: DocumentFragment Re flow Layout JS best practices Nicholas Zakas: 10 JS Performance Boosting
24. CSS Selectors
26. ID 1 . < s t y l e > < / s t y l e > 7 . 8 . < d i v > 9 . < p i d = " m y F i r s t T O D O " > h a v e t o s h o w e r < / p > 1 0 . < p > h a v e t o s h a v e < / p > 1 1 . < p > h a v e t o c u t h a i r < / p > 1 2 . < p > b u y p e r f u m e < / p > 1 3 . < p > a t l e a s t b u y t s h i r t < / p > 1 4 . < / d i v > 2 . # m y F i r s t T O D O 3 . { 4 . c o l o r : r e d ; 5 . } 6 .
27. Class 1 . < s t y l e > < / s t y l e > 8 . 9 . < d i v > 1 0 . < p > h a v e t o s h o w e r < / p > 1 1 . < p c l a s s = " g r e e n B o l d " > h a v e t o s h a v e < / p > 1 2 . < p c l a s s = " g r e e n B o l d " > h a v e t o c u t h a i r < / p > 1 3 . < p > b u y p e r f u m e < / p > 1 4 . < p > a t l e a s t b u y t s h i r t < / p > 1 5 . < / d i v > 2 . . g r e e n B o l d 3 . { 4 . c o l o r : g r e e n ; 5 . f o n t - w e i g h t : b o l d ; 6 . } 7 .
28. Immediate Children 1 . < s t y l e > < / s t y l e > 8 . 9 . < d i v > 1 0 . < u l > 1 1 . < l i > L i s t I t e m 1 2 . < u l > 1 3 . < l i > C h i l d < / l i > 1 4 . < / u l > 1 5 . < / l i > 1 6 . < l i > L i s t I t e m < / l i > 1 7 . < l i > L i s t I t e m < / l i > 1 8 . < l i > L i s t I t e m < / l i > 1 9 . < / u l > 2 0 . < / d i v > 2 . l i > u l 3 . { 4 . c o l o r : g r e e n ; 5 . f o n t - w e i g h t : b o l d ; 6 . } 7 .
29. Descendent # m y T O D O p { c o l o r : g r e e n ; f o n t - w e i g h t : b o l d ; }
30. Fancy Selectors div + p { /*Adjacent*/ } div ~ p { /*Sibling*/ } input[type="checkbox"] { /*Attribute*/} p:first-child { /*pseudo*/} Advanced CSS Selectors
31. You can Doesn't mean you should Better Quality CSS Best Practices are killing us CSS Optimization
32. ID - #myID Class – .myClass Tag – div Sibling – div + p, div ~ p Child – div > p
33. Descendant – div p Universal – div * Attribute – input[type="checkbox"] Pseudo – p:first-child Efficient CSS Selector Faster HTML and CSS
34. This doesn't mean everything should be ID ID and Class: Almost Similar DRY, Readable & Maintainable Fast Difference between ID and Class
35. CSS Try to Avoid Rendering Best practices Google: Optimize Browser Rendering
36. Universal Key Selector b o d y * { c o l o r : # 3 6 5 2 7 7 ; } . h i d e - s c r o l l b a r s * { f o n t - s i z e : 1 6 p x ; }
37. When you can't read easily. Same to Browser # m y D i v u l l i b u t t o n { w i d t h : 2 0 0 p x ; } # m y D i v u l l i : n t h - c h i l d ( 2 ) l i : n t h - c h i l d ( 7 ) > a { c o l o r : r e d ; }
38. Use class . b t n M e d i u m { w i d t h : 2 0 0 p x ; } . m y C l a s s { c o l o r : r e d ; }
39. Don't Repeat . u p T r e n d { b a c k g r o u n d - i m a g e : u r l ( ' u p G r e e n . j p g ' ) ; b a c k g r o u n d - r e p e a t : n o - r e p e a t ; b a c k g r o u n d - p o s i t i o n : c e n t e r c e n t e r ; p a d d i n g - l e f t : 2 0 p x ; } . d o w n T r e n d { b a c k g r o u n d - i m a g e : u r l ( ' d o w n R e d . j p g ' ) ; b a c k g r o u n d - r e p e a t : n o - r e p e a t ; b a c k g r o u n d - p o s i t i o n : c e n t e r c e n t e r ; p a d d i n g - l e f t : 2 0 p x ; }
40. Still Repeating . u p T r e n d { b a c k g r o u n d - i m a g e : u r l ( ' u p G r e e n . j p g ' ) c e n t e r c e n t e r n o - r e p e a t ; p a d d i n g - l e f t : 2 0 p x ; } . d o w n T r e n d { b a c k g r o u n d - i m a g e : u r l ( ' d o w n R e d . j p g ' ) c e n t e r c e n t e r n o - r e p e a t ; p a d d i n g - l e f t : 2 0 p x ; }
41. Combine Common Styles . u p T r e n d { b a c k g r o u n d - i m a g e : u r l ( ' u p G r e e n . j p g ' ) ; } . d o w n T r e n d { b a c k g r o u n d - i m a g e : u r l ( ' d o w n R e d . j p g ' ) ; } . u p T r e n d , . d o w n T r e n d { b a c k g r o u n d - r e p e a t : n o - r e p e a t ; b a c k g r o u n d - p o s i t i o n : c e n t e r c e n t e r ; p a d d i n g - l e f t : 2 0 p x ; } DRYer CSS
42. Be as specific as possible. u l l i a { / * M y a w e s o m e a n c h o r * / } * h t m l # a t t i c P r o m o u l l i a { / * M y a w e s o m e r u l e s * / }
43. Redundant selectors u l # t o p _ b l u e _ n a v { . . . } f o r m # U s e r L o g i n { . . . }
44. Check again your child selectors / / d o n ' t t r e e i t e m [ I s I m a p S e r v e r = " t r u e " ] > t r e e r o w > . t r e e - f o l d e r p a n e - i c o n { . . . } / / d o . t r e e - f o l d e r p a n e - i c o n [ I s I m a p S e r v e r = " t r u e " ] { . . . } Mozilla Rendering Guides
45. How CSS Selectors are Matched
46. 1 . < h t m l > 2 . < h e a d > 3 . / / h e a d o m i t t e d d u e t o l a c k o f b r a i n 4 . < / h e a d > 5 . < b o d y > 6 . < h e a d e r > 7 . < h 1 > M y A w e s o m e t i t l e < / h 1 > 8 . < / h e a d e r > 9 . < n a v > 1 0 . < o l > 1 1 . < l i > < a h r e f = " # " > S t a c k O v e r f l o w < / a > < / l i > 1 2 . < l i > < a h r e f = " # " > S t a c k O v e r f l o w < / a > < / l i > 1 3 . < / o l > 1 4 . < / n a v > 1 5 . < s e c t i o n > 1 6 . < d i v > 1 7 . < u l > 1 8 . < l i > < a h r e f = " # " > S t a c k O v e r f l o w < / a > < / l i > 1 9 . < l i > < a h r e f = " # " > S t a c k O v e r f l o w < / a > < / l i > 2 0 . < / u l > 2 1 . < / d i v > 2 2 . < / s e c t i o n > 2 3 . < / b o d y > 2 4 . < / h t m l >
48. li { color: red; } Root level Run only once
49. nav a {color:green;}
50. nav a {color:green;}
51. nav a {color:green;}
52. nav a {color:green;}
53. Browser Evaluates Styles? Right to Left <= CSS hierarchy matching High Performance CSS CSS Code Design
54. CSS Specificity / * T a k e A d v a n t a g e o f C S S s p e c i f i c i t y * / / * c l a s s , i d , i n l i n e , ! i m p o r t a n t * / Estelle Weyl: CSS SpeciFISHity CSS-Tricks: CSS Specificity Understanding CSS MDN: Specificity Specificity calculator Power of Specificity CSS Specificity: Things you should know
55. Unused CSS Detect Unused Css
56. Jank Jank Invaders Debugging and Fixing Jank Jank Free
57. JS try to Avoid
58. Access Same Variable v a r b l a h = d o c u m e n t . g e t E l e m e n t B y I d ( ' m y I D ' ) ; v a r b l a h 2 = d o c u m e n t . g e t E l e m e n t B y I d ( ' m y I D 2 ' ) ; v a r b l a h 3 = d o c u m e n t . g e t E l e m e n t B y I d ( ' m y I D 3 ' ) ; v a r b l a h = d o c u m e n t . g e t E l e m e n t B y I d ( ' m y I D ' ) , b l a h 2 = d o c u m e n t . g e t E l e m e n t B y I d ( ' m y I D 2 ' ) , b l a h 3 = d o c u m e n t . g e t E l e m e n t B y I d ( ' m y I D 3 ' ) ;
59. Localize variable v a r d o c = d o c u m e n t , b l a h = d o c . g e t E l e m e n t B y I d ( ' m y I D ' ) , b l a h 2 = d o c . g e t E l e m e n t B y I d ( ' m y I D 2 ' ) , b l a h 3 = d o c . g e t E l e m e n t B y I d ( ' m y I D 3 ' ) ;
60. My For Loop f o r ( v a r i = 0 ; i < s o m e A r r a y . l e n g t h ; i + + ) { v a r c o n t a i n e r = d o c u m e n t . g e t E l e m e n t B y I d ( ' c o n t a i n e r ' ) ; c o n t a i n e r . i n n e r H t m l + = ' m y n u m b e r : ' + i ; c o n s o l e . l o g ( i ) ; }
61. Cache outside of loop v a r c o n t a i n e r = d o c u m e n t . g e t E l e m e n t B y I d ( ' c o n t a i n e r ' ) ; f o r ( v a r i = 0 ; i < s o m e A r r a y . l e n g t h ; i + + ) { c o n t a i n e r . i n n e r H t m l + = ' m y n u m b e r : ' + i ; c o n s o l e . l o g ( i ) ; }
62. Little More!!! v a r c o n t a i n e r = d o c u m e n t . g e t E l e m e n t B y I d ( ' c o n t a i n e r ' ) ; f o r ( v a r i = 0 , l e n = s o m e A r r a y . l e n g t h ; i < l e n ; i + + ) { c o n t a i n e r . i n n e r H t m l + = ' m y n u m b e r : ' + i ; c o n s o l e . l o g ( i ) ; }
63. Use === than == When you don't actually know whether they are same type 0 = = ' ' ; / / t r u e 0 = = = f a l s e ; / / f a l s e i f ( ( x = = = n u l l ) | | ( x = = = u n d e f i n e d ) ) { . . . } i f ( x = = n u l l ) { . . . } t y p e o f t h i n g = = ' f u n c t i o n ' ; / / a l w a y s b e s t r i n g m y A r r a y . l e n g t h = = 0 ; / / w i l l a l w a y s b e n u m b e r m y S t i n g . i n d e x O f ( ' x ' ) = = 0 ; bReaK aLL thE RuleZ
64. Initialize if Undefined i f ( ! M y N a m e s p a c e ) { v a r M y N a m e s p a c e = { } ; } / / o r v a r m y N a m e s p a c e = m y N a m e s p a c e | | { } ; / / o r h t t p : / / j s p e r f . c o m / c o n d i t i o n a l - a s s i g n m e n t / / m y N a m e s p a c e | | ( m y N a m e s p a c e = { } ) ; / / o r i f ( t y p e o f M y N a m e s p a c e = = ’ u n d e f i n e d ’ ) { v a r M y N a m e s p a c e = { } ; } Nokia: JS Best Practice
65. JavaScript: String
66. String Concatenation v a r t i n y M e s s a g e = ' T r u s t m e , i s t a r t e d o n e l i n e ' + ' D e s i g n e r t o l d m e h e w a n t s l i t t l e m o r e ' + ' I a d d e d l i t t l e m o r e ' + ' M a n a g e r s a i d , t h i s i s n o t e n o u g h ' + " H e d i d n ' t s a i d w h a t t o a d d " + ' J u s t s a i d a d d ' + " I d i d n ' t k n o w w h a t t o a d d " + ' S o i a d d e d a s l i c e o f p i z z a ' + ' C l i e n t s a i d t h i s i s s t u p i d ' + ' M a n a g e r s a i d , c l i e n t i s r i g h t ' ; Optimize JavaScript
67. [ ].join(' ') v a r t i n y M e s s a g e = [ ' T r u s t m e , i s t a r t e d o n e l i n e ' , ' D e s i g n e r t o l d m e h e w a n t s l i t t l e m o r e ' , ' I a d d e d l i t t l e m o r e ' , ' M a n a g e r s a i d , t h i s i s n o t e n o u g h ' , " H e d i d n ' t s a i d w h a t t o a d d " , ' J u s t s a i d a d d ' , " I d i d n ' t k n o w w h a t t o a d d " , ' S o i a d d e d a s l i c e o f p i z z a ' , ' C l i e n t s a i d t h i s i s s t u p i d ' , ' M a n a g e r s a i d , c l i e n t i s r i g h t ' ] . j o i n ( ' ' ) ; array-join-vs-string-connect Why is string concatenation faster than array join fastest-way-to-build-this-string
68. Your Own String Builder v a r s t r B u i l d e r = [ ' F i r s t 2 0 f i b o n a c c i n u m b e r s : ' ] ; f o r ( v a r i = 0 ; i < 2 0 ; i + + ) { s t r B u i l d e r . p u s h ( i , ' = ' , f i b o n a c c i ( i ) ) ; } v a r f i b o n a c c i S t r = s t r B u i l d e r . j o i n ( ' ' ) ;
69. Object Vs Array
70. Array Same Type Use Full Array Avoid Pre-allocate Grow as you Go Type Inference Performance Sparse vs Full Arrays Pre-allocated Arrays
71. / / D o n ' t d o t h i s : a = [ ] ; / / e x e c u t o r k n o w s n o t h i n g f o r ( v a r i = 1 ; i < = 4 ; i + + ) { a . p u s h ( i ) ; } / / j u s t d o i t : v a r a = [ 1 , 2 , 3 , 4 ] ;
72. Delete is not delete v a r m y A r r a y = [ 1 , 2 , 3 , 4 , 5 , 6 ] ; / / m y A r r a y . l e n g t h = 6 d e l e t e m y A r r a y [ 2 ] ; m y A r r a y ; / / [ 1 , 2 , u n d e f i n e d × 1 , 4 , 5 , 6 ] c o n s o l e . l o g ( m y A r r a y . l e n g t h ) ; / / 6 c o n s o l e . l o g ( m y A r r a y [ 2 ] ) ; / / u n d e f i n e d
73. Array.splice m y A r r a y . s p l i c e ( 2 , 1 ) ;
74. Objects Varying types properties Integer-indexed Objects is always faster Use Object.Create() Object.create() vs. constructor vs. object literal
75. Delete is not delete v a r o = { x : 1 } ; d e l e t e o . x ; / / t r u e o . x ; / / u n d e f i n e d
76. Let GC Breathe
78. Holding references f u n c t i o n g e t L a r g e T h i n g ( x ) { v a r a = f u n c t i o n ( ) { v a r l a r g e S t r = n e w A r r a y ( 1 0 0 0 0 0 0 ) . j o i n ( ' x ' ) ; r e t u r n f u n c t i o n ( ) { r e t u r n l a r g e S t r ; } ; } ( ) ; Fast Memory Efficient JavaScript
79. Trust Arguments i f ( c a l l b a c k & & t y p e o f c a l l b a c k = = = " f u n c t i o n " ) { / * r e s t o f y o u r l o g i c * / } e l s e { / * n o t a v a l i d f u n c t i o n * / } JavaScript Code Review
80. Momoization
81. Memoization v a r f i b o n a c c i = f u n c t i o n ( n ) { r e t u r n n < 2 ? n : f i b o n a c c i ( n - 1 ) + f i b o n a c c i ( n - 2 ) ; } ; f o r ( v a r i = 0 ; i < = 1 0 ; i + = 1 ) { c o n s o l e . l o g ( i + ' : ' + f i b o n a c c i ( i ) ) ; } / / 0 : 0 / / 1 : 1 / / 2 : 1 / / 3 : 2 / / 4 : 3 / / 5 : 5 / / 6 : 8 / / 7 : 1 3 / / 8 : 2 1 / / 9 : 3 4 / / 1 0 : 5 5
82. JavaScript: Good Parts v a r f i b o n a c c i = ( f u n c t i o n ( ) { v a r m e m o = [ 0 , 1 ] ; v a r f i b = f u n c t i o n ( n ) { v a r r e s u l t = m e m o [ n ] ; i f ( t y p e o f r e s u l t ! = = ' n u m b e r ' ) { r e s u l t = f i b ( n - 1 ) + f i b ( n - 2 ) ; m e m o [ n ] = r e s u l t ; } r e t u r n r e s u l t ; } ; r e t u r n f i b ; } ) ( ) ;
83. General Memoization F u n c t i o n . p r o t o t y p e . m e m o i z e = f u n c t i o n ( ) { v a r s e l f = t h i s , c a c h e = { } ; r e t u r n f u n c t i o n ( a r g ) { i f ( a r g i n c a c h e ) { c o n s o l e . l o g ( ' C a c h e h i t f o r ' + a r g ) ; r e t u r n c a c h e [ a r g ] ; } e l s e { c o n s o l e . l o g ( ' C a c h e m i s s f o r ' + a r g ) ; r e t u r n c a c h e [ a r g ] = s e l f ( a r g ) ; } } } Addy Osmani: Faster JS Memoization
84. Implement general Memoize f u n c t i o n f o o B a r ( a ) { . . . } / / o n c e a m e m o i z e r i s a v a i l a b l e , u s a g e i s a s s i m p l e a s v a r m e m o F o o B a r = f o o B a r . m e m o i z e ( ) ; m e m o F o o B a r ( 1 ) ; / / a r e c o n d u c t e d . T h i s r e s u l t i s t h e n c a c h e d f o r n e x t t i m e . m e m o F o o B a r ( 1 ) ; / / w i l l n o w r e t u r n t h e c a c h e d r e s u l t m e m o F o o B a r ( 2 ) ; / / w h i l s t t h i s w i l l n e e d t o b e c a l c u l a t e d Addy Osmani: Optimized Memoization Library
85. JavaScript Others
86. Reduce Global v a r c u r r e n t = n u l l ; f u n c t i o n i n i t ( ) { . . . } f u n c t i o n c h a n g e ( ) { . . . } f u n c t i o n v e r i f y ( ) { . . . } v a r m y N a m e S p a c e = { c u r r e n t : n u l l , i n i t : f u n c t i o n ( ) { . . . } , c h a n g e : f u n c t i o n ( ) { . . . } , v e r i f y : f u n c t i o n ( ) { . . . } } m y N a m e S p a c e . i n i t ( ) ; W3.org JS best practice JS 24 best practices
87. Self executing function ( f u n c t i o n ( ) { v a r c u r r e n t = n u l l ; f u n c t i o n i n i t ( ) { . . . } f u n c t i o n c h a n g e ( ) { . . . } f u n c t i o n v e r i f y ( ) { . . . } } ) ( ) ;
88. Debounce & Throttle Debounce: Example
89. Re-think try-catch Rethink: Try-catch
90. Use Strict Mode / / N o n - s t r i c t c o d e . . . ( f u n c t i o n ( ) { " u s e s t r i c t " ; / / D e f i n e y o u r l i b r a r y s t r i c t l y . . . } ) ( ) ; / / N o n - s t r i c t c o d e . . . John Resig: Strict Mode
91. Know Javascript Engine Know V8 Hidden Class Avoid Memory Leaks Compile browser Memory Efficient JS
92. JQuery
93. Don't use it for 3 lines of Code Script as Last Tag of body Self Executing function Copy ready: function from JQuery $ ( d o c u m e n t ) . r e a d y ( f u n c t i o n ( ) { a l e r t ( ' d o c u m e n t i s r e a d y . I c a n s l e e p n o w ' ) ; } ) ; d o c u m e n t . o n r e a d y s t a t e c h a n g e = f u n c t i o n ( ) { / / d o c u e m n t r e a d y . d o n t w o r k f o r o l d e r b r o w s e r o r I E i f ( d o c u m e n t . r e a d y S t a t e = = " c o m p l e t e " ) { a l e r t ( ' d o c u m e n t i s r e a d y . I c a n s l e e p n o w ' ) ; } } 5-things-you-should-stop-doing-with-jquery
94. Selector Repetition $ ( ' # m y T e x t ' ) . c s s ( " c o l o r " , " b l u e " ) ; $ ( ' # m y T e x t ' ) . c s s ( " f o n t - s i z e " , " 1 . 2 e m " ) ; $ ( ' # m y T e x t ' ) . t e x t ( " T e x t c h a n g e d ! " ) ; / / c h a i n i t o r c a c h e i t $ ( ' # m y T e x t ' ) . c s s ( { " c o l o r " : " b l u e " , " f o n t - s i z e " : " 1 . 2 e m " } ) . t e x t ( " T e x t c h a n g e d ! " ) ; / / b e t t e r . m y C l a s s { c o l o r : b l u e ; f o n t - s i z e : 1 . 2 e m ; } / / a p p l y c l a s s n o t s t y l e $ ( ' # m y T e x t ' ) . a d d C l a s s ( ' m y C l a s s ' ) . t e x t ( " T e x t c h a n g e d ! " ) ; Efficient JQuery Selector
95. Use Sub queries Remember :=> JQuery is not Database < u l c l a s s = " n a v " > < l i > L i s t 1 , i t e m 1 < / l i > < l i > L i s t 1 , i t e m 2 < / l i > < l i > L i s t 1 , i t e m 3 < / l i > < / u l > < u l c l a s s = " n a v " > < l i > L i s t 2 , i t e m 1 < / l i > < l i > L i s t 2 , i t e m 2 < / l i > < l i > L i s t 2 , i t e m 3 < / l i > < / u l > $ ( " u l . n a v l i : e q ( 1 ) " ) . c s s ( " b a c k g r o u n d C o l o r " , " # f f 0 " ) ; / / b e t t e r $ ( " u l . n a v " ) . e a c h ( f u n c t i o n ( i n d e x ) { $ ( t h i s ) . f i n d ( " l i : e q ( 1 ) " ) . c s s ( " b a c k g r o u n d C o l o r " , " # f f 0 " ) ; } ) ; jquery-performance-rules 15-powerful-jquery-tips-and-tricks
96. Jquery Also ! Right to left Jquery Right to left Your jQuery: Now With 67% Less Suck JSPerf: Jquery Right to Left Why Right to Left
97. Performance Debug JS Profiling Profiles Performance Secret: Peter Flynn
98. Performance Debug v a r s t a r t = p e r f o r m a n c e . n o w ( ) ; / / e x e c u t e y o u r f u n c t i o n f o o b a r ( ) ; v a r e n d = p e r f o r m a n c e . n o w ( ) ; c o n s o l e . l o g ( s t a r t - e n d + ' m s ' ) ; Axel Rauschmayer: JS Console API CodeSchool: Discover Dev Tools Using the console Console API
99. Rectangle Settings
100. Memory Profiling JS Memory Profiling Leak Finder
101. chrome://tracing Tracing paint operations Tracing Flag
102. Break Everything I have said \ / As Long As YOU know what YOU ARE doing Break All the Rules
103. Review Your Code JSMentors Code Review
104. Fun with JavaScript
105. WAT! Gary Bernhardth CodeMash 2012
106. JS Wizardy Martin Kleppe: JS Conf EU
107. promise().then() JavaScipt Ninja UnderScore or JQuery source code High Performance Browser Network asm.js: JS compile Target Lo-dash
108. Take Away Nothing is absolutely right trust Tools, not Rules Angus Croll: Break all the rules
109. Thank You / http://bit.ly/1gx0FRU MD Khan @mdkhan005