| 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> |