OpenHarmony使用ArkUI Inspector分析布局
- 摘要：視圖的嵌套層次會影響應用的性能，開發者應該移除多余的嵌套層次，縮短組件刷新耗時。本文會介紹如何使用ArkUI Inspector工具分析布局，提示應用響應性能。
- 關鍵字：列舉本文相關的關鍵字：OpenHarmony HarmonyOS 鴻蒙 Inspector 布局檢查器 視圖嵌套
概述
應用將布局渲染到屏幕上的流暢度影響用戶對質量的感知。建議移除多余的嵌套層次減少視圖嵌套層次。視圖的嵌套層次會影響應用的性能。因此推薦開發者移除多余的嵌套層次，縮短組件刷新耗時。
如果視圖嵌套得很深，會導致花費更多的時間來處理，會增加頁面渲染時間。在屏幕刷新率為120Hz的設備上，每8.3ms刷新一幀，如果視圖的嵌套層次多，可能會導致沒法在8.3ms內完成一次屏幕刷新，就會造成丟幀卡頓，影響用戶體驗。嵌套視圖會創建更多的節點，會增加內存消耗。如果嵌套視圖是從服務器獲取的，這可能會導致額外的網絡延遲，增加頁面加載的時間。過多的視圖嵌套還可能會使頁面的結構和代碼變得復雜和難以維護，這可能會導致錯誤和性能問題的可能性增加。
因此，減少視圖嵌套層次非常重要。本文會介紹如何使用ArkUI Inspector工具分析布局，提示應用響應性能。
環境準備
從DevEco Studio 4.0 Beta2版本開始集成ArkUI Inspector工具，可以從OpenHarmony-v4.0-beta2 Release Notes#配套關系部分下載DevEco Studio 4.0 Beta2版本。
使用場景
開發者可以使用ArkUI Inspector，在DevEco Studio上查看應用在真機上的UI界面顯示效果，可以查看查看應用的界面組件樹component tree，還可以查看選定組件的屬性信息。
在ArkUI Inspector的組件樹上選擇組件，UI界面自動框選對應組件，屬性列表顯示當前組件的屬性信息。在UI界面點擊選擇組件，組件樹對應組件變化為選中狀態，屬性列表顯示當前組件的屬性信息。
ArkUI Inspector工具非常好用。可以使用它分析布局，減少布局嵌套層次，從而提示應用響應性能。
工具介紹
使用連接線把真機連接到開發PC，打開DevEco Studio，在 DevEco Studio 下方點擊 ArkUI Inspector，打開 ArkUI Inspector。
點擊 RUN 或者 DEBUG 按鈕，把應用推包到設備上，在設備應用列表選擇當前顯示在設備前端的 UI 進程。本文使用的是Sample聊天實例應用，需要選擇的進程是com.samples.chat。
#2023盲盒+碼# OpenHarmony使用ArkUI Inspector分析布局-開源基礎軟件社區
ArkUI Inspector 左側為當前的組件樹結構Component Tree，中間欄顯示當前設備的 UI 顯示界面，右側在選中組件的情況下為當前組件的屬性信息。當設備上 UI 發生變化時，可點擊中間欄右上角刷新按鈕同步設備上的 UI 效果。可以在左側組件樹上選擇或直接在 UI 界面點擊選擇組件。
#2023盲盒+碼# OpenHarmony使用ArkUI Inspector分析布局-開源基礎軟件社區
如果想退出使用ArkUI Inspector，可以在設備框，點擊設備列表的最后一項 Stop inspector，可斷開與設備的連接。
性能實踐
我們以一個實際案例來看下如何借助ArkUI Inspector工具來優化布局。
檢出工程Sample聊天實例應用工程代碼，使用DevEco Studio編譯構建，推送到開發板上運行。
我們選擇一個簡化的場景，打開和一位朋友的聊天窗口，查看歷史聊天信息。刷新ArkUI Inspector工具中的UI界面，如下：
可以看出，ListItem列表項中包含一個Column->Row，下面又包含Row和Column子組件。ListItem列表項下的子組件Column這個列容器只包含一個Row子組件容器，Column列容器是不必要的，可以去掉，這樣ListItem列表項下的子組件直接為Row子組件即可，從而減少一個視圖嵌套層次。一個嵌套層次的影響，可能對性能的影響微乎其微。本實踐僅限于用來演示如何使用ArkUI Inspector工具來優化布局。
#2023盲盒+碼# OpenHarmony使用ArkUI Inspector分析布局-開源基礎軟件社區
再看一個例子，在真機上打開Sample聊天實例應用的聊天聯系人頁面，使用ArkUI Inspector工具刷新下UI界面。看左側的組件樹，可以查看組件的嵌套層次，最大有10層嵌套，就可以考慮小是否可以減少嵌套層次。比如，最頂層的Row組件是可以減少的，其他組件也可以類似查看是否必要，沒有最優只有更優。
#2023盲盒+碼# OpenHarmony使用ArkUI Inspector分析布局-開源基礎軟件社區
注意事項
1、ArkUI Inspector僅支持OpenHarmony API 9 及以上版本的 Stage 工程
2、需要使用 debug模式編譯。
3、已通過 USB 連接設備。
4、使用DevEco Studio 4.0 Beta2及以上的版本。
