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. 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. 21.

    Network Faster ❖ Reduce # of HTTP Requests! ❖ Use

    Smart Caching Techniques! ❖ Decouple UX From Network Activities
  3. 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/
  4. 30.

    Latency ❖ Latency is High! ❖ Latency is Highly Variable!

    
 ❖ Have an Offline Mode! ❖ Cache Your Responses! ❖ Have an Intelligent Retry Strategy
  5. 32.

    Render Faster ❖ Avoid Expensive CSS (shadows, gradients…)! ❖ Avoid

    Excessive Animations! ❖ Always Use CSS To Animate
  6. 33.

    Render Faster ❖ Use Simple Logicless Templates! ❖ Do Not

    Nest Templates! ❖ Do Not Nest View Objects
  7. 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/
  8. 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
  9. 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
  10. 45.

    60fps Is not Only for Games ❖ Scrolling! ❖ Orientation

    Change! ❖ Changing & Refreshing Views! ❖ User Gestures (swiping, zooming, panning)
  11. 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
  12. 49.
  13. 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
  14. 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
  15. 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
  16. 55.

    User Feedback Is Everything ❖ Never Block UI! ❖ During

    a Gesture UI Should Move! ❖ Smooth Animations (<16 ms per frame)! ❖ Smooth Actions (<100ms)
  17. 59.
  18. 72.
  19. 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
  20. 78.

    Frameworks? ❖ Frameworks are Expensive! ❖ They Have Economies of

    Scale! ❖ They Will Always Be Slower! ❖ Frameworks Increase Your Dependency
  21. 81.

    Frameworks? Think Thrice! With a Catch You can do a

    deeper instrumentation using http://esprima.org/
  22. 82.

    Frameworks? Think Thrice! With a Catch You can do a

    deeper instrumentation using http://esprima.org/
  23. 85.

    Frameworks? Think Thrice! 0 1750 3500 5250 7000 6738 6469

    445 jQuery jQuery + jQ Mobile jQ + jQM + Underscore
  24. 86.

    Frameworks? Think Thrice! 0 1750 3500 5250 7000 6827 6738

    6469 445 jQuery jQuery + jQ Mobile jQ + jQM + Underscore jQ + jQM + US + Backbone
  25. 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
  26. 89.

    Frameworks? Think Thrice! jQuery +
 jQuery Mobile + 
 Underscore

    + 
 Backbone +
 Your Business Logic 
 (BLL + DAL + Cache) +
 Helper Plugins =
 
 

  27. 90.

    Frameworks? Think Thrice! jQuery +
 jQuery Mobile + 
 Underscore

    + 
 Backbone +
 Your Business Logic 
 (BLL + DAL + Cache) +
 Helper Plugins =
 
 

  28. 91.

    Frameworks? Think Thrice! $(‘#baz’) document.getElementById $el.attr(‘foo’) el.getAttribute $(‘.foo .bar >

    baz’) document.querySelectorAll $(‘.foo’).click(fn) document.addEventListener
  29. 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/
  30. 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
  31. 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
  32. 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
  33. 98.
  34. 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
  35. 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
  36. 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
  37. 105.
  38. 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
  39. 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
  40. 108.

    Be Lean → Reduce Radio ❖ Batch Your Requests! ❖

    Buffer & Queue Your Requests! ❖ Have an Offline Strategy
  41. 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]
  42. 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
  43. 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
  44. 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
  45. 117.

    It All Depends ❖ Know Your App! ❖ Be Lean!

    ❖ Each Added Feature Has a Cost! ❖ Don’t Upscale; Downscale
  46. 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
  47. 119.

    Never Assume ops/sec 0 3500000 7000000 10500000 14000000 114187 12777996

    getElementsByClassName querySelectorAll http://jsperf.com/getelementbyid-vs-getelementsbyclassname/21
  48. 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
  49. 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.