The Secrets of High-Performance Mobile JavaScript Applications

Slide 1

Slide 1 text

a practical guide as you rush down the uncanny rabbit hole The Secrets of High Performance Mobile JavaScript Applications ! Volkan Özçelik! [email protected]! ! #html5devconf 2014! 05/22/2014

Slide 2

Slide 2 text

Time is Candy

Slide 3

Slide 3 text

About Me ❖ Mobile Engineer @ jivesoftware.com ! ❖ @linkibol! ❖ volkan.io! ❖ github.com/v0lkan

Slide 4

Slide 4 text

Resources Slides & Source Code:! volkan.io

Slide 5

Slide 5 text

In a Nutshell…

Slide 6

Slide 6 text

Is It Possible to Have This…

Slide 7

Slide 7 text

… While We Have These Constraints

Slide 8

Slide 8 text

… And This Runtime Environment

Slide 9

Slide 9 text

Before We Begin…

Slide 10

Slide 10 text

Mobile Limitations & Challenges

Slide 11

Slide 11 text

Mobile Constraints ❖ Network (Radio)! ❖ Battery! ❖ Memory! ❖ Processing Power

Slide 12

Slide 12 text

What Kills Your Battery

Slide 13

Slide 13 text

What Kills Your Battery ❖ Network Requests (#1)! ❖ JavaScript (#2)! ❖ Images (#3)! ❖ DOM (#4)

Slide 14

Slide 14 text

Mobile Desktop

Slide 15

Slide 15 text

Need4Speed image credits: http://gamefanmag.com

Slide 16

Slide 16 text

Need4Speed ❖ Network Faster! ❖ Render Faster! ❖ Cache Faster! ❖ React Faster! ❖ Execute Faster

Slide 17

Slide 17 text

Network Faster

Slide 18

Slide 18 text

Network Faster ❖ Network is Expensive! ❖ Network is Unreliable! ❖ Latency Kills

Slide 19

Slide 19 text

Latency Kills http://www.lukew.com/ff/entry.asp?1797

Slide 20

Slide 20 text

Latency Kills http://www.lukew.com/ff/entry.asp?1797

Slide 21

Slide 21 text

Network Faster ❖ Reduce # of HTTP Requests! ❖ Use Smart Caching Techniques! ❖ Decouple UX From Network Activities

Slide 22

Slide 22 text

Abstract Your Data Access

Slide 23

Slide 23 text

Abstract Your Data Access

Slide 24

Slide 24 text

Abstraction

Slide 25

Slide 25 text

Abstraction

Slide 26

Slide 26 text

Abstraction

Slide 27

Slide 27 text

Abstraction

Slide 28

Slide 28 text

Abstraction

Slide 29

Slide 29 text

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/

Slide 30

Slide 30 text

Latency ❖ Latency is High! ❖ Latency is Highly Variable!   ❖ Have an Ofﬂine Mode! ❖ Cache Your Responses! ❖ Have an Intelligent Retry Strategy

Slide 31

Slide 31 text

Render Faster

Slide 32

Slide 32 text

Render Faster ❖ Avoid Expensive CSS (shadows, gradients…)! ❖ Avoid Excessive Animations! ❖ Always Use CSS To Animate

Slide 33

Slide 33 text

Render Faster ❖ Use Simple Logicless Templates! ❖ Do Not Nest Templates! ❖ Do Not Nest View Objects

Slide 34

Slide 34 text

Don’t Touch the DOM image credits: ! derekhunter.deviantart.com

Slide 35

Slide 35 text

Avoid Expensive DOM & CSS * You can also use “continuous repaint mode” of Chrome Dev Tools * Opera has a CSS proﬁler too: http://dev.opera.com/

Slide 36

Slide 36 text

Do Not Nest View Objects

Slide 37

Slide 37 text

Do Not Nest View Objects

Slide 38

Slide 38 text

Do Not Nest View Objects

Slide 39

Slide 39 text

Do Not Nest View Objects

Slide 40

Slide 40 text

Do Incremental UI Updates

Slide 41

Slide 41 text

Do Incremental UI Updates

Slide 42

Slide 42 text

Do Incremental UI Updates

Slide 43

Slide 43 text

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

Slide 44

Slide 44 text

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

Slide 45

Slide 45 text

60fps Is not Only for Games ❖ Scrolling! ❖ Orientation Change! ❖ Changing & Refreshing Views! ❖ User Gestures (swiping, zooming, panning)

Slide 46

Slide 46 text

Scrolling Image Credits: http://addyosmani.com/blog/tag/slow-scrolling/

Slide 47

Slide 47 text

Scrolling ❖ Is a Harder Problem Than You Think! ❖ Inﬁnite Scroll === Inﬁnite 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

Slide 48

Slide 48 text

Cache Faster

Slide 49

Slide 49 text

Cache Faster ❖ problem: Network Requests are Expensive! ❖ solution: Batch Your Requests & Cache Your Responses

Slide 50

Slide 50 text

Where Can I Cache ! ❖ HTML5 Application Cache Sucks! ❖ IndexedDB: Has Compatibility Issues! ❖ WebSQL: No Longer Supported! ❖ Local Storage Is the Simplest and the Fastest

Slide 51

Slide 51 text

Simpler Is Better ❖ Use localStorage as Much as You Can

Slide 52

Slide 52 text

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

Slide 53

Slide 53 text

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

Slide 54

Slide 54 text

React Faster

Slide 55

Slide 55 text

User Feedback Is Everything ❖ Never Block UI! ❖ During a Gesture UI Should Move! ❖ Smooth Animations (<16 ms per frame)! ❖ Smooth Actions (<100ms)

Slide 56

Slide 56 text

Never Block UI

Slide 57

Slide 57 text

Never Block UI

Slide 58

Slide 58 text

Never Block UI

Slide 59

Slide 59 text

Event Handling ❖ Prioritize UI Responsiveness! ❖ Use Event Delegation! ❖ Avoid Frequent Event Attaching / Detaching

Slide 60

Slide 60 text

Prioritize UI Responsiveness

Slide 61

Slide 61 text

Prioritize UI Responsiveness

Slide 62

Slide 62 text

Prioritize UI Responsiveness

Slide 63

Slide 63 text

Prioritize UI Responsiveness

Slide 64

Slide 64 text

Prioritize UI Responsiveness

Slide 65

Slide 65 text

Prioritize UI Responsiveness

Slide 66

Slide 66 text

Event Delegation (Caveat) Main Thread Compositor Thread touchdown

Slide 67

Slide 67 text

Event Delegation (Caveat) Main Thread Compositor Thread touchdown

Slide 68

Slide 68 text

Event Delegation (Caveat) Main Thread Compositor Thread touchdown Busy!

Slide 69

Slide 69 text

Event Delegation (Caveat) Main Thread Compositor Thread touchdown Busy!

Slide 70

Slide 70 text

Event Delegation (Caveat) Main Thread Compositor Thread touchdown Busy! BLOCKED!

Slide 71

Slide 71 text

Event Delegation (Caveat) Main Thread Compositor Thread touchdown Busy! BLOCKED!

Slide 72

Slide 72 text

Event Delegation (Caveat) Main Thread Compositor Thread touchdown Busy! BLOCKED! Bind Close to The Element (for touchdown events)

Slide 73

Slide 73 text

Execute Faster

Slide 74

Slide 74 text

The Big Picture

Slide 75

Slide 75 text

Entropy Always Wins Code Expands to Fill Timeframes Available

Slide 76

Slide 76 text

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

Slide 77

Slide 77 text

Frameworks

Slide 78

Slide 78 text

Frameworks? ❖ Frameworks are Expensive! ❖ They Have Economies of Scale! ❖ They Will Always Be Slower! ❖ Frameworks Increase Your Dependency

Slide 79

Slide 79 text

Frameworks? ❖ Frameworks Need Maintenance! ❖ Patches! ❖ Upgrades! ❖ I am NOT Saying “Don’t Use Them”

Slide 80

Slide 80 text

Frameworks? Think Thrice! A Typical Setup

Slide 81

Slide 81 text

Frameworks? Think Thrice! With a Catch You can do a deeper instrumentation using http://esprima.org/

Slide 82

Slide 82 text

Frameworks? Think Thrice! With a Catch You can do a deeper instrumentation using http://esprima.org/

Slide 83

Slide 83 text

Frameworks? Think Thrice! 0 111.25 222.5 333.75 445 445 jQuery

Slide 84

Slide 84 text

Frameworks? Think Thrice! 0 1750 3500 5250 7000 6469 445 jQuery jQuery + jQ Mobile

Slide 85

Slide 85 text

Frameworks? Think Thrice! 0 1750 3500 5250 7000 6738 6469 445 jQuery jQuery + jQ Mobile jQ + jQM + Underscore

Slide 86

Slide 86 text

Frameworks? Think Thrice! 0 1750 3500 5250 7000 6827 6738 6469 445 jQuery jQuery + jQ Mobile jQ + jQM + Underscore jQ + jQM + US + Backbone

Slide 87

Slide 87 text

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

Slide 88

Slide 88 text

Frameworks? Think Thrice!

Slide 89

Slide 89 text

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

Slide 90

Slide 90 text

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

Slide 91

Slide 91 text

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

Slide 92

Slide 92 text

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/

Slide 93

Slide 93 text

Garbage Collection

Slide 94

Slide 94 text

Garbage Collector

Slide 95

Slide 95 text

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

Slide 96

Slide 96 text

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

Slide 97

Slide 97 text

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

Slide 98

Slide 98 text

Memory Profiling is Hard I’d Prefer a Root Canal to Heap Profiling Any Given Time

Slide 99

Slide 99 text

Fixing Memory Leaks ❖ Memory Proﬁling 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

Slide 100

Slide 100 text

Tip: Always Name Your Anonymous Functions

Slide 101

Slide 101 text

Tip: Always Name Your Anonymous Functions * http://kangax.github.io/nfe/

Slide 102

Slide 102 text

Tip: Always Name Your Anonymous Functions * http://kangax.github.io/nfe/

Slide 103

Slide 103 text

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

Slide 104

Slide 104 text

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

Slide 105

Slide 105 text

Be Lean

Slide 106

Slide 106 text

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

Slide 107

Slide 107 text

Be Lean → Reduce DOM ❖ Reduce DOM Size and Depth! ❖ Strive for a Simple and Flat DOM! ❖ Reduce the Number of Ofﬂine Nodes! ❖ Don’t Cache Nodes, Cache Data! ❖ Has an Additional Parsing/Rendering Cost

Slide 108

Slide 108 text

Be Lean → Reduce Radio ❖ Batch Your Requests! ❖ Buffer & Queue Your Requests! ❖ Have an Ofﬂine Strategy

Slide 109

Slide 109 text

Cannot Make It? Fake It

Slide 110

Slide 110 text

Cannot Make It? Fake It [1] http://www.lukew.com/ff/entry.asp?1797

Slide 111

Slide 111 text

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]

Slide 112

Slide 112 text

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

Slide 113

Slide 113 text

It All Depends

Slide 114

Slide 114 text

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

Slide 115

Slide 115 text

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

Slide 116

Slide 116 text

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/

Slide 117

Slide 117 text

It All Depends ❖ Know Your App! ❖ Be Lean! ❖ Each Added Feature Has a Cost! ❖ Don’t Upscale; Downscale

Slide 118

Slide 118 text

Know Your App ❖ First, Proﬁle 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

Slide 119

Slide 119 text

Never Assume ops/sec 0 3500000 7000000 10500000 14000000 114187 12777996 getElementsByClassName querySelectorAll http://jsperf.com/getelementbyid-vs-getelementsbyclassname/21

Slide 120

Slide 120 text

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

Slide 121

Slide 121 text

People To Follow ❖ @linkibol (me :D )! ❖ @igrigorik (Ilya Grigorik)! ❖ @addyosmani (Addy Osmani)! ❖ @Souders (Steve Souders)! ❖ @slicknet (Nicholas Zakas)! ❖ @codepo8 (Christian Heilmann)! ❖ @ﬁrt (Maximiliano Firtman)! ❖ @ariyahidayat (Ariya Hidayat)! ❖ @stubbornella (Nicole Sullivan) * Names don’t have any speciﬁc order.! * Not a comprehensive list.

Slide 122

Slide 122 text

Thank You Questions?