概述
SmartPerf Editor是一款PC端桌面應(yīng)用，通過監(jiān)測、采集應(yīng)用運(yùn)行時(shí)FPS、CPU、GPU、Memory、Battery、Network等性能數(shù)據(jù)，幫助開發(fā)者了解應(yīng)用的性能狀況。SmartPerf Editor還集成了DrawingDoc功能，可錄制Render Service繪制指令，回放并生成不同圖形庫文件。通過逐幀逐繪制指令回放，來識別是否存在冗余繪制、是否可以優(yōu)化繪制指令的數(shù)量，從而提升頁面繪制性能。本文首先介紹DrawingDoc錄制回放原理，然后結(jié)合場景示例闡述DrawingDoc在性能實(shí)踐中的應(yīng)用。SmartPerf Editor更多信息可查看SmartPerf Editor。
原理介紹
圖1 Render Service處理流程圖
Render Service詳細(xì)步驟如下：
- 預(yù)處理：Render Service會(huì)接收渲染請求，并對其進(jìn)行預(yù)處理，這個(gè)過程包括解析渲染指令、準(zhǔn)備渲染資源、設(shè)置渲染環(huán)境等。
- 渲染樹遍歷：Render Service遍歷構(gòu)建生成的渲染樹，對每個(gè)節(jié)點(diǎn)進(jìn)行適當(dāng)?shù)奶幚恚☉?yīng)用樣式、計(jì)算布局、生成繪制指令等。
- RS繪制指令錄制回放：在遍歷渲染樹的過程中，RenderService會(huì)生成RS繪制指令。RS指令錄制時(shí)僅錄制每幀的臟區(qū)內(nèi)容，并將RS側(cè)的繪制指令打包寫入到文件中。RS指令回放時(shí)，使用OpenHarmony原本渲染庫和程序讀取指令文件。
- 生成Skia指令和DDGR指令：RS繪制指令會(huì)被轉(zhuǎn)換為Skia指令和DDGR指令，Skia和DDGR是一個(gè)2D圖形庫，用于繪制各種形狀、文本和圖像。
- 生成Vulkan指令和OpenGL指令：DDGR指令會(huì)被轉(zhuǎn)換為Vulkan指令，Skia指令會(huì)被轉(zhuǎn)換為Vulkan指令和OpenGL指令。Vulkan和OpenGL是圖形API，用于在硬件上執(zhí)行高效的圖形計(jì)算。
- GPU處理：Vulkan指令或OpenGL指令被發(fā)送到GPU進(jìn)行處理，GPU會(huì)將接收到的指令轉(zhuǎn)換為像素渲染操作，最終將頁面渲染到屏幕上。
使用約束
- Windows 7及以上操作系統(tǒng)的電腦。
- 工具需要使用華為賬號登錄，需要提前注冊。
- 工具下載地址：XXX。
- 支持OpenHarmony，HarmonyOS和Android操作系統(tǒng)（其中DrawingDoc功能目前僅支持OpenHarmony操作系統(tǒng)）。
- USB連接或者WIFI連接。
場景示例
圖2 場景預(yù)覽圖
@Entry
@Component
struct Index {
@State isVisible: Visibility = Visibility.None;
build() {
Column() {
Button("顯示/隱藏Image")
.onClick(() => {
if (this.isVisible == Visibility.Visible) {
this.isVisible = Visibility.None
} else {
this.isVisible = Visibility.Visible
}
})
Stack() {
Row().width('40%').height('40%').backgroundColor(Color.Pink)
Text("Hello World").fontSize(40)
Image($r('app.media.image')).width('100%').height('100%')
}.width('100%').height('100%').backgroundColor(Color.Green).visibility(this.isVisible)
}.width('100%')
}
}
下文基于上述場景介紹SmartPerf Editor中DrawingDoc的使用，以及如何使用Skia Debugger工具網(wǎng)站分析skp文件。
錄制數(shù)據(jù)
在分析skp文件之前，需要先使用DrawingDoc錄制Skia指令，生成skp文件，具體步驟如下：
1.打開SmartPerf Editor，在主界面左側(cè)導(dǎo)航點(diǎn)擊“DrawingDoc”>“錄制”。
2.點(diǎn)擊“跳過安裝”。
3.設(shè)置“錄制最大幀”。本示例中錄制最大幀設(shè)置40。
4.點(diǎn)擊“開始錄制”，同時(shí)在測試設(shè)備上操作要錄制的測試頁面，刷新上一步設(shè)定的幀數(shù)后，即自動(dòng)完成錄制。本示例中，點(diǎn)擊測試頁面的“顯示/隱藏Image”按鈕，顯示圖片。
5.錄制完成后，點(diǎn)擊右下角的“導(dǎo)出文件”。
6.導(dǎo)出文件進(jìn)度結(jié)束后，在主界面左側(cè)導(dǎo)航點(diǎn)擊“DrawingDoc”>“回放”。
7.“回放文件來源”選擇“使用設(shè)備最近一次錄制”，點(diǎn)擊“導(dǎo)入文件”。也可以選擇“從本地文件選擇”，選擇指定的frame開頭的文件夾。frame開頭的回放文件夾默認(rèn)存放在D:\ProgramData\SmartPerf_Editor\graphic。
8.打開“生成skp文件”。
① 設(shè)置skp文件名。.mskp表示生成多幀錄像文件，.skp表示生成單幀錄像文件。本示例中使用多幀錄像文件，skp文件名設(shè)置為test.mskp。
② 設(shè)置錄制幀數(shù)。錄制幀數(shù)不得大于前面設(shè)置的錄制最大幀。本示例中錄制幀數(shù)設(shè)置為40。
9.點(diǎn)擊“設(shè)置SKP參數(shù)”，“開始生成”，會(huì)在“SKP文件列表”顯示生成的test.mskp文件。再點(diǎn)擊“結(jié)束生成”，“導(dǎo)出SKP文件”。在D:\ProgramData\SmartPerf_Editor\graphic目錄下，找到最新時(shí)間的skp開頭的目錄，里面存放的就是當(dāng)前最新生成的mskp文件。mskp文件會(huì)記錄整個(gè)錄制過程中的產(chǎn)生的Skia指令。 以上就是錄制Skia指令生成mskp文件的過程。
分析數(shù)據(jù)
使用Skia Debugger工具網(wǎng)站分析上述獲取的mskp文件，具體步驟如下：
1.打開“生成skp文件”頁面上“導(dǎo)出SKP文件”按鈕右邊的鏈接“打開SKP Debugger”或者直接打開https://debugger.skia.org/，會(huì)跳轉(zhuǎn)到SKP Debugger工具網(wǎng)頁。點(diǎn)擊“選擇文件”，在D:\ProgramData\SmartPerf_Editor\graphic目錄下找到要分析的skp文件。本示例中選擇前面生成的test.mskp文件。
打開后可以看到如下界面，這里介紹一下SKP Debugger的常用功能。有關(guān)SKP Debugger的詳細(xì)介紹可查看Skia Debugger。
① SKP文件播放進(jìn)度條?？裳h(huán)播放錄制的畫面，也可以點(diǎn)擊選中一幀，查看它的Skia指令和視圖。
② Skia指令欄。顯示選中一幀上所有的Skia指令。點(diǎn)擊單個(gè)Skia指令可以查看該指令相關(guān)的Skia屬性。比如像Image繪制指令里useCubic屬性為true，表示該Image組件使用了useCubic算法，可以推測出Image使用了圖片插值屬性interpolation。使用高圖片插值可能會(huì)影響圖片渲染的速度，開發(fā)者可以考慮是否優(yōu)化。
③ SKP視圖。顯示當(dāng)前選中的Skia指令對應(yīng)的視圖?！癐mage Resources”會(huì)顯示skp文件用到的所有圖片資源。
④ Show Clip。勾選Show Clip后，可以查看單個(gè)Skia指令目前執(zhí)行的位置，會(huì)有淺藍(lán)色背景選中效果。Clip表示當(dāng)前執(zhí)行的Skia指令繪制區(qū)域的左上角和右下角坐標(biāo)位置。Matrix是3D變換的矩陣信息。
⑤ Skia命令直方圖。統(tǒng)計(jì)當(dāng)前幀上每個(gè)Skia指令出現(xiàn)的次數(shù)。Draw開頭的是繪制指令。
2.點(diǎn)擊播放鍵，查看本示例中test.mskp記錄的40幀視圖的變化過程。
3.找到本示例中繪制圖片的幀。
4.單擊右下角Skia命令直方圖上的指令項(xiàng)，指令項(xiàng)背景會(huì)變粉色，可過濾掉選定的Skia指令。本示例主要關(guān)注Draw開頭的繪制指令，這里把Draw開頭的繪制指令篩選出來。
5.點(diǎn)擊播放按鈕觀察這一幀的繪制過程。也可以手動(dòng)在左側(cè)Skia指令欄從上到下依次點(diǎn)擊繪制指令查看。
6.通過觀察SKP視圖上這一幀的繪制過程，可以發(fā)現(xiàn)在圖片繪制之前，先繪制一個(gè)粉色背景和一段“Hello World”的文字。這些被圖片遮擋的內(nèi)容用戶無法感知，也沒有實(shí)際的作用，開發(fā)者就可以分析出存在冗余的繪制組件。
7.在本示例中根據(jù)SKP視圖找到并刪除對應(yīng)頁面上的冗余組件。
8.使用優(yōu)化后的應(yīng)用，重新錄制mskp，在Skia Debugger上可以看出繪制指令有所減少。
對比優(yōu)化冗余組件前后的skp文件可以看出，去除冗余組件后繪制指令由原來的12個(gè)降低到10個(gè)，頁面需要執(zhí)行的Skia指令總數(shù)由78個(gè)下降到63個(gè)，Skia指令總量下降19%，有效提升頁面的繪制性能。 冗余組件刪除前后Skia指令數(shù)量對比：
通過上述示例介紹DrawingDoc錄制回放，以及使用Skia Debugger分析應(yīng)用頁面是否存在冗余繪制，進(jìn)而對其進(jìn)行優(yōu)化。在實(shí)際復(fù)雜的應(yīng)用頁面中，如果存在冗余組件，頁面繪制時(shí)執(zhí)行額外的Skia指令會(huì)加重GPU負(fù)載，使頁面組件刷新和渲染耗時(shí)變長，影響頁面性能。使用DrawingDoc和Skia Debugger，可以通過抓取底層Skia指令，逐幀逐繪制指令回放應(yīng)用頁面上各個(gè)組件的繪制細(xì)節(jié)，從而幫助開發(fā)者減少應(yīng)用頁面的冗余繪制，有效提升應(yīng)用繪制性能。
如果大家還沒有掌握鴻蒙，現(xiàn)在想要在最短的時(shí)間里吃透它，我這邊特意整理了《鴻蒙語法ArkTS、TypeScript、ArkUI等…視頻教程》以及《鴻蒙開發(fā)學(xué)習(xí)手冊》（共計(jì)890頁），希望對大家有所幫助：https://docs.qq.com/doc/DZVVBYlhuRkZQZlB3
鴻蒙語法ArkTS、TypeScript、ArkUI等…視頻教程：https://docs.qq.com/doc/DZVVBYlhuRkZQZlB3
OpenHarmony APP開發(fā)教程步驟：https://docs.qq.com/doc/DZVVBYlhuRkZQZlB3
《鴻蒙開發(fā)學(xué)習(xí)手冊》：
如何快速入門：https://docs.qq.com/doc/DZVVBYlhuRkZQZlB3
1.基本概念
2.構(gòu)建第一個(gè)ArkTS應(yīng)用
3.……
開發(fā)基礎(chǔ)知識：https://docs.qq.com/doc/DZVVBYlhuRkZQZlB3
1.應(yīng)用基礎(chǔ)知識
2.配置文件
3.應(yīng)用數(shù)據(jù)管理
4.應(yīng)用安全管理
5.應(yīng)用隱私保護(hù)
6.三方應(yīng)用調(diào)用管控機(jī)制
7.資源分類與訪問
8.學(xué)習(xí)ArkTS語言
9.……
基于ArkTS 開發(fā)：https://docs.qq.com/doc/DZVVBYlhuRkZQZlB3
1.Ability開發(fā)
2.UI開發(fā)
3.公共事件與通知
4.窗口管理
5.媒體
6.安全
7.網(wǎng)絡(luò)與鏈接
8.電話服務(wù)
9.數(shù)據(jù)管理
10.后臺(tái)任務(wù)(Background Task)管理
11.設(shè)備管理
12.設(shè)備使用信息統(tǒng)計(jì)
13.DFX
14.國際化開發(fā)
15.折疊屏系列
16.……
文章來源：http://www.zghlxwxcb.cn/news/detail-861146.html
鴻蒙生態(tài)應(yīng)用開發(fā)白皮書V2.0PDF：https://docs.qq.com/doc/DZVVBYlhuRkZQZlB3
文章來源地址http://www.zghlxwxcb.cn/news/detail-861146.html
到了這里，關(guān)于OpenHarmony實(shí)戰(zhàn)開發(fā)-性能測試工具SmartPerf Editor使用指導(dǎo)的文章就介紹完了。如果您還想了解更多內(nèi)容，請?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
