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