The Secrets of High-Performance Mobile JavaScript Applications

________

Video of the Presentation Is Available Here »»
https://www.protechtraining.com/blog/post/811
________

My discussion revolves around the following subject matters:

A deeply object-oriented architecture may be shooting yourself in the foot;
Not using a library/framework should be the way to go, if you can;
You should be as lean as possible (i.e., the less objects you create, the better; the less the size of DOM, the better… and you might need special techniques like DOM sharding)
The bottom line is, being minimalistic is your friend:

If you need a banana, don't pass a gorilla that holds the banana and the entire jungle with it.
You can create applications that perform quite like their native counterparts, if you pay some extra attention to details.

And I will try to show you a way, and talk about real-life best practices to make your single page, fat client, hybrid JavaScript web application as snappy as its native counterparts.

Transcript

1. a practical guide as you rush down the uncanny rabbit hole The Secrets of High Performance Mobile JavaScript Applications ! Volkan Özçelik! me@volkan.io! ! #html5devconf 2014! 05/22/2014
2. Time is Candy
3. About Me ❖ Mobile Engineer @ jivesoftware.com ! ❖ @linkibol! ❖ volkan.io! ❖ github.com/v0lkan
4. Resources Slides & Source Code:! volkan.io
5. In a Nutshell…
6. Is It Possible to Have This…
7. … While We Have These Constraints
8. … And This Runtime Environment
9. Before We Begin…
10. Mobile Limitations & Challenges
11. Mobile Constraints ❖ Network (Radio)! ❖ Battery! ❖ Memory! ❖ Processing Power
12. What Kills Your Battery
13. What Kills Your Battery ❖ Network Requests (#1)! ❖ JavaScript (#2)! ❖ Images (#3)! ❖ DOM (#4)
14. Mobile Desktop
15. Need4Speed image credits: http://gamefanmag.com
16. Need4Speed ❖ Network Faster! ❖ Render Faster! ❖ Cache Faster! ❖ React Faster! ❖ Execute Faster
17. Network Faster
18. Network Faster ❖ Network is Expensive! ❖ Network is Unreliable! ❖ Latency Kills
19. Latency Kills http://www.lukew.com/ff/entry.asp?1797
20. Latency Kills http://www.lukew.com/ff/entry.asp?1797
21. Network Faster ❖ Reduce # of HTTP Requests! ❖ Use Smart Caching Techniques! ❖ Decouple UX From Network Activities
22. Abstract Your Data Access
23. Abstract Your Data Access
24. Abstraction
25. Abstraction
26. Abstraction
27. Abstraction
28. Abstraction
29. Latency ❖ It’s not bandwidth; it is latency.! ❖ Mobile network requests are expensive.! ❖ More than you think. [1] [1] http://www.igvita.com/2014/03/26/why-is-my-cdn-slow-for-mobile-clients/
30. Latency ❖ Latency is High! ❖ Latency is Highly Variable! 
 ❖ Have an Offline Mode! ❖ Cache Your Responses! ❖ Have an Intelligent Retry Strategy
31. Render Faster
32. Render Faster ❖ Avoid Expensive CSS (shadows, gradients…)! ❖ Avoid Excessive Animations! ❖ Always Use CSS To Animate
33. Render Faster ❖ Use Simple Logicless Templates! ❖ Do Not Nest Templates! ❖ Do Not Nest View Objects
34. Don’t Touch the DOM image credits: ! derekhunter.deviantart.com
35. Avoid Expensive DOM & CSS * You can also use “continuous repaint mode” of Chrome Dev Tools * Opera has a CSS profiler too: http://dev.opera.com/
36. Do Not Nest View Objects
37. Do Not Nest View Objects
38. Do Not Nest View Objects
39. Do Not Nest View Objects
40. Do Incremental UI Updates
41. Do Incremental UI Updates
42. Do Incremental UI Updates
43. Jank Busting ❖ Avoid Jankiness (http://jankfree.org)! ❖ You Have Only 16ms Per Frame;! ❖ Have a Consistent Frame Rate;! ❖ Show Love to requestAnimationFrame. RELATED TALK — make sure to attend this, too! »» ! http://html5devconf.com/speakers/tom_wiltzius.html
44. GPU Acceleration ❖ transform: translateZ(0);! ❖ Use Only When Necessary! ❖ Always Be Testing http://aerotwist.com/blog/on-translate3d-and-layer-creation-hacks/ RELATED TALK — make sure to attend this, too! »» ! http://html5devconf.com/speakers/dave_arel.html
45. 60fps Is not Only for Games ❖ Scrolling! ❖ Orientation Change! ❖ Changing & Refreshing Views! ❖ User Gestures (swiping, zooming, panning)
46. Scrolling Image Credits: http://addyosmani.com/blog/tag/slow-scrolling/
47. Scrolling ❖ Is a Harder Problem Than You Think! ❖ Infinite Scroll === Infinite Memory! ❖ Remove Items Outside the Viewport! ❖ Try To Use Fixed-Height Containers! ❖ Cache DOM Attributes! ❖ Use requestAnimationFrame! ❖ Use Object Pools! ❖ Re-Use a Pool of DOM Nodes
48. Cache Faster
49. Cache Faster ❖ problem: Network Requests are Expensive! ❖ solution: Batch Your Requests & Cache Your Responses
50. Where Can I Cache ! ❖ HTML5 Application Cache Sucks! ❖ IndexedDB: Has Compatibility Issues! ❖ WebSQL: No Longer Supported! ❖ Local Storage Is the Simplest and the Fastest
51. Simpler Is Better ❖ Use localStorage as Much as You Can
52. Cache Wisely ❖ localStorage Is Limited in Size (5MB Max)! ❖ You Can Store Part of The Data! ❖ You Can Decrease the Response Payload! ❖ You Can Compress the Data! ❖ With Some Decompression Overhead [1] [1] http://pieroxy.net/blog/pages/lz-string/index.html
53. Cache Wisely ❖ Have a Single Cache Point! ❖ Cap Size of Each Cache Entry! ❖ Use a LRU Algorithm [1]! ❖ Cache TTL! ❖ Cache Eviction! ❖ JSON.stringify(localStorage).length [1] https://npmjs.org/package/lru-cache
54. React Faster
55. User Feedback Is Everything ❖ Never Block UI! ❖ During a Gesture UI Should Move! ❖ Smooth Animations (<16 ms per frame)! ❖ Smooth Actions (<100ms)
56. Never Block UI
57. Never Block UI
58. Never Block UI
59. Event Handling ❖ Prioritize UI Responsiveness! ❖ Use Event Delegation! ❖ Avoid Frequent Event Attaching / Detaching
60. Prioritize UI Responsiveness
61. Prioritize UI Responsiveness
62. Prioritize UI Responsiveness
63. Prioritize UI Responsiveness
64. Prioritize UI Responsiveness
65. Prioritize UI Responsiveness
66. Event Delegation (Caveat) Main Thread Compositor Thread touchdown
67. Event Delegation (Caveat) Main Thread Compositor Thread touchdown
68. Event Delegation (Caveat) Main Thread Compositor Thread touchdown Busy!
69. Event Delegation (Caveat) Main Thread Compositor Thread touchdown Busy!
70. Event Delegation (Caveat) Main Thread Compositor Thread touchdown Busy! BLOCKED!
71. Event Delegation (Caveat) Main Thread Compositor Thread touchdown Busy! BLOCKED!
72. Event Delegation (Caveat) Main Thread Compositor Thread touchdown Busy! BLOCKED! Bind Close to The Element (for touchdown events)
73. Execute Faster
74. The Big Picture
75. Entropy Always Wins Code Expands to Fill Timeframes Available
76. Know Your Engines ❖ Hidden Classes! ❖ Branch Prediction / Method Inlining! ❖ Background JavaScript Compilation! ❖ Full Compiler / Optimizing Compiler! ❖ Packed vs Holey Arrays! ❖ Fast Property Lookup vs Dictionary Mode! ❖ … https://developers.google.com/v8/design http://wingolog.org/tags/v8
77. Frameworks
78. Frameworks? ❖ Frameworks are Expensive! ❖ They Have Economies of Scale! ❖ They Will Always Be Slower! ❖ Frameworks Increase Your Dependency
79. Frameworks? ❖ Frameworks Need Maintenance! ❖ Patches! ❖ Upgrades! ❖ I am NOT Saying “Don’t Use Them”
80. Frameworks? Think Thrice! A Typical Setup
81. Frameworks? Think Thrice! With a Catch You can do a deeper instrumentation using http://esprima.org/
82. Frameworks? Think Thrice! With a Catch You can do a deeper instrumentation using http://esprima.org/
83. Frameworks? Think Thrice! 0 111.25 222.5 333.75 445 445 jQuery
84. Frameworks? Think Thrice! 0 1750 3500 5250 7000 6469 445 jQuery jQuery + jQ Mobile
85. Frameworks? Think Thrice! 0 1750 3500 5250 7000 6738 6469 445 jQuery jQuery + jQ Mobile jQ + jQM + Underscore
86. Frameworks? Think Thrice! 0 1750 3500 5250 7000 6827 6738 6469 445 jQuery jQuery + jQ Mobile jQ + jQM + Underscore jQ + jQM + US + Backbone
87. Frameworks? Think Thrice! 0 1750 3500 5250 7000 6827 6738 6469 445 jQuery jQuery + jQ Mobile jQ + jQM + Underscore jQ + jQM + US + Backbone ❖ This Is Just to “Warm Up”! ❖ Nothing Is Rendered on the Page Yet
88. Frameworks? Think Thrice!
89. Frameworks? Think Thrice! jQuery +
 jQuery Mobile + 
 Underscore + 
 Backbone +
 Your Business Logic 
 (BLL + DAL + Cache) +
 Helper Plugins =
 
 

90. Frameworks? Think Thrice! jQuery +
 jQuery Mobile + 
 Underscore + 
 Backbone +
 Your Business Logic 
 (BLL + DAL + Cache) +
 Helper Plugins =
 
 

91. Frameworks? Think Thrice! $(‘#baz’) document.getElementById $el.attr(‘foo’) el.getAttribute $(‘.foo .bar > baz’) document.querySelectorAll $(‘.foo’).click(fn) document.addEventListener
92. Memory Leaks ❖ It’s Not Magic! ❖ Extremely Important for Mobile! ❖ Always Be Testing for Leaks! ❖ Manage Memory Wisely! ❖ Object Pools [1] [1] http://buildnewgames.com/garbage-collector-friendly-code/
93. Garbage Collection
94. Garbage Collector
95. Be Garbage Collector Friendly ❖ Use Variables With a Proper Scope! ❖ Create as Little Objects as Possible! ❖ Use Object Pools! ❖ Re-Use Instead of Allocating/Destroying! ❖ Cap Your Pool Size
96. Common Causes of Memory Leaks ❖ The Usual Suspects! ❖ A Global Reference to a Detached Node! ❖ An Event Handler not Being Detached! ❖ A Timer Not Being Cleared! ❖ A Cached Object Not Being Evicted
97. Common Causes of Memory Leaks ❖ The “Not So Usual” Suspects! ❖ Closures (they are controlled memory leaks)! ❖ Any “…er” (Controller, Renderer, Manager, Provider…)! ❖ Any Object That Touches DOM! ❖ Any Object That Acts like a Cache
98. Memory Profiling is Hard I’d Prefer a Root Canal to Heap Profiling Any Given Time
99. Fixing Memory Leaks ❖ Memory Profiling is Hard! ❖ Know What Causes Leaks! ❖ Don’t Create Leaks! ❖ Learn and Use Chrome Dev Tools! ❖ Three Snapshot Technique [1] [1] http://bit.ly/3snapshots
100. Tip: Always Name Your Anonymous Functions
101. Tip: Always Name Your Anonymous Functions * http://kangax.github.io/nfe/
102. Tip: Always Name Your Anonymous Functions * http://kangax.github.io/nfe/
103. Reduce DOM Access ❖ DOM Is a Sync API! ❖ JavaScript is Single-Threaded! ❖ Think As If the UI Thread Is a Node.Js Event Loop! ❖ Yield as Fast as You Can
104. Web Workers ❖ Are Supported in Most of the Mobile Platforms! ❖ Yield Computationally-Heavy Operations to Them! ❖ Don’t Abuse! ❖ More Processing Drains Battery Faster! ❖ Nobody Will Use A Battery Sucker! ❖ Be Lean
105. Be Lean
106. Be Lean → Reduce JavaScript ❖ Do as Little as Possible [1]! ❖ Follow the “Inception” Rule! ❖ Remove Unused JavaScript! ❖ Reduce JSON Payload [2] http://gotwarlost.github.io/istanbul/ [1] http://alistapart.com/column/do-as-little-as-possible
107. Be Lean → Reduce DOM ❖ Reduce DOM Size and Depth! ❖ Strive for a Simple and Flat DOM! ❖ Reduce the Number of Offline Nodes! ❖ Don’t Cache Nodes, Cache Data! ❖ Has an Additional Parsing/Rendering Cost
108. Be Lean → Reduce Radio ❖ Batch Your Requests! ❖ Buffer & Queue Your Requests! ❖ Have an Offline Strategy
109. Cannot Make It? Fake It
110. Cannot Make It? Fake It [1] http://www.lukew.com/ff/entry.asp?1797
111. Cannot Make It? Fake It [1] http://www.lukew.com/ff/entry.asp?1797 ❖ Provide Progress! ❖ Any Progress Will Make App Feel Faster! ❖ The Best Progress Is Seamless! ❖ Progressive Rendering [1]
112. Cannot Make It? Fake It ❖ Overestimate Remaining Time! ❖ Feedback That Starts Earlier Feels to Finish Sooner! ❖ When in Doubt, KISS [1] http://www.lukew.com/ff/entry.asp?1797
113. It All Depends
114. It All Depends ❖ There is Always a Tradeoff! ❖ Each App Has Different Performance Needs! ❖ Each App Has Different Bottlenecks! ❖ Each App Has a Different Audience
115. It All Depends ❖ Each App Is a Different Beast! ❖ Always Measure, Never Assume! ❖ Always Be Testing! ❖ Use Tools, Not Rules [1]! ❖ Choose the Tools That You’ll Use [2] [2] https://the-pastry-box-project.net/addy-osmani/2014-march-26 [1] http://www.lukew.com/ff/entry.asp?1822
116. Use Tools; Not Rules ❖ https://developers.google.com/chrome-developer-tools/! ❖ http://www.html5rocks.com/en/tutorials/games/abouttracing/! ❖ http://www.html5rocks.com/en/tutorials/webperformance/basics/
117. It All Depends ❖ Know Your App! ❖ Be Lean! ❖ Each Added Feature Has a Cost! ❖ Don’t Upscale; Downscale
118. Know Your App ❖ First, Profile on a Desktop Browser! ❖ to Have an Initial Idea! ❖ Then, Test on a Real Device! ❖ DO NOT Trust Simulator/Emulator! ❖ Always Test on a Mobile Network
119. Never Assume ops/sec 0 3500000 7000000 10500000 14000000 114187 12777996 getElementsByClassName querySelectorAll http://jsperf.com/getelementbyid-vs-getelementsbyclassname/21
120. Entropy Always Wins ❖ Your App’s Performance Won’t Stay The Same! ❖ Entropy Always Wins ! ❖ Unless You Pump In Additional Energy! ❖ Your App’s Performance Won’t Improve! ❖ Unless You Pay Attention
121. People To Follow ❖ @linkibol (me :D )! ❖ @igrigorik (Ilya Grigorik)! ❖ @addyosmani (Addy Osmani)! ❖ @Souders (Steve Souders)! ❖ @slicknet (Nicholas Zakas)! ❖ @codepo8 (Christian Heilmann)! ❖ @firt (Maximiliano Firtman)! ❖ @ariyahidayat (Ariya Hidayat)! ❖ @stubbornella (Nicole Sullivan) * Names don’t have any specific order.! * Not a comprehensive list.
122. Thank You Questions?