1page.title=Profiling with Hierarchy Viewer 2meta.tags="android, performance, profiling, tools, rendering, hierarchyviewer 3page.tags="android", "performance", "profiling", "tools", "rendering", "hierarchyviewer" 4page.metaDescription=Profile the relative rendering speed for each view. 5page.image=tools/performance/thumbnails/tools_hierarchy_viewer_profiling.png 6page.article=true 7 8@jd:body 9 10<style> 11 .no-bullet { 12 list-style-type: none; 13 } 14 .padded { 15 padding-left: 10px; 16 } 17</style> 18 19<div id="tb" style="margin-left: 7px; margin-bottom: 5px;"> 20 21<h2>In this document</h2> 22<ul> 23 <li><a href="#WhatYouNeed">Prerequisites</a></li> 24 <li><a href="#ProfilingWithHierarchyViewer">Profiling with Hierarchy Viewer</a></li> 25 <li><a href="#InterpretingResults">Interpreting Profiling Results</a></li> 26 27</ul> 28</div> 29 30<p>This walkthrough shows you how to profile your app's view hiearchy with 31 Hierarchy Viewer, and how to interpret the results.</p> 32 33<h2 id="WhatYouNeed">Prerequisites</h2> 34 35<ul> 36 <li><a href="{@docRoot}tools/performance/hierarchy-viewer/setup.html"> 37 Device Setup for Hierarchy Viewer</a></li> 38 <li><a href="{@docRoot}tools/performance/hierarchy-viewer/index.html"> 39 Hierarchy Viewer Walkthrough</a></li> 40</ul> 41 42<h2 id="ProfilingWithHierarchyViewer">Profiling Steps</h2> 43 44<ul class="no-bullet"> 45<!-- this also hides bullet, by default outside box --> 46 <li><div style="overflow:hidden"> 47 48 <ol class="padded"> 49 50 <div class="figure" style=""> 51<img src="{@docRoot}images/tools/performance/hierarchy-viewer/gettingstarted_image014.png" 52 alt="" 53 width="400px" /> 54 <p class="img-caption"> 55 <strong>Figure 1. </strong>View hierarchy after profiling. 56 </p> 57 </div> 58 59 <li>Start Hierarchy Viewer for your app.</li> 60 61 <li>In the <b>Tree View</b> or the <b>Layout View</b>, click on the View node whose 62 children you want to profile.</li> 63 64 <li>To start profiling, click the small button with three circles 65<img src="{@docRoot}images/tools/performance/hierarchy-viewer/gettingstarted_image013.png"> 66 at the top of the Tree View. 67 68 </li> 69 70 <li>For large view hierarchies, profiling may take a few seconds.</li> 71 72 <li>Each view in your subtree gets three dots, which can be green, yellow, or red. 73 74 <ul> 75 <li>The left dot represents the Draw Process of the rendering pipeline.</li> 76 <li>The middle dot represents the Layout Phase.</li> 77 <li>The right dot represents the Execute Phase.</li> 78 </ul> 79 </li> 80 81</ol></div> 82 83</li> 84 85<li><div style="overflow:hidden"> 86<hr> 87 <ol class="padded" start="5"> 88 89 <div class="figure" style=""> 90<img src="{@docRoot}images/tools/performance/hierarchy-viewer/gettingstarted_image015.png" 91 alt="" 92 width="240px" /> 93 <p class="img-caption"> 94 <strong>Figure 2. </strong>How the colored dots relate<br>to the rendering pipeline. 95 </p> 96 </div> 97 98 <li>These dots roughly correspond to the Measure, 99 Layout, and Draw 100 phases of the processing pipeline.</li> 101 102 <li>The color of the dots indicates the relative performance 103 of this node in respect to all other profiled nodes. 104 105 <ul> 106 <li><strong>Green</strong> means the view renders faster than at least 107 half of the other views.</li> 108 109 <li><strong>Yellow</strong> means the view renders faster than the bottom 110 half of the other views.</li> 111 112 <li><strong>Red</strong> means the view is among the slowest 113 half of views.</li> 114 </ul> 115 </li> 116 117 </ol> 118</div></li> 119</ul> 120 121 <h2 id="InterpretingResults">Interpreting Hierarchy Viewer Profiling Results</h2> 122 123 <p>Hierarchy Viewer measures the <em>relative performance</em> of a 124 node</b>, so there are always red nodes in a profile, and it 125 doesn't necessarily mean that view is too slow for the users of 126 your app.</p> 127 128 <p>Hierarchy Viewer software rasterizes your Activity to acquire the timing 129 information. Rasterization is the process of taking a high-level primitive, such as a 130 circle or a vector font, and turning it into pixels on the screen. Typically, 131 rasterization is done by the GPU on your device, but in the case of 132 software rasterization, rendering is done on the CPU with 133 ordinary software. This means that the absolute 134 reported timings are correct relative to each other, but are bloated and vary 135 depending on the overall and changing CPU workload on your device and PC. Profile 136 several times to get a feel for the average measurements.</p> 137 138 <p>The following are guidelines for interpreting Hierarchy Viewer profiling output.</p> 139 140 <p>A red node is a potential problem in any situation where your app has 141 unexpectedly slow performance. In a relative setting, there is always a 142 slowest node; make sure it is the node you expect. 143 The following examples illustrate how to interpret red dots.</p> 144 145 <ul> 146 <li>Look for red dots in leaf nodes or view groups with only a few children. This 147 might point to a problem. Your app may not be slow, or it may not be slow on your 148 device, but you need to be aware of why that dot is red. 149 <a href="{@docRoot}tools/performance/systrace/index.html"> Systrace</a> or 150 <a href="{@docRoot}tools/performance/traceview/index.html"> Traceview</a> 151 can give you additional information. </li> 152 153 <li>If you have a view group with many children and a red measure phase, take a 154 look at the children to see how they are performing.</li> 155 156 <li>A view with yellow or even red dots might not be performing slowly on the 157 device. That's where the actual numbers are helpful. 158 <a href="{@docRoot}tools/performance/systrace/index.html"> Systrace</a> or 159 <a href="{@docRoot}tools/performance/traceview/index.html"> Traceview</a> 160 can give you additional information.</li> 161 162 <li>If the root view of a hierarchy has a red measure phase, red layout phase, and 163 yellow draw phase, this is somewhat typical, because it's the 164 parent of all the other views.</li> 165 166 <li>If a leaf node in a tree with 20+ views has a red draw phase, this <i>is</i> a 167 problem. Check your OnDraw method for code that shouldn't be 168 there.</li> 169 </ul> 170
