170 lines
6.2 KiB
Plaintext
170 lines
6.2 KiB
Plaintext
page.title=Profiling with Hierarchy Viewer
|
|
meta.tags="android, performance, profiling, tools, rendering, hierarchyviewer
|
|
page.tags="android", "performance", "profiling", "tools", "rendering", "hierarchyviewer"
|
|
page.metaDescription=Profile the relative rendering speed for each view.
|
|
page.image=tools/performance/thumbnails/tools_hierarchy_viewer_profiling.png
|
|
page.article=true
|
|
|
|
@jd:body
|
|
|
|
<style>
|
|
.no-bullet {
|
|
list-style-type: none;
|
|
}
|
|
.padded {
|
|
padding-left: 10px;
|
|
}
|
|
</style>
|
|
|
|
<div id="tb" style="margin-left: 7px; margin-bottom: 5px;">
|
|
|
|
<h2>In this document</h2>
|
|
<ul>
|
|
<li><a href="#WhatYouNeed">Prerequisites</a></li>
|
|
<li><a href="#ProfilingWithHierarchyViewer">Profiling with Hierarchy Viewer</a></li>
|
|
<li><a href="#InterpretingResults">Interpreting Profiling Results</a></li>
|
|
|
|
</ul>
|
|
</div>
|
|
|
|
<p>This walkthrough shows you how to profile your app's view hiearchy with
|
|
Hierarchy Viewer, and how to interpret the results.</p>
|
|
|
|
<h2 id="WhatYouNeed">Prerequisites</h2>
|
|
|
|
<ul>
|
|
<li><a href="{@docRoot}tools/performance/hierarchy-viewer/setup.html">
|
|
Device Setup for Hierarchy Viewer</a></li>
|
|
<li><a href="{@docRoot}tools/performance/hierarchy-viewer/index.html">
|
|
Hierarchy Viewer Walkthrough</a></li>
|
|
</ul>
|
|
|
|
<h2 id="ProfilingWithHierarchyViewer">Profiling Steps</h2>
|
|
|
|
<ul class="no-bullet">
|
|
<!-- this also hides bullet, by default outside box -->
|
|
<li><div style="overflow:hidden">
|
|
|
|
<ol class="padded">
|
|
|
|
<div class="figure" style="">
|
|
<img src="{@docRoot}images/tools/performance/hierarchy-viewer/gettingstarted_image014.png"
|
|
alt=""
|
|
width="400px" />
|
|
<p class="img-caption">
|
|
<strong>Figure 1. </strong>View hierarchy after profiling.
|
|
</p>
|
|
</div>
|
|
|
|
<li>Start Hierarchy Viewer for your app.</li>
|
|
|
|
<li>In the <b>Tree View</b> or the <b>Layout View</b>, click on the View node whose
|
|
children you want to profile.</li>
|
|
|
|
<li>To start profiling, click the small button with three circles
|
|
<img src="{@docRoot}images/tools/performance/hierarchy-viewer/gettingstarted_image013.png">
|
|
at the top of the Tree View.
|
|
|
|
</li>
|
|
|
|
<li>For large view hierarchies, profiling may take a few seconds.</li>
|
|
|
|
<li>Each view in your subtree gets three dots, which can be green, yellow, or red.
|
|
|
|
<ul>
|
|
<li>The left dot represents the Draw Process of the rendering pipeline.</li>
|
|
<li>The middle dot represents the Layout Phase.</li>
|
|
<li>The right dot represents the Execute Phase.</li>
|
|
</ul>
|
|
</li>
|
|
|
|
</ol></div>
|
|
|
|
</li>
|
|
|
|
<li><div style="overflow:hidden">
|
|
<hr>
|
|
<ol class="padded" start="5">
|
|
|
|
<div class="figure" style="">
|
|
<img src="{@docRoot}images/tools/performance/hierarchy-viewer/gettingstarted_image015.png"
|
|
alt=""
|
|
width="240px" />
|
|
<p class="img-caption">
|
|
<strong>Figure 2. </strong>How the colored dots relate<br>to the rendering pipeline.
|
|
</p>
|
|
</div>
|
|
|
|
<li>These dots roughly correspond to the Measure,
|
|
Layout, and Draw
|
|
phases of the processing pipeline.</li>
|
|
|
|
<li>The color of the dots indicates the relative performance
|
|
of this node in respect to all other profiled nodes.
|
|
|
|
<ul>
|
|
<li><strong>Green</strong> means the view renders faster than at least
|
|
half of the other views.</li>
|
|
|
|
<li><strong>Yellow</strong> means the view renders faster than the bottom
|
|
half of the other views.</li>
|
|
|
|
<li><strong>Red</strong> means the view is among the slowest
|
|
half of views.</li>
|
|
</ul>
|
|
</li>
|
|
|
|
</ol>
|
|
</div></li>
|
|
</ul>
|
|
|
|
<h2 id="InterpretingResults">Interpreting Hierarchy Viewer Profiling Results</h2>
|
|
|
|
<p>Hierarchy Viewer measures the <em>relative performance</em> of a
|
|
node</b>, so there are always red nodes in a profile, and it
|
|
doesn't necessarily mean that view is too slow for the users of
|
|
your app.</p>
|
|
|
|
<p>Hierarchy Viewer software rasterizes your Activity to acquire the timing
|
|
information. Rasterization is the process of taking a high-level primitive, such as a
|
|
circle or a vector font, and turning it into pixels on the screen. Typically,
|
|
rasterization is done by the GPU on your device, but in the case of
|
|
software rasterization, rendering is done on the CPU with
|
|
ordinary software. This means that the absolute
|
|
reported timings are correct relative to each other, but are bloated and vary
|
|
depending on the overall and changing CPU workload on your device and PC. Profile
|
|
several times to get a feel for the average measurements.</p>
|
|
|
|
<p>The following are guidelines for interpreting Hierarchy Viewer profiling output.</p>
|
|
|
|
<p>A red node is a potential problem in any situation where your app has
|
|
unexpectedly slow performance. In a relative setting, there is always a
|
|
slowest node; make sure it is the node you expect.
|
|
The following examples illustrate how to interpret red dots.</p>
|
|
|
|
<ul>
|
|
<li>Look for red dots in leaf nodes or view groups with only a few children. This
|
|
might point to a problem. Your app may not be slow, or it may not be slow on your
|
|
device, but you need to be aware of why that dot is red.
|
|
<a href="{@docRoot}tools/performance/systrace/index.html"> Systrace</a> or
|
|
<a href="{@docRoot}tools/performance/traceview/index.html"> Traceview</a>
|
|
can give you additional information. </li>
|
|
|
|
<li>If you have a view group with many children and a red measure phase, take a
|
|
look at the children to see how they are performing.</li>
|
|
|
|
<li>A view with yellow or even red dots might not be performing slowly on the
|
|
device. That's where the actual numbers are helpful.
|
|
<a href="{@docRoot}tools/performance/systrace/index.html"> Systrace</a> or
|
|
<a href="{@docRoot}tools/performance/traceview/index.html"> Traceview</a>
|
|
can give you additional information.</li>
|
|
|
|
<li>If the root view of a hierarchy has a red measure phase, red layout phase, and
|
|
yellow draw phase, this is somewhat typical, because it's the
|
|
parent of all the other views.</li>
|
|
|
|
<li>If a leaf node in a tree with 20+ views has a red draw phase, this <i>is</i> a
|
|
problem. Check your OnDraw method for code that shouldn't be
|
|
there.</li>
|
|
</ul>
|