Snappy Apps for Cordova

Designer/Developer

Varun VachharDesigner/Developer

Yuri Takhteyev

Some rights reserved - Creative Commons 2.0 by-sa, image credits on last slide.

Basic Flow of the Rendering Engine

Parse HTML To Construct

The DOM Tree

Render Tree Construction

Layout of The Render Tree

Painting The Render Tree

http://www.html5rocks.com/en/tutorials/internals/howbrowserswork

60 fpsSmooth, high frame rates drive user engagement and can affect how much users interact with your website or app

Each frame the browser will:

• Evaluate some JavaScript

• Re-calculate style for the elements

• Re-calculate layout (if styles are modified by JavaScript)

• Draw a subset of the page to various layers

• Then it will use the GPU to composite these layers to the screen

16ms per Frame

For the most part we’ll be trying to get to 60fps in our work, and that normally means understanding what the browser’s doing and optimizing for it.

Paul Lewis

“

Re-FlowWhen the changes affect:

• document content • structure • element position

A reflow (or re-layout) happens.

Styles That Affect Layoutheightmargin border-width topfont-sizetext-align font-weight leftline-heightright white-spacemin-height

width paddingdisplayborder position float overflow-yoverflowfont-familyvertical-align clear bottom

Avoid animating properties that trigger layout

Re-Paint

The process by which the browser converts the DOM elements with all their properties into actual pixels to draw.

Styles That Affect Paintcolorvisibility text-decoration background-position outline-color outline-styleoutline-width background-size

border-style backgroundbackground-imagebackground-repeat outline border-radius box-shadow

• The affected element are repainted.

• The layers they belong to are uploaded to the GPU.

• On mobile, the bandwidth between the CPU and GPU is limited, so texture uploads take a long time.

• Therefore, painting takes longer and is particularly expensive.

Animating Paint Properties

Can I Actually Animate Anything?

You can change these properties without triggering layout or paint.

The Easy Wins! Position transform: translate(npx, npx);

Scale transform: scale(n);

Rotation transform: rotate(ndeg);

Skew transform: skew(X|Y)(ndeg);

Matrix transform: matrix(3d)(…);

Opacity opacity: 0…1;

(The elements will need to be on it’s own composite layer)

The process where each of the individual textures uploaded to the GPU is drawn out one by one or even in parallel

GPU Compositing

translateZ(0)

translate3d(0,0,0)

will-change

The Null Transform Hack• Creates a new layer with its own

backing surface

• i.e., the DOM element gets mapped as a texture residing on the GPU

• The content doesn’t change and therefore, the browser needs to build the texture only once

• No re-paint!

Minimizing Repaint

CPU Repaint

GPU Repaint

• Should be used sparingly

• Overdoing or having too many layers can cause jank

• Especially on Mobile devices (they have limited VRAM)

¡Caution!

http://wesleyhales.com/blog/2013/10/26/Jank-Busting-Apples-Home-Page

Tools, Not Rules

Profiling With Chrome• Open your app in Incognito mode

• Open the Developer Tools

• Go to the timeline tab

Record

The Timeline

Layout Thrashing

LoadingScriptingRenderingPainting

30 FPS

60 FPS

Filter

Long Paint

Layout Thrashing

Paint Rectangles

Declarative animations are preferable because the browser can optimize them ahead of time.

Imperative (JS) vs Declarative (CSS)

< ? >

• Don't change individual styles one by one.

• Change the class names not the styles

• For dynamic styles, edit the cssText property

// badel.style.left = left + "px";el.style.top = top + "px";

// betterel.className += " theClassName";

// or when calc. dynamicallyel.style.cssText += "; left: " + left + "px; top: " + top + "px;";

Avoid Layout Thrashing

• Schedules a function to be executed at the next frame

• Similar to setTimeout(fn, 0)

• All our DOM writes to run together in the next frame.

// Readvar h1 = element1.clientHeight;

// WriterequestAnimationFrame(function() { element1.style.height = (h1 * 2) + 'px';});

// Readvar h2 = element2.clientHeight;

// WriterequestAnimationFrame(function() { element2.style.height = (h2 * 2) + ‘px';});

requestAnimationFrame

Infinite Scroll on an Older Phone

• Infinite scroll

• Older Android phones (~Galaxy Nexus)

• Keeping it fast

The Challenge

• Waiting at the bottom

• Occasional non-responsiveness

• Slow scrolling

A Few Kinds of Slow

• A fetch queue

• The cost of rendering

• collection-repeat

• Removing Angular

Avoiding the Wait

• An asynchronous rendering queue (using Handlebar)

• Raw DOM insertion

• Batching insertion

• requestAnimationFrame()

• Implemented as a “skinny” directive (most work offloaded to services)

• Downside: a lot more work than using Angular!

Doing it Without Angular

• Faster scrolling helps accumulate content

• With more content, scrolling gets slower

• Solution: removing hidden batches (kudos to LinkedIn)

Weight of Accumulated DOM

• Difficulty figuring out when slowness returned

• ion-scroll vs overflow scrolling

The Return of Slowness

Designer/DeveloperVarun Vachhar

THANK YOU!

@winkerVSbecks

winkerVSbecks

CTO, rangle.ioYuri Takhteyev

@qaramazov

yuri

Image Credits

by Adam Meek

Images licensed through Creative Commons 2.0 BY or By-SA license.

by Jochen Frey by danielle_blue by Allie KF

by technicool by Windell Oskay