The Real Story Behind JavaScript Performance on Mobile... Because Science!

PowerPoint Presentation

#perfmatters@ryanjsalvaTools for Apache Cordova

The lessons we learn today apply to both the mobile web and hybrid apps.

11/19/20152 2014 Microsoft Corporation. All rights reserved. Microsoft, Windows, and other product names are or may be registered trademarks and/or trademarks in the U.S. and/or other countries. The information herein is for informational purposes only and represents the current view of Microsoft Corporation as of the date of this presentation. Because Microsoft must respond to changing market conditions, it should not be interpreted to be a commitment on the part of Microsoft, and Microsoft cannot guarantee the accuracy of any information provided after the date of this presentation. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

Cordova apps are web applications that run inside a native application.

This allows you to use HTML, CSS, and JavaScript to build your app while still having access to your devices hardware capabilities!

Native Wrapper

Your JavaScript AppCordova Plugin JS API

What do we want to show?1.) How Cordova communicates with the native code. (It is a webview inside of a native app container)2.) Difference between iOS and Android vs WWA. Simplify this!11/19/20153 2014 Microsoft Corporation. All rights reserved. Microsoft, Windows, and other product names are or may be registered trademarks and/or trademarks in the U.S. and/or other countries. The information herein is for informational purposes only and represents the current view of Microsoft Corporation as of the date of this presentation. Because Microsoft must respond to changing market conditions, it should not be interpreted to be a commitment on the part of Microsoft, and Microsoft cannot guarantee the accuracy of any information provided after the date of this presentation. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

There is a general perception that apps built using HTML, CSS, and JavaScript are slow.

(Hint: We are going to change that in this session)

What does it mean for something to be fast and responsive?

Interaction Classes

What we care about!

MethodologyWe identified SIX areas where developers commonly encounter performance issues. To identify these problem areas:

We took a look at the work-arounds and performance problems many of you reported in your apps.

We also talked to some of the makers of JS control frameworks (Ionic, Kendo UI, Onsen, WinJS) and learned about their strategies on how they think about performance.

MethodologyCompared #perfmatters on three nice, but aging devices with similar hardware profiles:

Nexus 7 2013 (Android)iPad Mini 3 (iOS)Lumia 928 (WP)

Without any further delay,the most common issues are

1. The Webview Tax2. Document Object Model (DOM)3. Images4. Animation5. Garbage Collection6. UI Controls

// The Webview Tax

Interaction classes instantaneous, fast, slow, when to show UI, etc.13

Because Cordova apps run inside a webview, they incur overhead from both the browser layout and scripting engine. This means you have a web application running inside a native app. Thats the tax.

Get information on Windows Store/PhoneGraph native performance, then add browser, AND ONE MORE THING, show Cordova data11/19/201515 2014 Microsoft Corporation. All rights reserved. Microsoft, Windows, and other product names are or may be registered trademarks and/or trademarks in the U.S. and/or other countries. The information herein is for informational purposes only and represents the current view of Microsoft Corporation as of the date of this presentation. Because Microsoft must respond to changing market conditions, it should not be interpreted to be a commitment on the part of Microsoft, and Microsoft cannot guarantee the accuracy of any information provided after the date of this presentation. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

While memory isnt necessarily something that users can see, they can see the effect it has on things like startup time.

MICROSOFT CONFIDENTIAL INTERNAL ONLY

Android tends to be slowerCordova apps on iOS and Windows generally exhibit the same performance characteristics as their native counterparts, but Cordova apps on Android consume more memory and start slower.

To access device capabilities, Cordova apps must also communicate with the native application via asynchronous calls (XHR).

// Document Object Model (DOM)

Interaction classes instantaneous, fast, slow, when to show UI, etc.24

The DOM is the in-memory representation of every single element that makes up your application. You have a great deal of power over being able to modify DOM elements, modify their structure, and more. With great power comes great responsibility!

DemoSimple DOM vs. Complex DOM

13 minutes11/19/201526 2014 Microsoft Corporation. All rights reserved. Microsoft, Windows, and other product names are or may be registered trademarks and/or trademarks in the U.S. and/or other countries. The information herein is for informational purposes only and represents the current view of Microsoft Corporation as of the date of this presentation. Because Microsoft must respond to changing market conditions, it should not be interpreted to be a commitment on the part of Microsoft, and Microsoft cannot guarantee the accuracy of any information provided after the date of this presentation. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

Epsilon

Reduce your element count The more elements you have on the page, the slower your page will be.

Layout ThrashingWhen you make modifications to certain CSS style properties or parent DOM elements, the rendering engine will cause the layout of the entire document to refresh.

Sometimes, this refreshing occurs repeatedlyand noticeably if you have a lot of UI elements displayed!

DemoLayout Thrashing

Badfor (var i = b.children.length - 1; i >= 0; i--) { b.children[i].style.left = b.children[i].offsetLeft + "px"; b.children[i].style.top = b.children[i].offsetTop + "px";}

Goodfor (var i = b.children.length - 1; i >= 0; i--) { topPx[i] = b.children[i].offsetTop; leftPx[i] = b.children[i].offsetLeft;}for (var i = b.children.length - 1; i >= 0; i--) { b.children[i].style.left = leftPx[i] + "px"; b.children[i].style.top = topPx[i] + "px";}

Batch Layout Operations TogetherBatch the read/change operations on element properties in a loop that affects layout.

Fast List ScrollingDisplaying a list of data is a common scenario for many apps. To ensure your data displays smoothly especially when scrolling, ensure you fetch only the data you want and render only the content that is going to be necessary.

This is commonly known as virtualization.

Reference back to that earlier section and other concepts that may have already been covered!11/19/201537 2014 Microsoft Corporation. All rights reserved. Microsoft, Windows, and other product names are or may be registered trademarks and/or trademarks in the U.S. and/or other countries. The information herein is for informational purposes only and represents the current view of Microsoft Corporation as of the date of this presentation. Because Microsoft must respond to changing market conditions, it should not be interpreted to be a commitment on the part of Microsoft, and Microsoft cannot guarantee the accuracy of any information provided after the date of this presentation. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

DemoList Virtualization

Memory Usage: Virtualized List vs. Non-Virtualized List

Use virtualization When working with large amounts of data, only work with the data you need to display content on the screen.

(Popular control frameworks like Meteor, Ionic, Onsen UI and others help handle this for you.)

// Images

GradientsYou can specify gradients to blend multiple colors together in a single region. In HTML and CSS, you have several ways of specifying them. You can use an image or you can specify a gradient in CSS itself.

Lets look at which one is faster!

DemoGradients: CSS vs. Image

Bad.css_gradient { background: -webkit-linear-gradient(top,rgb(84, 1, 1),rgb(0, 84, 119)); /*Safari 5.1-6*/ background: -o-linear-gradient(top,rgb(84, 1, 1),rgb(0, 84, 119)); /*Opera 11.1-12*/ background: -moz-linear-gradient(tp,rgb(84, 1, 1),rgb(0, 84, 119)); /*Fx 3.6-15*/ background: linear-gradient(top, rgb(84, 1, 1),rgb(0, 84, 119)); /*Standard*/}

Good.image_gradient { background: url('../images/gradient.png');}

Use Images for Gradients & ShadowsCSS gradients are very convenient, but the browser is more efficient rendering bitmaps. Gradients implemented via images result in faster performance. With the progression of CSS filters and better support for them, this may change in the future.

// Animation

Setting Element PositionBecause handheld devices are CPU bound, you want to defer as much work to your devices GPU as you can. This can be easily ensured by setting the appropriate CSS properties.Animations created in CSS use a built-in loop. Animations created in JavaScript can use a custom loop that you build. Lets see which is faster.

Demotransform vs. position

CSS vs. JavaScriptAnimation requires using what is known as an animation loop. This loop is responsible for updating the visuals and state of your animation by rapidly executing code.Animations created in CSS use a built-in loop. Animations created in JavaScript can use a custom loop that you build. Lets see which is faster.

DemoAnimations: CSS vs. JS

Bad@keyframes bobble { 0% { left: 50px; animation-timing-function: ease-in; } 50% { left: 50px; top: 50px; animation-timing-function: ease-out; } 100% { left: 50px; top: 40px; }}

Good@keyframes bobble { 0% { transform: translate3d(50px, 40px, 0px); animation-timing-function: ease-in; } 50% { transform: translate3d(50px, 50px, 0px); animation-timing-function: ease-out; } 100% { transform: translate3d(50px, 40px, 0px); }}

Use translate3d for Animating PositionWhen moving elements around, use the transform propertys translate3d function as opposed to setting the position property directly.

Use CSSFor the smoothest animations, use CSS animations or CSS transitions. If you need to use JavaScript, ensure your animation loop is defined using the requestAnimationFrame function.

// Garbage Collection

The garbage collector is responsible for managing the lifecycle of the objects in your apps. It keeps track of which ones to keep around and which ones to destroy to free up memory.While the garbage collector runs automatically, there are things you can do to optimize its behavior.

DemoNo event handler left behind

Introduce event handlers and summarize!11/19/201562 2014 Microsoft Corporation. All rights reserved. Microsoft, Windows, and other product names are or may be registered trademarks and/or trademarks in the U.S. and/or other countries. The information herein is for informational purposes only and represents the current view of Microsoft Corporation as of the date of this presentation. Because Microsoft must respond to changing market conditions, it should not be interpreted to be a commitment on the part of Microsoft, and Microsoft cannot guarantee the accuracy of any information provided after the date of this presentation. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

Badfunction createElements() { for (var i = 0; i < 100; ++i) { var xBtn = document.createElement('button'); xBtn.setAttribute('value', 'AA'); xBtn.addEventListener('click', hi, false); containerDiv.appendChild(xBtn); xBtn = null; }}function clearElements() { containerDiv.innerHTML = "";}

Goodfunction createElements() { for (var i = 0; i < 100; ++i) { var xBtn = document.createElement('button'); xBtn.setAttribute('value', 'AA'); xBtn.addEventListener('click', hi, false); containerDiv.appendChild(xBtn); xBtn = null; }}function clearElements() { var els = containerDiv.childNodes; for (var i = 0; i < els.length; i++) { els[i].removeEventListener('click', hi, false); containerDiv.removeChild(els[i]); }}

28 minutes (~probably 35)11/19/201565 2014 Microsoft Corporation. All rights reserved. Microsoft, Windows, and other product names are or may be registered trademarks and/or trademarks in the U.S. and/or other countries. The information herein is for informational purposes only and represents the current view of Microsoft Corporation as of the date of this presentation. Because Microsoft must respond to changing market conditions, it should not be interpreted to be a commitment on the part of Microsoft, and Microsoft cannot guarantee the accuracy of any information provided after the date of this presentation. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

Be Either Proactive or Be PatientUse removeEventListener to remove event references before deleting elements. If you remove elements without removing your event listener, the memory footprint will steadily increase until the next garbage collection.

Minimize Unnecessary Event ListenersIf you are listening for events on multiple elements that share the same ancestor element, dont assign an event handler to each element. Instead, just assign one event handler to the ancestor element.

(Allow me to elaborate!)

/* bad *//* good */

Make text larger. Two different slides.11/19/201568 2014 Microsoft Corporation. All rights reserved. Microsoft, Windows, and other product names are or may be registered trademarks and/or trademarks in the U.S. and/or other countries. The information herein is for informational purposes only and represents the current view of Microsoft Corporation as of the date of this presentation. Because Microsoft must respond to changing market conditions, it should not be interpreted to be a commitment on the part of Microsoft, and Microsoft cannot guarantee the accuracy of any information provided after the date of this presentation. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

Lets say you want to listen to a click event on the elements with the id value of one, two, three, four, and five.

Note: They share a common parent with the theDude element!

DemoHandling Events for Multiple Elements with a Common Ancestor

Were looking at the far right column, retained size, and the row for Document DOM Tree. Underneath each IMG element, well find the overhead/unnecessary event.71

Bad// ONE FUNCTION FOR EACH EVENT LISTENERfor (i = 0; i < 100; i++){ img[i].addEventListener("click", function clickListener(e) { var clickedItem = e.target.id; alert("Hello " + clickedItem); });}

Goodvar theParent = document.querySelector("#theDude");theParent.addEventListener("click", doSomething, false);

function doSomething(e) { if (e.target !== e.currentTarget) { var clickedItem = e.target.id; alert("Hello " + clickedItem); } e.stopPropagation();}

Take Advantage of Event BubblingHaving one event as opposed to many events reduces the amount of memory each UI element takes up. For scenarios where you have many elements and a common ancestor, use the technique described here.

Pay Attention to Memory LeaksWhen you are making DOM manipulations, simply removing an element from the tree doesnt ensure the element gets garbage collected. You will need to more proactive about telling JavaScript to re-claim the memory.

DemoMemory Leaks

Bad// el is in the global scope, so it persists with the documentvar el;function doSomething() { el = document.createElement('div'); parent.appendChild(el);}

function empty() { parent.innerHTML = "";}

Good// el is in the local scope, so expires with the functionfunction doSomething() { var el = document.createElement('div'); parent.appendChild(el);}

function empty() { parent.innerHTML = "";}

28 minutes (~probably 35)11/19/201579 2014 Microsoft Corporation. All rights reserved. Microsoft, Windows, and other product names are or may be registered trademarks and/or trademarks in the U.S. and/or other countries. The information herein is for informational purposes only and represents the current view of Microsoft Corporation as of the date of this presentation. Because Microsoft must respond to changing market conditions, it should not be interpreted to be a commitment on the part of Microsoft, and Microsoft cannot guarantee the accuracy of any information provided after the date of this presentation. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

Destroy Unused ObjectsWhen you remove DOM elements from the tree or clear out variables that store a lot of data, be sure to also clear or destroy any objects that may be referencing them as well. Otherwise, the elements will avoid getting garbage collected.

// UI Controls

Fast ClickingTo differentiate between various touch gestures, mobile apps by default introduce a default delay (up to 300ms) to process click events. Responding to touchstart or mousedown events can make your presentation feel extra snappy!

DemoFast Clicking

If you remember anything

Anyone can build slow apps

Anyone can build slow appsbut you dont have to.

Thank youTools for Apache Cordova, a.k.a. TACOhttp://taco.tools

Find me on Twitter @ryanjsalva

Practical Advice (1/3)Your UI is considered fast when it reacts to user actions in under 100ms.The less elements you have on your page, the faster and less memory-intensive your app.Use virtualization to manage the size of your DOMBatch layout operations to avoid duplicate reads/writes on layout properties

60 minutes!11/19/201589 2014 Microsoft Corporation. All rights reserved. Microsoft, Windows, and other product names are or may be registered trademarks and/or trademarks in the U.S. and/or other countries. The information herein is for informational purposes only and represents the current view of Microsoft Corporation as of the date of this presentation. Because Microsoft must respond to changing market conditions, it should not be interpreted to be a commitment on the part of Microsoft, and Microsoft cannot guarantee the accuracy of any information provided after the date of this presentation. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

Practical Advice (2/3)Implement gradients & shadows as images rather than CSSUse CSS transform: translate3D for animating positionCreate fast animations in CSS or by using requestAnimationFrame in JavaScript

Practical Advice (3/3)Use removeEventListener to remove event references from elements even if the element is about to be deleted.Reduce the amount of event listeners in your app by relying on event bubblingDestroy unused elements and objects to save memory.

Software

The Real Story Behind JavaScript Performance on Mobile... Because Science!