optimizing apps for better performance extended

Optimizing Apps for Better Performance

Elif BoncukSoftware Specialist @ Garanti Teknoloji

Who am I?

➢Hacettepe - Computer Engineering (2006 - 2011)➢Garanti Technology - Mobile Applications Team (2011- )➢MBA Student @BAU (2014 - )➢GDG Istanbul ➢WTM Istanbul➢Blogger (2010 - )➢Photographer

@[email protected]

mailto:[email protected]

Be Faster!

➢Gather Information➢Gain Insight➢Take Action

4 Major Steps

➢Rendering➢Compute➢Memory➢Battery

Rendering

Rendering...

Rendering...MEASURE

EXECUTE

RECORD

LAYOUT

CPU

RASTERIZATION GPU

FLOW

PROBLEM

PROBLEM OVERDRAW

LAYOUTS & INVALIDATIONS

Rasterization

Overdraw

➢ Overdraw is a term used to describe how many times a pixel on the screen has been redrawn in a single frame.

Overdraw...

1. On your mobile device, go to Settings and tap Developer Options.

2. In the Hardware accelerated rendering section, select Debug GPU

Overdraw.

3. In the Debug GPU overdraw popup, select Show overdraw areas.

4. Don't panic as your screen turns into a delirium of colors. The coloring

is provided to help you diagnose your app's display behavior.

Overdraw…

5. The colors are hinting at the amount of overdraw on your screen

for each pixel, as follows:

True color: No overdraw

Blue: Overdrawn once

Green: Overdrawn twice

Pink: Overdrawn three times

Red: Overdrawn four or more times

Overdraw…

How?

➢Eliminate unneeded backgrounds and drawables

➢Define areas will hide portions of view

➢Use RelativeLayout instead of LinearLayout

Best Practices:

➢getWindow().setBackgroundDrawable(null➢android:background:”@null”

Clipping

➢ Clipping is an optimisation which can be defined as Android framework knows overdraw is a problem and will go out of its way to avoid drawing UI widgets that may be invisible in the final image.

➢ Canvas.quickReject()➢ Canvas.clipRect()

DRAWABLE ZONE

Canvas.clipRect()

20dp

20dp 20dp

20dp

Clipping

Clipping

Q: Bu seviyede overdraw yaşanmasına ne sebep olmuş olabilir?

1- Dikkatsiz kod yazarak, çok fazla sayıda background tanımlamış olabiliriz.

2- Kartları ekrana bazı parçaları hidden, birbirinin üstünü örtecek şekilde çizmiş olabiliriz.

3- Bu senaryoda Custom View kullanmamalıydık.

Clipping

CPU Optimizations

Hierarchy Viewer

ANDROID_HVPROTO

○ http://developer.android.com/tools/performance/hierarchy-viewer/setup.html

ViewServer

○ https://github.com/romainguy/ViewServer Register when created

Unregister when destroyed

http://developer.android.com/tools/performance/hierarchy-viewer/setup.html

https://github.com/romainguy/ViewServer

Hierarchy Viewer

Hierarchy ViewerBird's-eye view

Tree Overview

Tree View

View Properties

Nodes

Hierarchy Viewer

Each view in your subtree gets three dots, which can be green, yellow, or red.

The left dot represents the Draw Process of the

rendering pipeline.

The middle dot represents the Layout Phase.

The right dot represents the Execute Phase.

Hierarchy Viewer

The color of the dots indicates the relative performance of this node in respect to all other profiled nodes.

Green means the view renders faster than at least half of the other

views.

Yellow means the view renders faster than the bottom half of the

other views.

Red means the view is among the slowest half of views.

Hierarchy Viewer

https://github.com/ElifBon/HierarchyViewerSample

Hierarchy Viewer<?xml version="1.0" encoding="utf-8"?><LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="wrap_content" android:orientation="horizontal" android:padding="16dp">

<LinearLayout android:layout_width="wrap_content" android:layout_height="wrap_content" android:gravity="center">

<ImageView android:id="@+id/photo" android:layout_width="wrap_content" android:layout_height="wrap_content" /> </LinearLayout>

<RelativeLayout android:layout_width="100dp" android:layout_height="wrap_content" android:paddingLeft="16dp">

<ImageView android:id="@+id/colorImage" android:layout_width="80dp" android:layout_height="30dp" android:layout_alignParentTop="true" android:layout_centerHorizontal="true" android:background="@android:color/holo_green_dark" />

<TextView android:id="@+id/year" android:layout_width="80dp" android:layout_height="30dp" android:layout_alignParentTop="true" android:layout_centerHorizontal="true" android:gravity="center"/>

<TextView android:id="@+id/day" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_below="@+id/year" android:layout_centerHorizontal="true" /> </RelativeLayout></LinearLayout>

<LinearLayout android:layout_width="0dp" android:layout_height="match_parent" android:layout_weight="1" android:orientation="vertical" android:paddingLeft="16dp">

<TextView android:id="@+id/name" android:layout_width="wrap_content" android:layout_height="wrap_content" />

<TextView android:id="@+id/place" android:layout_width="wrap_content" android:layout_height="wrap_content" /> </LinearLayout>

Hierarchy Viewer<?xml version="1.0" encoding="utf-8"?><RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="wrap_content" android:orientation="horizontal" android:padding="16dp">

<ImageView android:id="@+id/photo" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignParentLeft="true" android:layout_alignParentTop="true" android:layout_gravity="center" />

<TextView android:id="@+id/name" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignParentTop="true" android:layout_toRightOf="@+id/photo" android:paddingLeft="16dp" />

<TextView android:id="@+id/place" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_toRightOf="@+id/photo" android:layout_below="@id/name" android:paddingLeft="16dp" />

<TextView android:id="@+id/year" android:layout_width="80dp" android:layout_height="30dp" android:layout_alignParentRight="true" android:layout_alignParentTop="true" android:layout_marginLeft="16dp" android:background="@android:color/holo_green_dark" android:gravity="center" />

<TextView android:id="@+id/day" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignLeft="@+id/year" android:layout_alignParentRight="true" android:layout_below="@+id/year"

android:layout_marginLeft="16dp" /></RelativeLayout>

Hierarchy Viewer

Hierarchy Viewer

https://youtu.be/kMUYOnD0Tqc

http://youtube.com/v/kMUYOnD0Tqc

Rendering - Tips & Tricks

● getWindow().setBackgroundDrawable(null); // Temadan aldığı renkle aynıysa bu gereksiz

● android:background:”@null” // xml

● Canvas.clipRect();

● Canvas.quickReject();

● Flat hiyerarchy

● Gereksiz layoutlardan kaçının

● Use RelativeLayout instead of LinearLayout

Compute➢ Slow Function Performance

Profiling with Traceview

➢ Traceview is a graphical viewer for execution logs that you create by using the Debug class to log tracing information in your code. Traceview can help you debug your application and profile its performance.

http://developer.android.com/reference/android/os/Debug.html

Profiling with Traceview

Profiling with TraceviewThe Timeline pane visualizes how your code executes over time.

Each row shows a thread.

Each bar on the timeline is a method

executing.

Each color is for a different method;

every time a method executes, you

see a the same color bar.

The width of its bar indicates how long

the method takes to execute.

The Profiling pane shows a list of methods.

Select a method to see who called it (Parent) and who it's calling

(Children).

The selected method is also highlighted in theTimeline pane.

The columns show exclusive and inclusive CPU and real times,

percentages, ratios, and how often a method was called.

The exclusive time is the time spent just in the method itself, which can

help you find issues within that specific method.

The inclusive time is for the method and all methods it calls, which can

help you find problems with your call tree.

The Calls+Rec column shows how many times a method was called

recursively, which can help you track down performance issues.

Batching and Caching

Caching for Networking

Caching HTTP Responses is disabled by Default.

https://www.youtube.com/watch?v=7lxVqqWwTb0&list=PLOU2XLYxmsIKEOXh5TwZEv89aofHzNCiu&index=1

Caching for Networking@Overrideprotected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState);...

try{ File httpCacheDir = new File(getBaseContext().getCacheDir(),"http"); long httpCacheSize = 10*1024*1024; //10Mib HttpResponseCache.install(httpCacheDir, httpCacheSize); }catch (IOException e){ Log.i(TAG, "HTTP response cache installation failed." + e.getMessage()); }}

@Overrideprotected void onStop() { super.onStop();...

HttpResponseCache cache = HttpResponseCache.getInstalled(); if(null != cache){ cache.flush(); }}

Caching for NetworkingForce a Network Response:

Force a Cache Response:

http://developer.android.com/reference/android/net/http/HttpResponseCache.html


http://developer.android.com/samples/DisplayingBitmaps/src/com.example.android.displayingbitmaps/util/DiskLruCache.html

●Volley●okHTTP●Picasso

Blocking the UI Thread

How to Solve?

Android's single thread model:

1. Do not block the UI thread

2. Do not access the Android UI toolkit

from outside the UI thread

How to Solve?public void onClick(View v) { new Thread(new Runnable() { public void run() { final Bitmap bitmap = loadImageFromNetwork("http://example.com/image.png"); mImageView.post(new Runnable() { public void run() { mImageView.setImageBitmap(bitmap); } }); } }).start();}

public void onClick(View v) { new Thread(new Runnable() { public void run() { Bitmap b = loadImageFromNetwork("http://example.com/image.png"); mImageView.setImageBitmap(b); } }).start();}

How to Solve?public void onClick(View v) { new DownloadImageTask().execute("http://example.com/image.png");}

private class DownloadImageTask extends AsyncTask<String, Void, Bitmap> { /** The system calls this to perform work in a worker thread and * delivers it the parameters given to AsyncTask.execute() */ protected Bitmap doInBackground(String... urls) { return loadImageFromNetwork(urls[0]); }

/** The system calls this to perform work in the UI thread and delivers * the result from doInBackground() */ protected void onPostExecute(Bitmap result) { mImageView.setImageBitmap(result); }}

Analyzing UI Performance with Systrace

➢ The Systrace tool allows you to collect and inspect timing information across an entire Android device, which is called a trace.

➢ As simply, you should put your code that you want to trace between this two lines.

Trace.beginSection("Data Structures");// TODO:Trace.endSection();


Bad Performance Example

Memory

Basic Prinsiples of Garbage Collection:➢ Find data objects in a program that cannot be accesed in the future.➢ Reclaim the resources used by those objects.

Memory Monitor

Memory Monitor reports in real-time how your app allocates memory.

➢ Showing available and used memory in a graph, and garbage collection events over time.

➢ Quickly testing whether app slowness might be related to excessive garbage collection events.

➢ Quickly testing whether app crashes may be related to running out of memory.

Dark blue: Amount of memory that your app is currently using.

Light blue: Available, unallocated memory.

http://youtube.com/v/wXiNIpRyJp0

Memory Monitor

Heap Viewer

Heap Viewer reports in real-time what types of objects your application has allocated, how many,

and their sizes on the heap.

➢ Getting a sense of how your app allocates and frees memory.

➢ Identifying memory leaks.

➢ 5.0+

Heap Viewer

Allocation Tracker

Allocation Tracker records an app's memory allocations and lists all allocated objects for the profiling cycle with their call

stack, size, and allocating code.

➢ Identifying where many similar object types, from roughly the same call stack, are allocated and deallocated over a very

short period of time.

➢ Finding the places in your code that may contribute to inefficient memory use.

How your app should manage memory➢ Use services sparingly

➢ Release memory when your user interface becomes hidden

➢ Release memory as memory becomes tight

➢ Check how much memory you should use

➢ Avoid wasting memory with bitmaps

➢ Use optimized data containers

➢ Be aware of memory overhead

➢ Be careful with code abstractions

➢ Use nano protobufs for serialized data

➢ Avoid dependency injection frameworks

➢ Be careful about using external libraries

➢ Optimize overall performance

➢ Use ProGuard to strip out any unneeded code

➢ Use zipalign on your final APK

➢ Analyze your RAM usage

➢ Use multiple processes

http://developer.android.com/training/articles/memory.html

Battery

Batterystats & Battery Historian

Batterystats collects battery data from your device, and Battery Historian converts that data into an HTML visualization that you can view in your Browser.

➢ Showing you where and how processes are drawing current from the battery.

➢ Identifying tasks in your app that could be deferred or even removed to improve battery life.

➢ 5.0+


battery_level: When the battery level was recorded and logged.

top: The application running at the top.

wifi_running: Shows that the Wi-Fi network connection was active.

screen: Screen is turned on.

phone_in_call: Recorded when the phone is in a call.

wake_lock: App wakes up, grabs a lock, does small work, then goes back to sleep. Trunning: Shows when the CPU is

awake. Check whether it is awake and asleep when you expect it to be.

wake_reason: The last thing that caused the kernel to wake up. If it's your app, determine whether it was necessary.

mobile_radio: Shows when the radio was on. Starting the radio is battery expensive. Many narrow bars close to each

other can indicate opportunities for batching and other optimizations.

gps: Indicates when the GPS was on. Make sure this is what you expect.

sync: Shows when an app was syncing with a backend. T


Battery History: A time series of power-relevant events, such as screen, Wi-Fi, and

app launch. These are also visible through Battery Historian.

Per-PID Stats: How long each process ran.

Statistics since last charge: System-wide statistics, such as cell signal levels

and screen brightness. Provides an overall picture of what's happening with the

device. This information is especially useful to make sure no external events are

affecting your experiment.

Estimated power use (mAh) by UID and peripheral: This is currently an extremely

rough estimate and should not be considered experiment data.

Per-app mobile ms per packet: Radio-awake-time divided by packets sent. An

efficient app will transfer all its traffic in batches, so the lower this number the better.

All partial wake locks: All app-held wakelocks, by aggregate duration and count.

Optimizing Network Request Frequencies

Adapting to Latency

Adapting to Latency

ConnectivityManager cm = (ConnectivityManager)getBaseContext().getSystemService(Context.CONNECTIVITY_SERVICE);NetworkInfo activeNetwork = cm.getActiveNetworkInfo();

if(activeNetwork.getType() != ConnectivityManager.TYPE_WIFI){ String typeName = activeNetwork.getSubtypeName(); int type = activeNetwork.getSubtype(); switch (type){ // TelephonyManager.NETWORK_TYPE *enums }}

Adapting to Latency

Adapting to Latency● Emulator Throttling● Network Attenuator

Wakelock APIprivate void pollServer() { mWakeLockMsg.setText("Polling the server! This day sure went by fast."); for (int i=0; i<10; i++) { mWakeLock.acquire(); mWakeLockMsg.append("Connection attempt, take " + i + ":\n"); mWakeLockMsg.append(getString(R.string.wakelock_acquired));

// Always check that the network is available before trying to connect. You don't want // to break things and embarrass yourself. if (isNetworkConnected()) { new SimpleDownloadTask().execute(); } else { mWakeLockMsg.append("No connection on job " + i + "; SAD FACE"); } }}

@Overrideprotected void onPostExecute(String result) { mWakeLockMsg.append("\n" + result + "\n"); releaseWakeLock();}

JobSchedulermServiceComponent = new ComponentName(this, MyJobService.class);

@Overridepublic boolean onStartJob(JobParameters params) { Log.i(LOG_TAG, "Totally and completely working on job " + params.getJobId()); // First, check the network, and then attempt to connect. if (isNetworkConnected()) { new SimpleDownloadTask() .execute(params); return true; } else { Log.i(LOG_TAG, "No connection on job " + params.getJobId() + "; sad face"); } return false;}

public void pollServer() { JobScheduler scheduler = (JobScheduler) getSystemService(Context.JOB_SCHEDULER_SERVICE); for (int i=0; i<10; i++) { JobInfo jobInfo = new JobInfo.Builder(i, mServiceComponent) .setMinimumLatency(5000) // 5 seconds .setOverrideDeadline(60000) // 60 seconds (for brevity in the sample) .setRequiredNetworkType(JobInfo.NETWORK_TYPE_ANY) // WiFi or data connections .build();

mWakeLockMsg.append("Scheduling job " + i + "!\n"); scheduler.schedule(jobInfo); }}

Lint

http://developer.android.com/tools/debugging/improving-w-lint.html

Lint

https://www.youtube.com/watch?v=Z_huaXCsYyw&index=36&list=PLOU2XLYxmsIKEOXh5TwZEv89aofHzNCiu

Questions?

@elifbon_+ElifBoncukwww.elifboncuk.wordpress.comelifboncuk88@gmail.com - [email protected]

Thank you!

