The Secrets of High-Performance Mobile JavaScript Applications

0368b95a18e594981083b2eb9b177b2d?s=47 volkan
May 17, 2014

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.

0368b95a18e594981083b2eb9b177b2d?s=128

volkan

May 17, 2014
Tweet

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?