使用階層檢視器剖析版面配置
透過集合功能整理內容
你可以依據偏好儲存及分類內容。
階層檢視器已淘汰。如果您使用 Android Studio 3.1 或以上版本,請改為在執行階段中使用「版面配置檢查器」檢查應用程式的檢視區塊階層。如要描述應用程式版面配置的轉譯速度,請使用Window.OnFrameMetricsAvailableListener,詳情請參閱「本篇網誌文章」。
「階層檢視器」是 Android 裝置監視器內建的工具,可於版面配置階層中評估每個檢視畫面的版面配置速度。其可協助您找出因資料檢視區塊階層結構而造成的效能瓶頸。
注意:階層檢視器已不再開發。如要檢查執行階段中資料檢視區塊階層的屬性,請改用 Android Studio 中的
版面配置檢查器。不過,版面配置檢查器目前不會針對版面配置效能提供剖析詳細資料。
本頁將介紹階層檢視器,並逐步說明如何剖析您的版面配置。
做好準備
如果您使用的是 Android 模擬器,則可以略過這部分。在其他情況下,您必須按照以下說明設定裝置。
附註:裝置必須搭載 Android 4.1 以上版本。
- 在裝置上啟用「開發人員選項」。
- 在您的開發機器上設定環境變數
ANDROID_HVPROTO=ddm
。此變數會告知階層檢視器使用 ddm
通訊協定連線至裝置,此與 DoubleClickS 通訊協定相同。請記得,在連上裝置的主機上只能有一項程序,因此您必須終止其他任何 DDMS 工作階段,才能執行階層式檢視器。
啟動階層檢視器
圖 1 Android 裝置監視器
- 將裝置連接到電腦。如果畫面上出現對話方塊,其中顯示「允許 USB 偵錯嗎?」提示訊息,請輕觸「確定」。
- 在 Android Studio 中開啟專案,並在裝置上建構及執行。
- 啟動 Android Device Monitor。Android Studio 可能會顯示「Disable adb integration」對話方塊,這是因為一次只有一個程序可透過 ADB 連接至裝置,並且 Android Device Monitor 正在要求建立連線。按一下「Yes」。
圖 1 呈現 Android Device 監視器最初的顯示畫面。
- 在選單列中,依序選取 「Window」 >「Open Perspective」,然後按一下 「Hierarchy View」。
您應該會看見與圖 2 相似的排列方式。如果沒有,請依序選取「Window」>「Reset Perspective」返回預設版面配置。
-
在左側的「Windows」分頁中,按兩下應用程式的套件名稱。然後在窗格中填入應用程式的資料檢視區塊階層。
熟悉工具的使用方式
圖 2. 階層檢視器窗格。
階層檢視器提供下列窗格 (如圖 2 所示):
資料檢視區塊階層是版面配置的數據匯報,因此不會自動更新。如要更新階層檢視,請按一下「Reload the view hierarchy」
。
如要撤銷檢視畫面 (要求系統在下次版面配置更新時呼叫 onDraw()
),請選取階層中的檢視畫面,然後按一下「Invalidate the layout」
(相當於呼叫檢視畫面中的 invalidate()
)。如想要求檢視區塊 (以及任何子項),請按一下「Request lay out」
。
如果您要前往其他應用程式,則必須在左側窗格中的「Windows」分頁中選取該應用程式,即可檢視其檢視區塊階層。
如要查看檢視畫面的測量、版面配置及繪製時間等詳細資料 (如圖 3 所示),請按一下「樹狀檢視」中的檢視畫面。按兩下檢視模式,即可放大圖片。
圖 3. 顯示節點部分。
如要查看檢視區塊的屬性,請按一下左側窗格中的「View Properties」分頁標籤,如圖 4 所示。
圖 4「View Properties」分頁的位置。
如要將版面配置圖層的螢幕截圖儲存至 Adobe Photoshop (PSD) 檔案,請按一下工具列中的「Capture the windowlayers」圖示
。系統會將每個檢視畫面儲存為個別圖層,因此只要隱藏和調整各個檢視畫面,就能輕鬆建立新模型。
剖析版面配置
圖 5. 剖析完成後再檢視區塊階層。
現在,您已熟悉工具的運用方式,其可用來分析檢視區塊階層,並解讀結果。
- 在「Tree View」或「Layout View」中,按一下您想剖析的子項檢視節點。
- 如要開始剖析,請按一下「Tree View」頂端的「Obtain layout times」
。如果是大型資料檢視區塊階層,則可能需要數秒鐘才能完成剖析。
每個所選節點的子檢視畫面都有三個點,分別是綠色、黃色或紅色。
- 左側點代表轉譯管道的繪圖程序。
- 中間點代表版面配置階段。
- 右側點則代表執行階段。
圖 6色點與轉譯管道
之間的關聯。
這些點大致對應到處理管道的測量、版面配置和繪圖階段。點的顏色代表該節點相對於本機系列中其他所有剖析節點的相對效能。
- 「綠色」代表資料檢視的算繪速度至少比其他檢視畫面的一半快。
- 「黃色」代表檢視畫面的算繪速度比其他檢視畫面的一半快。
- 「紅色」表示該檢視畫面屬於最慢的一半檢視畫面之一。
解譯結果
「階層式檢視器」會測量每個節點相對於同層級檢視畫面的效能,因此如果設定檔的效能都相同,則設定檔的紅色節點會維持一致,但不一定代表紅色的節點成效不佳 (只代表本機檢視區塊群組最慢的檢視畫面)。
「階層式檢視器」能光柵化版面配置,取得時間資訊。光柵化程序是擷取高層級原始物件 (例如圓形或向量字型),並轉換成螢幕中的像素的過程。光柵化通常會由裝置上的 GPU 完成,但如果是軟體光柵化,則使用一般軟體的 CPU 進行算繪。其表示回報的絕對時間是相對的,但資料顯示方式會因裝置和開發機器的整體 CPU 工作負載數量和變化而有所不同。因此,該工具不會反映實際效能速度,因此您應多次剖析,以便瞭解平均的測量結果。
如果您的應用程式發生非預期的運作緩慢問題,紅色節點就是一項潛在問題。相對設定中,系統一律會有最慢的節點;只要確認該節點是預期的節點即可。以下範例將說明如何解讀紅點。
- 您可以在節能綠葉節點中查看紅點,或檢視只有少數子項的群組。這可能是問題所在。您的應用程式可能沒有緩慢的反應,或是因為裝置執行速度緩慢而需要處理,但請留意發生紅點的原因。Systrace 或 Traceview 可提供額外資訊。
- 如果您有一個檢視區塊群組,當中有多個子項且顯示紅色測量階段,請參考子項來瞭解其表現。
- 有黃或甚至紅點的檢視畫面在裝置上執行效能可能較慢。這時實際數據即可派上用場。Systrace 或 Traceview 可提供額外資訊。
- 如果階層的根檢視畫面有紅色測量階段、紅色版面配置階段和黃色繪圖階段,這雖然相當典型,因為這是所有其他檢視畫面的父項,直到子項完成後,其版面配置才會完成。
- 如果樹狀圖中有超過 20 次檢視畫面的節能綠葉節點出現紅色繪圖階段,則會發生問題。檢查
onDraw()
方法,確認程式碼不應出現於此。
如需更多版面配置提示,請參閱改善版面配置效能。
這個頁面中的內容和程式碼範例均受《內容授權》中的授權所規範。Java 與 OpenJDK 是 Oracle 和/或其關係企業的商標或註冊商標。
上次更新時間:2024-05-13 (世界標準時間)。
[[["容易理解","easyToUnderstand","thumb-up"],["確實解決了我的問題","solvedMyProblem","thumb-up"],["其他","otherUp","thumb-up"]],[["缺少我需要的資訊","missingTheInformationINeed","thumb-down"],["過於複雜/步驟過多","tooComplicatedTooManySteps","thumb-down"],["過時","outOfDate","thumb-down"],["翻譯問題","translationIssue","thumb-down"],["示例/程式碼問題","samplesCodeIssue","thumb-down"],["其他","otherDown","thumb-down"]],["上次更新時間:2024-05-13 (世界標準時間)。"],[],[],null,["# Profile your layout with Hierarchy Viewer\n\n**Hierarchy Viewer is deprecated.** If you're using Android Studio 3.1 or\nlater, you should instead use [**Layout Inspector**](/studio/debug/layout-inspector) to\ninspect your app's view hierarchy at runtime. To profile the rendering speed of your app's layout, use\n**[Window.OnFrameMetricsAvailableListener](/reference/android/view/Window.OnFrameMetricsAvailableListener)**\nas described in\n[this blog post](https://android-developers.googleblog.com/2017/08/understanding-performance-benefits-of.html).\n\nHierarchy Viewer is a tool built into [Android Device\nMonitor](/studio/profile/monitor) that allows you to measure the layout speed for each view\nin your layout hierarchy. It can help you find performance bottlenecks caused by the\nstructure of your view hierarchy.\n\n**Note:** Hierarchy Viewer is no longer being developed. To inspect the\nproperties in your view hierarchy at runtime, you should instead use [Layout Inspector](/studio/debug/layout-inspector) in Android Studio. However, Layout Inspector does not currently provide\nprofiling details about your layout performance.\n\nThis page provides an introduction to Hierarchy Viewer and a walkthrough for\nprofiling your layout.\n\nGet set up\n----------\n\nIf you're using the Android Emulator, you can skip this section.\nOtherwise, you need to set up your device as follows.\n\n**Note:** Your device must be running Android 4.1 or higher.\n\n1. Enable [Developer\n Options](https://developer.android.com/tools/device.html#developer-device-options) on your device.\n2. Set the environment variable `ANDROID_HVPROTO=ddm` on your development machine.\n\n This variable tells Hierarchy Viewer to connect to the device using the `ddm`\n protocol, which is the same as the DDMS protocol. The caveat is that there can be only one\n process on the host that connects to the device, so you must kill any other DDMS session to\n run Hierarchy Viewer.\n\nStart Hierarchy Viewer\n----------------------\n\n\n**Figure 1.** Android Device Monitor\n\n1. Connect your device to your computer. If prompted by a dialog on the device that asks, **Allow USB debugging?** , tap **OK**.\n2. Open your project in Android Studio, [build and run it](/studio/run) on your device.\n3. Start [Android Device Monitor](/studio/profile/monitor). Android Studio might show a **Disable adb integration** dialog because only one process can connect to the device via adb at once, and Android Device Monitor is requesting a connection. So click **Yes** .\n\n Figure 1 illustrates what initially appears in the Android Device Monitor.\n4. In the menu bar, select **Window \\\u003e Open\n Perspective** , and then click **Hierarchy View** .\n\n You should see an arrangement similar to what's shown in figure 2. If not, select **Window\n \\\u003e Reset Perspective** to return to the default layout.\n5. Double-click your app's package name in the **Windows** tab on the left. This populates the panes with the view hierarchy of your app.\n\nGet familiar with the tools\n---------------------------\n\n\n**Figure 2.** Hierarchy Viewer panes.\n\nThe Hierarchy Viewer provides the following panes (as shown in figure 2):\n\n- **Tree View** (center): Shows a tree view of your view hierarchy. You can drag and zoom the tree using your mouse and the zoom control at the bottom. Each node indicates it's [View](/reference/android/view/View) class name and ID name.\n- **Tree Overview** (top right): Gives you a bird's-eye view of your app's complete view hierarchy. Move the grey rectangle to change the viewport that's visible in the **Tree View**.\n- **Layout View** (bottom right): Shows a wireframe view of your layout. The outline of the currently selected view is red, and its parent view is light red.\n\n Clicking a view here also selects it in the\n **Tree View**, and vice versa.\n\nThe view hierarchy is a snapshot of the layout, so it does not automatically update.\nTo update the hierarchy view, click **Reload the view hierarchy**\n.\n\nTo invalidate a view (request that the system call [onDraw()](/reference/android/view/View#onDraw(android.graphics.Canvas))\nduring the next layout update), select a view in the hierarchy and\nthen click **Invalidate the layout**\n(this is equivalent to calling [`invalidate()`](/reference/android/view/View#invalidate()) on the view).\nAnd to request the view (and any children) actually lay out, click **Request lay out**\n.\n\nIf you navigate to a different app, you must select that app from the **Windows** tab\nin the left pane to view its view hierarchy.\n\nTo view details about the view including its measure, layout, and draw times\n(as shown in figure 3), click the view in the **Tree View**.\nDouble-click on the view to see an enlarged image of it.\n\n\n**Figure 3.**Parts of the view node display.\n\nTo see the view's properties, click the **View Properties** tab in the left pane,\nas shown in figure 4.\n\n\n**Figure 4.** Location of the **View Properties** tab.\n\nTo save a layered screenshot of your layout to an Adobe Photoshop (PSD) file, click\n**Capture the window layers** in the toolbar. Each view is saved as its own layer so you\ncan easily create a new mock by hiding and adjusting each view.\n\nProfile your layout\n-------------------\n\n\n**Figure 5.**View hierarchy after profiling.\n\nNow that you know your way around the tool, you can use it to profile your view hiearchy\nand interpret the results.\n\n1. In the **Tree View** or the **Layout View**, click on the view node whose children you want to profile.\n2. To start profiling, click **Obtain layout times** at the top of the **Tree View** .\n\n For large view hierarchies, profiling may take a few seconds.\n\nEach child view of your selected node gets three dots, which can be green, yellow, or red.\n\n- The left dot represents the *draw process* of the rendering pipeline.\n- The middle dot represents the *layout phase*.\n- The right dot represents the *execute phase*.\n\n\n**Figure 6.** How the colored dots relate \nto the rendering pipeline.\n\nThese dots roughly correspond to the measure,\nlayout, and draw phases of the processing pipeline.\nThe color of the dots indicates the relative performance\nof this node in respect to all other profiled nodes in the local family.\n\n- **Green** means the view renders faster than at least half of the other views.\n- **Yellow** means the view renders faster than the bottom half of the other views.\n- **Red** means the view is among the slowest half of views.\n\n### Interpreting the results\n\nHierarchy Viewer measures the performance of each node *relative to sibling views*,\nso there are always red nodes in a profile---unless all views performed identically---and it\ndoesn't necessarily mean that the red one is performing poorly (only that it's the slowest view\nin the local view group).\n\nHierarchy Viewer rasterizes your layout to acquire the timing\ninformation. Rasterization is the process of taking a high-level primitive, such as a\ncircle or a vector font, and turning it into pixels on the screen. Typically,\nrasterization is done by the GPU on your device, but in the case of\nsoftware rasterization, rendering is done on the CPU with\nordinary software. This means that the absolute\nreported timings are correct relative to each other, but are bloated and vary\ndepending on the overall and changing CPU workload on your device and your development\nmachine. So it does not reflect real-world performance speeds on a device and\nyou should profile multiple times to get a sense for the average measurements.\n\nA red node is a potential problem in any situation where your app has\nunexpectedly slow performance. In a relative setting, there is always a\nslowest node; just make sure it is the node you expect.\nThe following examples illustrate how to interpret red dots.\n\n- 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. [Systrace](/topic/performance/tracing/command-line) or [Traceview](/studio/profile/traceview-walkthru) can give you additional information.\n- 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.\n- A view with yellow or even red dots might not be performing slowly on the device. That's where the actual numbers are helpful. [Systrace](/topic/performance/tracing/command-line) or [Traceview](/studio/profile/traceview-walkthru) can give you additional information.\n- 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 and its layout isn't finished until the children finish.\n- If a leaf node in a tree with 20+ views has a red draw phase, this *is* a problem. Check your [onDraw()](/reference/android/view/View#onDraw(android.graphics.Canvas)) method for code that shouldn't be there.\n\nFor more layout tips, see [Improving\nLayout Performance](/training/improving-layouts)."]]