Android/frameworks_base
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

docs: APP Introduction and Rendering content

Browse Source 
Change-Id: I65c6652e12b583f2e8f4cfb5cde38da8e323ec19
This commit is contained in:
Aleks Haecky
2015-10-21 10:53:31 -07:00
committed by Joe Fernandez
parent 3f3afea32c
commit 95ada5ab89
10 changed files with 1492 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
docs/html/images/training/app/madscientist.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 902 KiB

8
docs/html/jd_collections.js
View File

@@ -1670,4 +1670,12 @@ var RESOURCE_COLLECTIONS = {
"training/testing/performance.html"
]
},
"app/landing/videos": {
"title": "",
"resources": [
"https://www.youtube.com/watch?v=CaMTIgxCSqU",
"https://www.youtube.com/watch?v=OrLEoIsMIAc",
"https://www.youtube.com/watch?v=bSOREVMEFnM"
]
},
}

175
docs/html/training/app/approach.jd Normal file
View File

@@ -0,0 +1,175 @@
page.title=Gather, Insight, Action
meta.tags="android, performance", "app"
page.tags="app"
page.article=true
@jd:body
<style>
.app-icon {
height: 64px;
}
.app-icon-small {
height: 32px;
}
.app-icon-inline {
height: 16px;
}
</style>
<p>Your app has a performance problem if it does not instantly respond
to a user action, stutters, or makes the user wait at any point.
This lesson introduces the most basic performance test for your app,
and a process for iteratively finding and fixing performance problems. </p>
<h2><img class="app-icon" src="{@docRoot}images/training/app/app_icon_gather.png">
Litmus test your app</h2>
<p>To find out whether your app has performance issues, you don't need fancy
tools. </p>
<p>Do the following:</p>
<ol>
<li>Install your app on the lowest-end device that your target audience might have.</li>
<li>Use your app as a user would, and keep detailed notes on even the smallest wait, stutter,
or unresponsiveness. Watch out for increasing slowness over time.</li>
<li>Hand the device to a friend and take notes while they are using it.</li>
<li>If you would like feedback from a larger audience, consider running a mini-usability test,
such as described in
<a href="https://www.youtube.com/watch?v=0YL0xoSmyZI">
Guerilla Testing with Usability Cafe</a>.</li>
<iframe width="448" height="252"
src="//www.youtube.com/embed/0YL0xoSmyZI?autohide=1&amp;showinfo=0"
frameborder="0" allowfullscreen=""
style="float:none; margin: 0 0 20px 20px;"></iframe>
</ol>
<h2><img class="app-icon" src="{@docRoot}images/training/app/app_icon_insight.png">
Approach performance problems methodically</h2>
<p><b>If these hands-on tests didn't reveal any performance problems,</b></p>
<ul>
<li>you could do nothing further, or</li>
<li>you can dive deeper and make your app perform even better. This could benefit users with
slower connections or on simpler devices, and increase your potential audience.</li>
</ul>
<p><b>If you gathered any notes related to performance, then performance is a problem for your
app.</b></p>
<p>Once you have subjectively established that your app could benefit from performance tuning, we
have two recommendations for an objective and systematic approach to finding and fixing
performance problems faster.</p>
<h3>1. Use performance profiling tools</h3>
<p>Android and Android Studio come with many
<a href="http://developer.android.com/tools/performance/index.html">
performance profiling tools</a>
to help you
identify performance problems and track down where they are in your code. And after you have
changed your code, run the tools again to measure the impact of your change. Compare results to
make sure you've fixed the right problem, and find out whether you need to
make additional performance improvements.</p>
<p>To learn more about why you should use tools, see
<a href="https://www.youtube.com/watch?v=SA4j6KKjMRk">Tools Not Rules</a>.</p>
<iframe width="448" height="252"
src="//www.youtube.com/embed/SA4j6KKjMRk?autohide=1&amp;showinfo=0"
frameborder="0" allowfullscreen=""
style="float:none; margin: 0 0 20px 20px;"></iframe>
<h3>2. Follow the Performance Tuning Lifecycle</h3>
<p>When optimizing your application, you must be able to measure its state, make changes, and
then evaluate the performance differences of these changes. Thus, the Performance Tuning
Lifecycle is built around the concept of "What you can measure, you can
optimize".</p>
<p>The Performance Tuning Lifecycle (Figure 1), consists of three phases:
gather information, gain insight, and take action.</p>
<div class="figure" style="">
<img src="{@docRoot}images/training/app/gather_insight_action.png"
alt=""
height=""/>
<p class="img-caption">
<strong>Figure 1. </strong>The Performance Tuning Lifecycle.
</p>
</div>
<p><b>
<img class="app-icon-small" src="{@docRoot}images/training/app/app_icon_gather.png">
Gather Information.</b> <br>
Use the
<a href="http://developer.android.com/tools/performance/index.html">
performance profiling tools</a>
to capture data
about your app. Since most tools are specialized, you may need to run several tools.</p>
<p><b>
<img class="app-icon-small" src="{@docRoot}images/training/app/app_icon_insight.png">
Gain Insight.</b><br>
Take the time to understand what your gathered data means for your app.
You may need to go through several iterations of gathering information and gaining insight to
pinpoint what the problem (or problems!) is.</p>
<p><b>
<img class="app-icon-small" src="{@docRoot}images/training/app/app_icon_action.png">
Take Action.</b><br>
Take all the information and all the insights, and determine and evaluate
different ways to solve your problem. Taking action can take different forms, and what you decide
to do depends on your situation and context, which may also include coding resources, budgets,
and deadlines.</p>
<p>And once you've taken action, verify that your changes had the desired
outcome:</p>
<p>
<img class="app-icon-inline" src="{@docRoot}images/training/app/app_icon_gather.png">
Gather a second set of data.
<img class="app-icon-inline" src="{@docRoot}images/training/app/app_icon_insight.png">
Compare it to your original data.
<img class="app-icon-inline" src="{@docRoot}images/training/app/app_icon_action.png">
Make more changes...
and repeat this process until your app consistently responds smoothly to all user actions, never
stutters, and never makes the user wait. On all target devices.</p>
<p>To learn more, see
<a href="https://youtu.be/_kKTGK-Cb_4">The Performance Tuning Lifecycle</a>.</p>
<iframe width="448" height="252"
src="//www.youtube.com/embed/_kKTGK-Cb_4?autohide=1&amp;showinfo=0"
frameborder="0" allowfullscreen=""
style="float:none; margin: 0 0 20px 20px;"></iframe>
<h2><img class="app-icon" src="{@docRoot}images/training/app/app_icon_action.png">
Start improving performance</h2>
<ul>
<li>If your notes include problems with the speed or smoothness of animations, or the app does
not consistently respond to user input, start with
<a href="{@docRoot}training/app/rendering/index.html">
Optimizing Rendering Performance</a>.</li>
<li>If your app uses the GPS or mobile radio, or makes a lot of networking calls, check
out: <a href="{@docRoot}training/app/battery/index.html">
Optimizing Battery Performance</a>.</li>
</ul>

110
docs/html/training/app/index.jd
View File

@@ -1,4 +1,110 @@
fullpage=true
page.title=Android Performance Patterns
page.tags=app
page.viewport_width=970
meta.tags="android, performance", "app",
page.tags="app"
section.landing=true
header.hide=1
carousel=1
tabbedList=1
excludeFromSuggestions=true
@jd:body
<section class="dac-expand dac-hero dac-section-light">
<div class="wrap">
<div class="cols dac-hero-content">
<div class="col-1of2 col-push-1of2 dac-hero-figure">
<img class="dac-hero-image" src="{@docRoot}images/training/app/madscientist.png" />
</div>
<div class="col-1of2 col-pull-1of2">
<h1 class="dac-hero-title">Android Performance Patterns</h1>
<p class="dac-hero-description">
Everything you need to know about improving your app’s performance. </p>
</p>
<a class="dac-hero-cta" href="{@docRoot}training/app/approach.html">
<span class="dac-sprite dac-auto-chevron"></span>
Test you app's performance
</a><br>
<a class="dac-hero-cta" href="{@docRoot}training/app/rendering/index.html">
<span class="dac-sprite dac-auto-chevron"></span>
Improve rendering performance
</a><br>
<a class="dac-hero-cta" href="{@docRoot}training/app/battery/index.html">
<span class="dac-sprite dac-auto-chevron"></span>
Improve battery utilization
</a><br>
</div>
</div>
</section>
<section class="dac-section dac-section-light">
<div class="wrap">
<p>This series of lessons teaches you how to improve the performance of your
Android applications using a workflow of gathering data, analyzing the data, and
taking action based on your insights.</p><br>
<h2>Performance actions</h2>
<dl>
<dt>
<strong><a href="{@docRoot}training/app/approach.html">
Test Your App's Performance</a></strong>
</dt>
<dd>
Learn how to test your app for performance problems. No tools required.<br>
Then find out how you can methodically address performance issues
following the Performance Improvement Lifecycle.
</dd>
<dt>
<strong><a href="{@docRoot}training/app/rendering/index.html">
Optimizing Rendering Performance</a></strong>
</dt>
<dd>
Learn how to improve the performance of everything related to drawing
and animating the screen. </a></strong>
</dd>
<dt>
<strong><a href="{@docRoot}training/app/battery/index.html">
Optimizing Battery Utilization</a></strong>
</dt>
<dd>
Learn how to efficiently use limited battery resources for
networking requests. </a></strong>
</dd>
</dl><br>
<h2>Resources</h2>
<dl>
<dt>
<strong><a href="https://plus.sandbox.google.com/communities/116342551728637785407">
Android Performance G+ Community</a></strong>
</dt>
<dd>
Join our G+ community for more information, tips and support. It's all about
Performance!
<br><b>#perfmatters</b>.
</dd>
<dt>
<strong><a href="https://www.udacity.com/course/android-performance--ud825">
Android Performance Course on Udacity</a></strong>
</dt>
<dd>
Dive deeply into Android Performance with this from-the-ground-up course.
</dd>
<dt>
<strong><a href="https://www.youtube.com/playlist?list=PLOU2XLYxmsIKEOXh5TwZEv89aofHzNCiu">Android
Performance Patterns on YouTube</a></strong>
</dt>
<dd>
Watch the whole series of Android Performance Patterns videos.
</dd>
</dl>
<br>
</div></section>

296
docs/html/training/app/rendering/hierarchies.jd Normal file
View File

@@ -0,0 +1,296 @@
page.title=Simplify Complex View Hierarchies
meta.tags="android, performance", "app",
page.tags="app"
page.article=true
@jd:body
<style>
.app-icon {
height: 64px;
}
</style>
<p>At the heart of your app is the hierarchy of views that makes up the user interface and the
visual experience of users. With feature-rich apps, this hierarchy grows large and complex and
can become a source of performance problems. The most likely symptom you will see is a generic
general slowness of the app, especially when rendering complex views to the screen.</p>
<p>Simplifying or rearranging the view hierarchy of your app can improve performance, especially
on lower-end devices and earlier versions of Android. As an added benefit, your app will become
easier to maintain overall.</p>
<p>Analyzing the view hierarchy is an example of using several tools together to pinpoint and fix
performance problems. It is also an example of eliminating another inefficiency first, so that
your data becomes more precise.</p>
<h2><img class="app-icon" src="{@docRoot}images/training/app/app_icon_gather.png">
Analyze the view hierarchy</h2>
<p>If you have not done so already, reduce overdraw by removing unnecessary backgrounds. This
will remove a common source of overdraw that is not related to your view hierarchy. See
<a href="{@docRoot}training/app/rendering/overdraw.html">
Visualizing and Reducing Overdraw</a>.</p>
<ol>
<li><b>Run the Show GPU View Updates tool</b> on your mobile device. In <b>Developer
Options</b>, scroll to <b>Hardware accelerated rendering</b> and turn on <b>Show GPU view
updates</b>.</li>
<li>Interact with your app.</li>
<li>Views on the screen that are updated will flash red. If you
notice that parts of your screen are flashing, and they have nothing to do with the area that's
being updated, there may be a connection in the view hierarchy that's causing them to be
invalidated improperly. As such, you can focus your efforts on these areas to find problems
faster.</li>
<li><b>Run the
<a href="{@docRoot}tools/performance/profile-gpu-rendering/index.html">
Profile GPU Rendering tool</a>
and look at the blue segments of
the bars.</b> If the blue segments are tall and causing the bars to cross the 16
milliseconds-per-frame line,
your app spends a lot of time updating display lists. The M release of Android adds additional
color segments, and the Measure/Layout segment may also be larger than expected. One reason for
this can be view hierarchies that are unnecessarily complex. See also
<a href="{@docRoot}training/app/rendering/profile-gpu.html">
Improving GPU Rendering Performance</a>.</li>
<li><b>Start the
<a href="{@docRoot}tools/performance/hierarchy-viewer/index.html">
Hierarchy Viewer tool</a>.</b></li>
<li>Find the areas of the view hierarchy where you still see a lot of overdraw in your app.
Consider whether restructuring your views could reduce overdraw.</li>
<li>Identify areas where your view hierarchy is complex, and consider how you could simplify
it.</li>
<li>Profile the view hierarchy from Hierarchy Viewer to confirm or identify additional
potential problem spots. See
<a href="{@docRoot}tools/performance/hierarchy-viewer/profiling.html">
Profiling with Hierarchy Viewer</a>.</li>
</ul>
<h2><img class="app-icon" src="{@docRoot}images/training/app/app_icon_insight.png">
Possible optimizations</h2>
<p>Hierarchy Viewer can help identify these specific issues that are directly related to the
structure of the view hierarchy.</p>
<ul>
<li>Views that do not contribute to the final image. See
<a href="#remove">Remove extraneous views</a>
.</li>
<li>Deep view hierarchies of nested views. Jump to
<a href="#nested">Simplify nested layouts</a>
.</li>
<li>Large number of simple views. Check out
<a href="#reduce">Reduce the number of views</a>
.</li>
<li>Nested layouts that trigger multiple layout passes. Got to
<a href="#flatten"> Flatten the view hierarchy</a>
.</li>
</ul>
<p>Minimizing these issues can improve performance, especially on older devices. For your own
benefit, these simplifications will make your code easier to maintain and profile in the
future.</p>
<h2 id="remove"><img class="app-icon" src="{@docRoot}images/training/app/app_icon_action.png">
Remove extraneous views</h2>
<p>Remove views that do not contribute to the final image.<p>
<p>To identify views that do not contribute to the final image on the screen:</p>
<ol>
<li>In Hierarchy Viewer, walk through the hierarchy starting from the leaves towards the
root.</li>
<li>Click each node to see how the screen looks at that node. Alternatively, look at the Layout
View window to see how views are layering themselves.</li>
<li>If a view that was previously visible becomes fully hidden, then you may not need that view
at all, as shown in Figure 1.</li>
</ol>
<div>
<img src="{@docRoot}images/training/app/remove_hidden_views.png"
alt=""
height="" />
<p class="img-caption">
<strong>Figure 1. </strong>Views 2 and 3 are fully obscured and can be safely removed.
</p>
</div>
<p>Eliminate from your code the views that are completely covered, never displayed, or outside
the screen.</p>
<h2 id="nested"><img class="app-icon" src="{@docRoot}images/training/app/app_icon_action.png">
Simplify nested layouts</h2>
<p>Simplify nested layouts that trigger multiple layout passes.</p>
<p>Some layout containers, such a RelativeLayout, require two layout passes in order to finalize
the positions of their child views. As a result, their children also require two layout passes.
When you nest these types of layout containers, the number of layout passes increases
exponentially with each level of the hierarchy.</p>
<p>For example, a view inside a grid view inside a list view inside a relative layout could get
laid out 8 times(!) as shown in Figure 2.</p>
<div>
<img src="{@docRoot}images/training/app/layout_pass_multiplication.png"
alt=""
height="" />
<p class="img-caption">
<strong>Figure 2. </strong>Example of layout pass multiplication.
</p>
</div>
<p><b>Watch out for the following containers and conditions:</b></p>
<ul>
<li><a href="http://developer.android.com/reference/android/widget/RelativeLayout.html">
RelativeLayout</a></li>
<li><a href="http://developer.android.com/reference/android/widget/LinearLayout.html">
LinearLayouts</a>
that also use the <code>measureWithLargestChild</code> layout weight</li>
<li><a href="http://developer.android.com/reference/android/widget/GridView.html">
GridViews</a> that also use gravity.</li>
<li>Custom containers that are subclasses of the above.</li>
<li>Some uses of weights in layouts can also trigger multiple layout passes.</li>
</ul>
<p><b>Using any of these containers as</b></p>
<ul>
<li>the root of a complex view hierarchy,</li>
<li>the parent of a deep subtree,</li>
<li>or using many of them in your layout,</li>
</ul>
<p>can result in noticeable performance penalties.</p>
<p>For more information, see
<a href="https://www.youtube.com/watch?v=dB3_vgS-Uqo">Double Layout Taxation</a>.</p>
<iframe width="448" height="252"
src="//www.youtube.com/embed/dB3_vgS-Uqo?autohide=1&amp;showinfo=0"
frameborder="0" allowfullscreen=""
style="float:none; margin: 0 0 20px 20px;"></iframe>
<p>Consider whether you can achieve the same layout using a container configuration that does not
result in these exponential numbers of layout passes. For example:</p>
<ul>
<li>Replace a RelativeLayout with a GridView (without gravity) as your root view.</li>
</ul>
<p>In addition, you can apply all the techniques mentioned in this document to simplify the view
hierarchy.</p>
<ul>
<li>Reduce the number of layouts by eliminating or combining views. See
<a href="#remove">
Remove Views that do not Contribute to the Final Image</a>
and
<a href="#reduce">
Reduce the Number of Views</a>.
</li>
<li>Eliminate overlapping views where possible.</li>
<li>Flatten the view hierarchy by choosing different layouts. See
<a href="#flatten">Flatten the View Hierarchy</a>
</li>
<li>Redesign your app's user interface to use fewer views.</li>
</ul>
<p>For more tips, see
<a href="http://developer.android.com/training/improving-layouts/optimizing-layout.html">
Optimizing Layout Hierarchies</a>.</p>
<h2 id="reduce"><img class="app-icon" src="{@docRoot}images/training/app/app_icon_action.png">
Reduce the number of views</h2>
<p>If your user interface has many simple views, you may be able to combine some of them without
diminishing the user experience, as shown in Figure 3.</p>
<div>
<img src="{@docRoot}images/training/app/combine_views.png"
alt=""
height="" />
<p class="img-caption">
<strong>Figure 3. </strong>Example of combining views.
</p>
</div>
<p>Both the changes below may affect how you present information to the user and will include
design trade-offs. Remember that performance is more important than anything else for your
app's success, and opt for simplicity wherever you can.</p>
<ul>
<li>Reduce the number of views by combining them into fewer views. For example, you can combine
text views if you reduce the number of fonts and styles.</li>
<li>Redesign your app's user interface to use fewer views.</li>
</ul>
<h2 id="flatten"><img class="app-icon" src="{@docRoot}images/training/app/app_icon_action.png">
Flatten the view hierarchy</h2>
<p>Does your view hierarchy have parts that look like the nested arrangement on the left of
Figure 4?</p>
<div>
<img src="{@docRoot}images/training/app/flatten_view_hierarchy.png"
alt=""
height="" />
<p class="img-caption">
<strong>Figure 4. </strong>This deep view hierarchy can be flattened to improve performance.
</p>
</div>
<p>Flatten the view hierarchy by replacing nested linear layouts with relative layouts wherever
possible. See
<a href="http://developer.android.com/training/improving-layouts/optimizing-layout.html">
Optimizing Layout Hierarchies</a>.</p>
<h2>Example of simplifying a view hierarchy</h2>
<p>Watch a screencast which shows how to apply all these techniques to simplify a view
hierarchy. See
<a href="https://www.youtube.com/watch?v=-FUw8HMbmBQ&amp">
Optimizing Layouts with Hierarchy Viewer</a>.</p>
<h2>Advanced analysis</h2>
<p>Use the
<a href="http://developer.android.com/tools/debugging/improving-w-lint.html">Lint tool</a>
on your layout files to search for possible view hierarchy optimizations. See
<a href="http://developer.android.com/training/improving-layouts/optimizing-layout.html#Lint">
Optimizing Layout Hierarchies: Use Lint</a>.</p>

92
docs/html/training/app/rendering/index.jd
View File

@@ -1,4 +1,92 @@
page.title=Optimizing Rendering Performance
page.title=Rendering Performance
page.tags=render
page.article=true
@jd:body
<p>The most common performance problems are related to how your app draws, and how that
eventually appears on the user's screen.</p>
<p><b>Finding rendering problems</b> is an iterative process of using hands-on testing to
identify problem spots, harness tools to discover the underlying cause, and improve your code.
See also <a href="{@docRoot}/training/app/approach.html">
Test Your App's Performance</a>.</p>
<p><b>Optimizing rendering performance</b> means to remove unnecessary work, simplify structures
and processes, manage bitmaps properly, and be mindful of the natural constraints imposed by the
hardware and the Android system.</p>
<p><b>The result of great rendering performance</b> is instantly INVISIBLE to your users. That
is, your app runs so fast and smoothly, that users fully focus on their task, not on your
app's UI and performance.</p>
<p>You can test for and improve common rendering problems by using the tools and strategies
recommended in this course.</p>
<h2>Lessons</h2>
<dl>
<dt>
<strong><a href="{@docRoot}training/app/rendering/overdraw.html">
Visualizing and Reducing Overdraw</a></strong>
</dt>
<dd>
Every time your app draws a pixel on the screen, it takes time. Learn how to
find and fix performance problems related to drawing the same pixel more than once
per screen.
</dd>
<dt>
<strong><a href="{@docRoot}training/app/rendering/profile-gpu.html">
Improving GPU Rendering Performance</a></strong>
</dt>
<dd>
The most common issues that can make your app slow are related to the process of
drawing on the screen. Learn how to find and fix issues that keep your app from
rendering smoothly.
</dd>
<dt>
<strong><a href="{@docRoot}training/app/rendering/hierarchies.html">
Simplifying Complex View Hierarchies</a></strong>
</dt>
<dd>
With feature-rich apps, the view hierarchy can grow large and complex and become a
source of performance problems. Learn how to examine and simplify you app's view
hierarchy.
</dd>
<dt>
<strong><a href="{@docRoot}training/app/rendering/rendering-checklist.html">
Rendering Problems Checklist</a></strong>
</dt>
<dd>
There are many issues that can affect the rendering performance of your app. Learn
how to diagnose and fix the most common ones.
</dd>
</dl>
<h2>Resources</h2>
<dl>
<dt>
<strong><a href="https://plus.sandbox.google.com/communities/116342551728637785407">
Android Performance G+ Community</a></strong>
</dt>
<dd>
Join our G+ community for more information, tips, and support. It's all about
Performance!
<br>#perfmatters.
</dd>
<dt>
<strong><a href="https://www.udacity.com/course/android-performance--ud825">
Android Performance Course on Udacity</a></li></strong>
</dt>
<dd>
Dive deeply into Android Performance with this from-the-ground-up course.
</dd>
<dt>
<strong><a href="https://www.youtube.com/playlist?list=PLOU2XLYxmsIKEOXh5TwZEv89aofHzNCiu">Android
Performance Patterns on YouTube</a></strong>
</dt>
<dd>
Watch the whole series of Android Performance Patterns videos.
</dd>
</dl>

159
docs/html/training/app/rendering/overdraw.jd Normal file
View File

@@ -0,0 +1,159 @@
page.title=Visualize and Reduce Overdraw
page.tags=render
page.article=true
@jd:body
<style>
.app-icon {
height: 64px;
}
</style>
<p>Every time your app draws a pixel on the screen, it takes time. Every time your app draws a
pixel that has already been drawn, it wastes time. Drawing a pixel more than once per screen
refresh is called <i>o</i><i>verdraw</i>, and it's a common problem affecting
the performance of modern applications. To be efficient, every time your app refreshes the
screen, it should draw every changed pixel only once.</p>
<p>For example, an app might draw a stack of 52 overlapping cards, with only the last card fully
visible. Completely drawing the 51 cards that are underneath and partially covered, is an example
of overdraw.</p>
<div class="figure" style="float:none">
<img src="{@docRoot}images/training/app/stacked_cards.png"
alt=""
height="" />
<p class="img-caption">
<strong>Figure 1. </strong>Example of card stack with potential overdraw.
</p>
</div>
<p>Watch the
<a href="https://www.youtube.com/watch?v=T52v50r-JfE">Understanding Overdraw</a>
video
for a detailed introduction, and see the rest of this page for more on finding and fixing
overdraw.</p>
<iframe width="448" height="252"
src="//www.youtube.com/embed/T52v50r-JfE?autohide=1&amp;showinfo=0"
frameborder="0" allowfullscreen=""
style="float:none; margin: 0 0 20px 20px;"></iframe>
<p class="note"><b>Note:</b> Reducing overdraw can save significant GPU resources and greatly
decrease the time it takes to draw a frame. Reducing overdraw may have a significant impact, if it
is the biggest performance issue your app has; or it may have no noticeable impact, if you are on
a fast device, or if your app has other, much bigger performance issues.</p>
<h2><img class="app-icon" src="{@docRoot}images/training/app/app_icon_gather.png">
Test for overdraw</h2>
<p>You can visualize overdraw using color tinting on your device with the
<a href="{@docRoot}tools/performance/debug-gpu-overdraw/index.html">Debug GPU Overdraw tool</a>.
</p>
<p>To turn on Debug GPU Overdraw on your mobile device:</p>
<ol>
<li>Open <b>Settings.</b></li>
<li>Tap <b>Developer Options</b>.</li>
<li>In the <i>Hardware accelerated rendering</i> section, select <b>Debug GPU
Overdraw</b>.</li>
<li>In the Debug GPU overdraw popup, select <b>Show overdraw areas</b>.</li>
</ol>
<p>See
<a href="{@docRoot}tools/performance/debug-gpu-overdraw/index.html">Debug GPU Overdraw</a>
for a full tutorial, or try the <a href=
"https://io2015codelabs.appspot.com/codelabs/android-performance-debug-gpu-overdraw#1">Debug
GPU Overdraw Codelab</a>.</p>
<h2><img class="app-icon" src="{@docRoot}images/training/app/app_icon_insight.png">
Interpret the Debug GPU Overdraw output</h2>
<p>As a general rule, if at any given point your app is drawing something that the user does not
see, don't draw it. More specifically, Debug GPU Overdraw highlights can guide
you to the following issues:</p>
<ul>
<li><b>Unnecessary backgrounds.</b> See
<a href="#backgrounds">Eliminate unnecessary backgrounds</a>.</li>
<li><b>Areas of the screen that have not changed are drawn.</b> See
<a href="#clip">Clip generously</a>.</li>
<li><b>Complex or poorly organized view hierarchy.</b> See
<a href="{@docRoot}training/app/rendering/hierarchies.html">
Simplifying Complex View Hierarchies</a>.</li>
</ul>
<h2 id="backgrounds"><img class="app-icon" src="{@docRoot}images/training/app/app_icon_action.png">
Eliminate unnecessary backgrounds</h2>
<p>Search your code for <code>android:background</code>, and for each
background, determine whether it's needed and visible on the screen.</p>
<p>Removing unnecessary backgrounds is a quick way of improving rendering performance. An
unnecessary background may never visible, because it's completely covered by
everything else the app is drawing in that view. For example, a parent's default
background that is overdrawn by the children's custom backgrounds.</p>
<p>You can remove backgrounds by removing the <code>android:background</code>? line of code in an view.</p>
<p><b>Before:</b></p>
<pre>
&lt;FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="@+id/activity_chatum_latinum_container"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@android:color/white" <===== Background
tools:context=".MainActivity"
tools:ignore="MergeRootFrame" /&gt;
</pre>
<p><b>After:</b></p>
<pre>
&lt;FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="@+id/activity_chatum_latinum_container"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity"
tools:ignore="MergeRootFrame" /&gt;
</pre>
<h2 id="clip"><img class="app-icon" src="{@docRoot}images/training/app/app_icon_action.png">
Clip generously</h2>
<p>Find areas that are drawn unnecessarily and clip generously.</p>
<p>When you are using custom views, you may be redrawing areas of the screen that have not
changed.</p>
<p>For each update, even if only a portion of a custom view has changed, the entire view must be
rebuilt. This is most common for views that use Canvas for drawing. For example, if you draw a
small circle in a corner of the view, the whole view gets rebuilt.</p>
<p>The Android system does to a good job at culling views that are 100% invisible or overlapped
by another view, but cannot eliminate more complex views, for example those that include
text transparency or rounded corners.</p>
<p>Before you draw a custom view, test whether it's visible at all. If it is
visible, only draw the portions that the user sees.</p>
<p>See <a href="https://www.youtube.com/watch?v=vkTn3Ule4Ps">
Overdraw, ClipRect, QuickReject</a>.</p>
<iframe width="448" height="252"
src="//www.youtube.com/embed/vkTn3Ule4Ps?autohide=1&amp;showinfo=0"
frameborder="0" allowfullscreen=""
style="float:none; margin: 0 0 20px 20px;"></iframe>

356
docs/html/training/app/rendering/profile-gpu.jd Normal file
View File

@@ -0,0 +1,356 @@
page.title=Improve GPU Rendering Performance
meta.tags="android, performance", "app"
page.tags="app"
page.article=true
@jd:body
<style>
.app-icon {
height: 64px;
}
</style>
<p>The most common issues that can make your app slow are related to the process of drawing on
the screen. Android provides the
<a href="{@docRoot}tools/performance/profile-gpu-rendering/index.html">Profile GPU Rendering</a>
tool on your
device to analyze the rendering performance of your app. The Profile GPU Rendering tool draws a
graph on the screen to show the rendering performance of each window.</p>
<p>This page introduces how to use the Profile GPU Rendering tool and interpret its graphs, and,
depending on your findings, suggests what to try next to optimize your app's
performance.</p>
<p>For a quick overview of the tool and how to use it, watch the embedded
<a href="https://www.youtube.com/watch?v=VzYkVL1n4M8">Profile GPU Rendering</a> video.
Then profile your app and analyze the results following the steps
below.</p>
<iframe width="448" height="252"
src="//www.youtube.com/embed/VzYkVL1n4M8?autohide=1&amp;showinfo=0"
frameborder="0" allowfullscreen=""
style="float: none; margin: 0 0 20px 20px;"></iframe>
<h2><img class="app-icon" src="{@docRoot}images/training/app/app_icon_gather.png">
Graph the rendering performance of your app</h2>
<p>Turn on Profile GPU Rendering:</p>
<ol>
<li>On your mobile device, go to <b>Settings &gt;</b> <b>Developer Options</b>.</li>
<li>In the <i>Monitoring</i> section, select <b>Profile GPU Rendering</b>.</li>
<li>In the Profile GPU Rendering popup, choose <b>On screen as bars</b> to overlay the graphs
on the screen of your mobile device.</li>
<li>Run your app and interact with it to see the graph grow and change.</li>
</ol>
<p>You are going to see a chart of multi-colored bars on your screen, similar to Figure 1. Each
vertical bar represents one frame of rendering for that activity, that is, one redrawing of the
window on the screen.</p>
<div>
<img src="{@docRoot}images/training/app/profile_gpu_rendering_annotated_graph.png"
alt=""
height="" />
<p class="img-caption">
<strong>Figure 1. </strong>Profile GPU Rendering graph.
</p>
</div>
<p>The height and coloring of a bar, as shown in Figure 1, indicate how fast each frame was
created, and how much time different phases of the rendering process required.</p>
<p>The green line marks 16 milliseconds. If a bar crosses that line, it took more than 16
milliseconds to create and draw that window on the screen. If this happens often, or if any bars
cross the line by a lot, users can probably notice a delay or stutter while using the app.</p>
<h2><img class="app-icon" src="{@docRoot}images/training/app/app_icon_insight.png">
Interpret the Profile GPU Rendering graph</h2>
<p>Look at the colored segments of the bars that cross the green 16 millisecond line, in
particular any segments that are much taller than their neighbors.</p>
<p>If you see that</p>
<ul>
<li><b>blue Update</b> segments are tall, updating views in the CPU takes too long. Jump to
<a href="#blue">Speed up view updating</a>.</li>
<li><b>purple Transfer</b> segments are tall, transferring resources from the CPU to the GPU is
too slow. See <a href="#purple">
Transfer less data</a>.</li>
<li><b>red Execute</b> segments are tall, submitting commands to the GPU takes too long. Go to
<a href="#red">Reduce the number of commands</a>.</li>
<li><b>orange Process</b> segments are tall, the CPU is waiting for the GPU. Read
<a href="#orange">Give less work to the GPU</a>.</li>
</ul>
<h2><img class="app-icon" src="{@docRoot}images/training/app/app_icon_insight.png">
Advanced Analysis</h2>
<p>To improve the performance of your app, you may need to take one, some, or all of the actions
on this page. You may need to use more additional tools or investigate other sources of performance
issues.</p>
<p>For example:</p>
<ul>
<li>Run the
<a href="{@docRoot}tools/performance/systrace/index.html">Systrace</a> tool
to log specific app execution data over time and find
performance bottlenecks.</li>
<li>Gather more granular data about how your app draws on a frame-by-frame basis, with the
<a href="https://source.android.com/devices/tech/debug/dumpsys.html">dympsys tool</a>.
Run
<a href="https://developer.android.com/preview/testing/performance.html">
adb shell dumpsys gfxinfo framestats</a> (version M or later).</li>
<li>Your app may be stuttering because it is doing too much work in the UI thread (version L or
later). Use
<a href="{@docRoot}tools/performance/traceview/index.html">Traceview</a>
to log method execution over time, and examine thread
timelines and call stacks.</li>
</ul>
<h2 id="blue"><img class="app-icon" src="{@docRoot}images/training/app/app_icon_insight.png">
Blue: Updating views takes too long</h2>
<p>The blue Update segment of the bar represents the time used by the CPU to create and update
all the views for this rendering of the screen. This is part of a processing sequence called the
invalidation pipeline. To learn more about the invalidation pipeline, see
<a href="https://www.youtube.com/watch?v=we6poP0kw6E">Views, Invalidations, and Performance</a>
and <a href="https://www.youtube.com/watch?v=dB3_vgS-Uqo">Double Layout Taxation</a>.</p>
<iframe width="448" height="252"
src="//www.youtube.com/embed/we6poP0kw6E?autohide=1&amp;showinfo=0"
frameborder="0" allowfullscreen=""
style="float: none; margin: 0 0 20px 20px;"></iframe>
<iframe width="448" height="252"
src="//www.youtube.com/embed/dB3_vgS-Uqo?autohide=1&amp;showinfo=0"
frameborder="0" allowfullscreen=""
style="float: none; margin: 0 0 20px 20px;"></iframe>
<p>If this blue bar segment is tall, it can indicate that your app does too much work creating
and updating views, or is updating too many views or views that are too complex.</p>
<h2><img class="app-icon" src="{@docRoot}images/training/app/app_icon_action.png">
Blue: Speed up view updating</h2>
<p><b>Reduce overdraw.</b></p>
<ul>
<li>Use the
<a href="{@docRoot}tools/performance/debug-gpu-overdraw/index.html">Debug GPU Overdraw tool</a>
and optimize areas that appear red in the tool.
See <a href="{@docRoot}training/app/rendering/overdraw.html">
Visualizing and Reducing Overdraw</a>.</li>
</ul>
<p><b>Simplify complex view hierarchies.</b></p>
<ul>
<li>Use the
<a href="{@docRoot}tools/performance/hierarchy-viewer/index.html">Hierarchy Viewer tool</a>
to analyze and profile your app's
view hierarchy, and simplify complex views.
See <a href="{@docRoot}training/app/rendering/hierarchies.html">
Simplifying Complex View Hierarchies</a>.</li>
</ul>
<p><b>Optimize onDraw() for custom views.</b></p>
<ul>
<li>If you are using custom views, investigate your onDraw() methods. Doing large amounts of
work in onDraw() can slow down the Update phase of the rendering process. Move anything not
directly related to drawing outside of the onDraw() method, perhaps even into a separate
thread.</li>
<li>Don't paint large bitmaps in your onDraw() method. See
<a href="https://developer.android.com/training/displaying-bitmaps/index.html">
Displaying Bitmaps Efficiently</a>.</li>
<li>Calculate anything that you can ahead of time (not in onDraw()). See
<a href="http://developer.android.com/training/custom-views/optimizing-view.html">Optimizing the View</a>.</li>
</ul>
<h2 id="purple"><img class="app-icon" src="{@docRoot}images/training/app/app_icon_insight.png">
Purple: Transferring resources is too slow</h2>
<p>The purple segment of the bar represents the time the GPU Driver spent transferring resources
from the CPU to the GPU. Moving a significant amount of data between processors takes time, and
the larger the data to be moved, the longer the delay in execution.
See <a href="https://www.youtube.com/watch?v=zVK6TKSx1lU">CPU, GPU, and your Android</a>.</p>
<iframe width="448" height="252"
src="//www.youtube.com/embed/zVK6TKSx1lU?autohide=1&amp;showinfo=0"
frameborder="0" allowfullscreen=""
style="float: none; margin: 0 0 20px 20px;"></iframe>
<h2><img class="app-icon" src="{@docRoot}images/training/app/app_icon_action.png">
Purple: Reduce bitmap sizes</h2>
<ul>
<li>Use the smallest bitmap dimensions possible by resizing and pre-scaling bitmaps. See
<a href="https://www.youtube.com/watch?v=HY9aaXHx8yA">Reusing Bitmaps</a>
and this <a href="https://www.youtube.com/watch?v=12cB7gnL6po">Bitmap Scaling code example</a>.</li>
<iframe width="448" height="252"
src="//www.youtube.com/embed/HY9aaXHx8yA?autohide=1&amp;showinfo=0"
frameborder="0" allowfullscreen=""
style="float: none; margin: 0 0 20px 20px;"></iframe>
<li>Use a different, smaller pixel format.
See <a href="https://www.youtube.com/watch?v=1WqcEHXRWpM">Smaller Pixel Formats</a>.</li>
<iframe width="448" height="252"
src="//www.youtube.com/embed/1WqcEHXRWpM?autohide=1&amp;showinfo=0"
frameborder="0" allowfullscreen=""
style="float: none; margin: 0 0 20px 20px;"></iframe>
<li>Optimize your app's UI objects. Reduce overdraw, reuse UI
elements, prefer standard over custom resources, be frugal with fonts, and control alpha
rendering.
See also <a href="https://www.youtube.com/watch?v=wIy8g8yNhNk">
The Hidden Cost of Transparency</a>.</li>
<iframe width="448" height="252"
src="//www.youtube.com/embed/wIy8g8yNhNk?autohide=1&amp;showinfo=0"
frameborder="0" allowfullscreen=""
style="float: none; margin: 0 0 20px 20px;"></iframe>
</ul>
<h2 id="red"><img class="app-icon" src="{@docRoot}images/training/app/app_icon_insight.png">
Red: Submitting commands to the GPU is too slow</h2>
<p>The red segment of the bar represents the time spent by Android's 2D renderer issuing commands
to OpenGL to draw and redraw display lists. The height of the red bar is proportional to how much
time was spent submitting commands to the GPU for the total of all views that need to be redrawn.
Display lists that do more complex operations contribute more time to the overall size of the red
bar. The size of the red bar is an indicator of the <i>complexity</i> of the display
lists' operations. The <i>number</i> of display lists does not directly
correlate to the size of the red bar.</p>
<ul>
<li>Learn more about how the CPU creates and submits commands to the GPU, and how the GPU
Driver can become a bottleneck in your app's rendering pipeline. Watch <a href=
"https://www.youtube.com/watch?v=zVK6TKSx1lU">CPU, GPU, and your Android</a>.</li>
<iframe width="448" height="252"
src="//www.youtube.com/embed/zVK6TKSx1lU?autohide=1&amp;showinfo=0"
frameborder="0" allowfullscreen=""
style="float:none; margin: 0 0 20px 20px;"></iframe>
<li>Find out when Views get invalidated, how that affects performance, and how to reduce this
performance problem. Check out <a href=
"https://www.youtube.com/watch?v=we6poP0kw6E">Views, Invalidations, and Performance</a>.</li>
<iframe width="448" height="252"
src="//www.youtube.com/embed/we6poP0kw6E?autohide=1&amp;showinfo=0"
frameborder="0" allowfullscreen=""
style="float:none; margin: 0 0 20px 20px;"></iframe>
<li>Under some conditions, views get laid out multiple times, which can be a significant
performance hit for large view hierarchies. Learn more by watching <a href=
"https://www.youtube.com/watch?v=dB3_vgS-Uqo">Double Layout
Taxation</a>.</li>
<iframe width="448" height="252"
src="//www.youtube.com/embed/dB3_vgS-Uqo=1&amp;showinfo=0"
frameborder="0" allowfullscreen=""
style="float:none; margin: 0 0 20px 20px;"></iframe>
</ul>
<h2><img class="app-icon" src="{@docRoot}images/training/app/app_icon_action.png">
Red: Reduce the number of commands</h2>
<p><b>Reduce overdraw.</b></p>
<ul>
<li>Run the
<a href="{@docRoot}tools/performance/debug-gpu-overdraw/index.html">Debug GPU Overdraw tool</a>
to show which view objects are doing
unnecessary redrawing. See also
<a href="{@docRoot}training/app/rendering/overdraw.html">
Visualizing and Reducing Overdraw</a>.</li>
</ul>
<p><b>Limit alpha blending.</b></p>
<ul>
<li>Look for transparent views doing alpha blending. See <a href=
"https://www.youtube.com/watch?v=wIy8g8yNhNk">The Hidden Cost of Transparency</a>.</li>
<iframe width="448" height="252"
src="//www.youtube.com/embed/wIy8g8yNhNk?autohide=1&amp;showinfo=0"
frameborder="0" allowfullscreen=""
style="float: none; margin: 0 0 20px 20px;"></iframe>
</ul>
<h2 id="orange"><img class="app-icon" src="{@docRoot}images/training/app/app_icon_insight.png">
Orange: The CPU is waiting for the GPU</h2>
<p>The orange segment of the bar represents the length of time that the CPU is waiting for the
GPU to finish its work. After transferring data to the GPU, the CPU waits for the GPU to
acknowledge receipt. If this bar segment gets tall, it means the app is doing too much complex
work on the GPU, and the GPU is unable to keep up with the data flow from the CPU.</p>
<h2><img class="app-icon" src="{@docRoot}images/training/app/app_icon_action.png">
Give less work to the GPU</h2>
<p><b>Simplify complex view hierarchies.</b></p>
<ul>
<li>Use the
<a href="{@docRoot}tools/performance/hierarchy-viewer/index.html">Hierarchy Viewer tool</a>
to see whether you can reduce the number
of views. See
<a href="{@docRoot}training/app/rendering/hierarchies.html">
Simplifying Complex View Hierarchies</a>.</li>
</ul>
<p><b>Optimize drawing.</b></p>
<ul>
<li>Reduce the number of calls to Canvas drawing methods by batching operations. Learn more
about <a href="https://www.youtube.com/watch?v=PEgkXFPcDTE">Batching</a>.</li>
<iframe width="448" height="252"
src="//www.youtube.com/embed/PEgkXFPcDTE?autohide=1&amp;showinfo=0"
frameborder="0" allowfullscreen=""
style="float: none; margin: 0 0 20px 20px;"></iframe>
<li>Look at draw calls that include bitmap uploads (for pre-L versions), paths, or shadow work,
and simplify them. See
<a href="https://www.youtube.com/watch?v=wIy8g8yNhNk">The Hidden Cost of Transparency</a>.</li>
<iframe width="448" height="252"
src="//www.youtube.com/embed/wIy8g8yNhNk?autohide=1&amp;showinfo=0"
frameborder="0" allowfullscreen=""
style="float: none; margin: 0 0 20px 20px;"></iframe>
</ul>

277
docs/html/training/app/rendering/rendering-checklist.jd Normal file
View File

@@ -0,0 +1,277 @@
page.title=Rendering Problems Checklist
page.tags=render
page.article=true
@jd:body
<p>The following checklist summarizes common rendering problems and solutions.
For each problem, learn how users are affected, how to diagnose, and how to
approach fixing it. Use the linked resources for details on the suggested solutions.</p>
<!----------------------------->
<h2>Excessive Overdraw</h2>
<p><b>What the user sees:</b><br>
The most likely symptom is a generic general slowness of screen
rendering, as well as stuttering animations.</p>
<p><b>Use this tool:</b><br>
<a href="{@docRoot}tools/performance/debug-gpu-overdraw/index.html">
Debug GPU Overdraw</a></p>
<p><b>What you see:</b><br>
Red-colored views indicate multiple layers of unnecessary drawing.</p>
<p><b>Problem:</b><br>
Your app redraws the same pixels multiple times, resulting in
overdraw.</p>
<p><b>Solution:</b><br>
If you are drawing pixels on the screen that the user never sees, you might
be able to improve drawing performance by removing unnecessary backgrounds, reorganizing views,
and applying clipping techniques to custom views.</p>
<p><b>Optimize your app:</b><br>
<a href="{@docRoot}training/app/rendering/overdraw.html">Reduce Overdraw</a>,
<a href="{@docRoot}training/app/rendering/hierarchies.html">Simplifying View Hierarchies</a>,
and
<a href="https://www.youtube.com/watch?v=vkTn3Ule4Ps">Apply Clipping</a>.</p>
<!----------------------------->
<h2>View Hierarchies that are too complex</h2>
<p><b>What the user sees:</b><br>
The most likely symptom is a generic general slowness of the app,
especially when rendering complex views to the screen.</p>
<p><b>Use this tool:</b><br>
<a href="{@docRoot}tools/performance/hierarchy-viewer/index.html">Hierarchy Viewer</a></p>
<p><b>What you see:</b><br>
A view hierarchy that is deeper than wide, with a lot of nesting. When
you profile your view hierarchy, there are red dots in leaf nodes.
See <a href="{@docRoot}tools/performance/hierarchy-viewer/profiling.html">
Profiling with Hierarchy Viewer</a>.</p>
<p><b>Problem:</b><br>
The more complex and deep your view hierarchy, the more likely it is that a
simple change to a view can trigger multiple passes through large parts of this hierarchy to
recalculate the sizes, positions, and layout of affected views.</p>
<p><b>Solution:</b><br>
Flatten and simplify your view hierarchies. Try different layouts. Combine
views.</p>
<p><b>Optimize your app:</b><br>
<a href="{@docRoot}training/app/rendering/hierarchies.html">
Simplify Complex View Hierarchies</a>.</p>
<!----------------------------->
<h2>Too many Invalidations</h2
<p><b>What the user sees:</b><br>
Slow response to user-initiated actions. Sluggish scrolling.</p>
<p><b>Use these tools:</b><br>
On your mobile device, in Developer Options, turn on
<a href="{@docRoot}tools/performance/profile-gpu-rendering/index.html">Profile GPU Rendering</a>
and GPU View Updates.</p>
<p><b>What you see:</b><br>
In Profile GPU Rendering, for bars that cross the 16 millisecond threshold, the
blue updated segment in particular may be large. The M release of Android adds additional color
segments, and the Measure/Layout segment may also be larger than expected.</p>
<p>In GPU View Updates, portions of the screen will flicker wildly in response to user
actions:</p>
<ul>
<li>One portion of the screen continues to flicker long after it has stopped changing visually
for the user.</li>
<li>Large portions of the screen flicker, even though only a small part is changing
visually.</li>
</ul>
<b>Problem:</b><br>
<p>Every time a view changes, the display lists are invalidated and have to be
recreated and executed.</p>
<b>Solution:</b><br>
<p>While it is impossible to avoid invalidations, minimizing how often they
happen, and how many views are affected, can improve your app's
performance.</p>
<b>Optimize your app:</b><br>
<p>Minimize view invalidations. See
<a href="https://www.youtube.com/watch?v=we6poP0kw6E">Views, Invalidations, and
Performance</a>
and <a href="https://www.youtube.com/watch?v=dB3_vgS-Uqo">Double Layout Taxation</a>.</p>
<!----------------------------->
<h2>Multiple Layout Passes</h2>
<p><b>What the user sees:</b><br>
Slow response to user-initiated actions. Sluggish scrolling.</p>
<p><b>Use these tools:</b><br>
<a href="{@docRoot}tools/performance/hierarchy-viewer/index.html">Hierarchy Viewer</a>.
On your mobile device, in Developer
Options, turn on
<a href="{@docRoot}tools/performance/profile-gpu-rendering/index.html">Profile GPU Rendering</a>
and GPU View Updates.</p>
<p><b>What you see:</b><br>
In Profile GPU Rendering, for bars that cross the 16 millisecond threshold, the
blue segment in particular may be large. In GPU View Updates, large portions of the whole screen
will flicker wildly in response to user actions. In Hierarchy Viewer, look for red dots in the
measure and layout phases, especially on leaf nodes.</p>
<p><b>Problem:</b><br>
Changing the position or size of a view can trigger a cascade of calculations
throughout your view hierarchy to adjust neighboring and parent views.</p>
<p><b>Solution</b><br>
You might be able to improve rendering performance by rearranging or
simplifying your view hierarchy, or by using different layout containers.</p>
<p><b>Optimize your app:</b><br>
<href="{@docRoot}training/app/rendering/hierarchies.html">
Simplify Complex View Hierarchies</a>
and minimize view invalidations.
See <a href=
"https://www.youtube.com/watch?v=we6poP0kw6E">Views, Invalidations, and Performance</a>
and <a href="https://www.youtube.com/watch?v=dB3_vgS-Uqo">Double Layout Taxation</a>.</p>
<!----------------------------->
<h2>Alpha Blending</h2>
<p><b>What the user sees:</b><br>
App slows down whenever views and animations use alpha
rendering.</p>
<p><b>Use this tool:</b><br>
<a href="{@docRoot}tools/performance/profile-gpu-rendering/index.html">Profile GPU Rendering</a>.
Also, in Developer options, turn on
Show Hardware Layers Updates. The screen will flash green for every hardware layer update. Note
that for pre-M (API level 22 and below), you have to use hardware layers explicitly (e.g.
mView.animate().alpha(0).withLayer().start()), while for API levels 23 and above, the system does
this for you automatically.</p>
<p><b>What you see:</b><br>
In the Profile GPU Rendering graph, orange bar segments may be tall,
because the CPU is waiting for the GPU to finish all this work. On our device, the screen will
flash green while your app slows down. See
<a href="http://www.curious-creature.com/2013/09/13/optimizing-hardware-layers/">
Optimizing Hardware Layers</a> for an example.</p>
<p><b>Problem:</b><br>
From a performance perspective, fade and transparency effects are expensive,
because you have to draw every pixel and possibly whole parts of your view hierarchy multiple
times.</p>
<p><b>Solution:</b><br>
You might be able to improve drawing performance by controlling how the
renderer uses hardware layers and by using alpha rendering sparingly.</p>
<p><b>Optimize your app:</b><br>
Eliminate non-critical alpha rendering and use hardware layers
effectively. Learn more on <a href=
"https://www.youtube.com/watch?v=wIy8g8yNhNk">The Hidden Cost of Transparency</a>
and <a href="http://developer.android.com/guide/topics/graphics/hardware-accel.html">
Hardware Acceleration</a></p>
<!----------------------------->
<h2>Large Uncompressed Bitmaps</h2>
<p><b>What the user sees:</b><br>
Intermittent drops in frame rate, and crashes in the worst
case.</p>
<p><b>Use these tools:</b><br>
<a href="{@docRoot}tools/performance/memory-monitor/index.html">Memory Monitor</a>
and <a href="{@docRoot}tools/performance/heap-viewer/index.html">Heap Viewer</a>.</p>
<p><b>What you see:</b><br>
In Heap Viewer, look for large bitmap
objects. In Memory Monitor, you'll see an unhealthy number of garbage
collection events.</p>
<p><b>Problem:</b><br>
Once loaded, your app's bitmaps are uncompressed, which
not only uses up memory but also affects garbage collection.</p>
<p><b>Solution:</b><br>
You might be able to increase available memory, reduce garbage collection
overhead, and increase rendering performance by using smaller bitmap pixel formats.</p>
<p><b>Optimize your app:</b><br>
Consider Smaller Pixel Formats. See <a href=
"https://www.youtube.com/watch?v=1WqcEHXRWpM">Smaller Pixel Formats</a>.</p>
<!----------------------------->
<h2>Dimension Bitmaps</h2>
<p><b>What the user sees:</b><br>
Intermittent drops in frame rate, and crashes in the worst
case.</p>
<p><b>Use these tools:</b><br>
<a href="{@docRoot}tools/performance/memory-monitor/index.html">Memory Monitor</a>
and <a href="{@docRoot}tools/performance/heap-viewer/index.html">Heap Viewer</a>.</p>
<p><b>What you see:</b><br>
In Heap Viewer, look for large bitmap objects. In Memory Monitor,
you'll see and unhealthy number of garbage collection events.</p>
<p><b>Problem:</b><br>
If the bitmaps your app is loading are larger than what is being displayed on
the screen, they unnecessarily use memory space.</p>
<p><b>Solution:</b><br>
You might be able to increase available memory and rendering performance be
pre-scaling your bitmaps.</p>
<p><b>Optimize your app:</b><br>
Use <a href="https://www.youtube.com/watch?v=HY9aaXHx8yA">Pre-scaled Bitmaps.</a></p>
<!----------------------------->
<h2>Large Number of Bitmap Objects</h2>
<p><b>What the user sees:</b><br>
Intermittent drops in frame rate, and crashes in the worst
case.</p>
<p><b>Use these tools:</b><br>
<a href="{@docRoot}tools/performance/memory-monitor/index.html">Memory Monitor</a>
and
<a href="{@docRoot}tools/performance/allocation-tracker/index.html">Allocation Tracker</a>.</p>
<p><b>What you see:</b><br>
In Allocation Tracker, look for bitmap objects. In Memory Monitor, you
may see an unhealthy number of garbage collection events.</p>
<p><b>Problem:</b><br>
Your app is loading a stream of bitmaps that are each only used for a short
time.</p>
<p><b>Solution:</b><br>
You might be able to improve memory usage and rendering performance by using
object pools to reuse existing bitmap objects, and be reusing and caching bitmaps and
textures.</p>
<p><b>Optimize your app:</b><br>
<a href="https://www.youtube.com/watch?v=_ioFW3cyRV0&gt">Reuse Bitmaps</a>
and consider using <a href="https://www.youtube.com/watch?v=bSOREVMEFnM">Object Pools</a>.
Consider using the <a href="https://github.com/bumptech/glide">Glide Library</a>.

44
docs/html/training/training_toc.cs
View File

@@ -1848,10 +1848,11 @@ results."
</a>
</div>
<ul>
<li>
<a href="<?cs var:toroot ?>training/app/approach.html"
description=
"How to approach performance testing, analysis and making improvement to you app."
"How to approach performance testing, analysis and making improvements to you app."
>Gather, Insight, Action</a>
</li>
@@ -1860,27 +1861,28 @@ results."
<a href="<?cs var:toroot ?>training/app/rendering/index.html"
description=
"How to analyze app rendering performance and improve the speed and smoothness
of your user interface."
>Rendering Performance</a>
of your user interface.">
Optimizing Rendering Performance</a>
</div>
<ul>
<li>
<a href="<?cs var:toroot ?>training/app/rendering/gpu.html">
Optimizing Rendering
</a>
</li>
<li>
<a href="<?cs var:toroot ?>training/app/rendering/overdraw.html">
Reducing Overdraw
</a>
</li>
<li>
<a href="<?cs var:toroot ?>training/app/rendering/view-hierarchy.html">
Optimizing View Hierarchies
</a>
</li>
</ul>
</li> <!-- end of Rendering Performance-->
<ul>
<li><a href="<?cs var:toroot ?>training/app/rendering/overdraw.html">
Reducing Overdraw
</a>
</li>
<li><a href="<?cs var:toroot ?>training/app/rendering/profile-gpu.html">
Improving GPU Rendering Performance
</a>
</li>
<li><a href="<?cs var:toroot ?>training/app/rendering/hierarchies.html">
Simplifying Complex View Hierarchies
</a>
</li>
<li><a href="<?cs var:toroot ?>training/app/rendering/rendering-checklist.html">
Rendering Issues and Solutions Checklist
</a>
</li>
</ul>
</li><!-- end of Rendering Performance-->
<li class="nav-section">
<div class="nav-section-header">