支付寶小程序 性能調(diào)試

簡(jiǎn)介

小程序性能調(diào)試可在使用小程序開(kāi)發(fā)者工具開(kāi)發(fā)小程序時(shí)，無(wú)需連接數(shù)據(jù)線，通過(guò)掃碼即可在真機(jī)上進(jìn)行小程序性能調(diào)試。調(diào)試過(guò)程中，工具可以對(duì)采集到的性能數(shù)據(jù)進(jìn)行分析，并針對(duì)檢測(cè)到的性能問(wèn)題給出相應(yīng)的優(yōu)化建議。

這個(gè)功能使得開(kāi)發(fā)者在小程序開(kāi)發(fā)階段就可以隨時(shí)在本地進(jìn)行性能調(diào)優(yōu)，進(jìn)而提升小程序的性能體驗(yàn)。

說(shuō)明：內(nèi)存不足會(huì)導(dǎo)致小程序偶現(xiàn)卡頓，建議清理內(nèi)存并通過(guò)性能調(diào)試進(jìn)行自查。

環(huán)境要求

• 支付寶客戶(hù)端版本：10.1.62 及以上版本（iOS、Android 均可）
• 小程序開(kāi)發(fā)者工具版本：0.30 及以上版本

調(diào)試流程

打開(kāi)調(diào)試面板

點(diǎn)擊 IDE 功能面板里的 實(shí)驗(yàn)室 ，顯示工具列表，選擇列表中的 性能調(diào)試，右側(cè)出現(xiàn)性能調(diào)試面板。

掃碼調(diào)試

點(diǎn)擊調(diào)試面板左上角第一個(gè)（或者屏幕中間）的白色圓圈 開(kāi)啟掃碼 按鈕，生成調(diào)試二維碼。然后使用支付寶客戶(hù)端掃碼，則進(jìn)入了性能調(diào)試模式。

開(kāi)始分析

掃碼進(jìn)入調(diào)試模式后，客戶(hù)端會(huì)打開(kāi)小程序，并自動(dòng)開(kāi)始收集小程序性能數(shù)據(jù)。

調(diào)試面板頂部工具欄右側(cè)會(huì)顯示：已覆蓋頁(yè)面、當(dāng)前頁(yè)面

工具欄下方顯示收集進(jìn)度、已連接 狀態(tài)，以及以下具體信息：

• 設(shè)備信息
• 系統(tǒng)版本
• 客戶(hù)端信息
• 小程序名稱(chēng)
• 小程序 ID
• 小程序版本號(hào)

彈出窗口的顯示內(nèi)容有：狀態(tài)、時(shí)間和進(jìn)度信息。

性能數(shù)據(jù)收集幾秒后，彈窗會(huì)自動(dòng)消失，對(duì)當(dāng)前時(shí)間段內(nèi)已采集到的數(shù)據(jù)進(jìn)行診斷分析。

彈窗自動(dòng)消失后，分析結(jié)果會(huì)全部顯示在調(diào)試面板中。且此時(shí)，性能數(shù)據(jù)仍在繼續(xù)采集中，可點(diǎn)擊調(diào)試面板左上角第二個(gè)有動(dòng)效的 再次分析 按鈕即可再次分析，刷新診斷結(jié)果。

再次分析（可選）

首次分析完成后，可點(diǎn)擊調(diào)試面板左上角第二個(gè) 開(kāi)始分析 按鈕，進(jìn)行再次分析，診斷結(jié)果會(huì)刷新至當(dāng)前最新，同時(shí)在面板分析結(jié)果時(shí)間軸中顯示一條分割線，用于區(qū)分時(shí)間間隔。

停止調(diào)試

點(diǎn)擊調(diào)試面板左上角第三個(gè) 停止采集 按鈕，斷開(kāi)連接，停止性能數(shù)據(jù)采集。若再次點(diǎn)擊，則會(huì)清空面板數(shù)據(jù)。

若要重新開(kāi)啟調(diào)試，點(diǎn)擊第一個(gè) 開(kāi)啟掃碼 按鈕，重新生成二維碼，掃碼調(diào)試即可。

分析結(jié)果

分析采集到的小程序性能數(shù)據(jù)，得到分析結(jié)果。

面板中的分析結(jié)果主要分為診斷建議和 Timeline 兩個(gè)部分。

診斷建議

診斷建議包含兩個(gè)部分：首頁(yè)加載性能、指標(biāo)診斷結(jié)果。

首頁(yè)加載性能

首頁(yè)加載性能包括首頁(yè)啟動(dòng)耗時(shí)、首頁(yè)流量消耗、首頁(yè)平均內(nèi)存三項(xiàng)數(shù)據(jù)。

每一項(xiàng)數(shù)據(jù)均給出了標(biāo)準(zhǔn)值以供參考。若某項(xiàng)性能未能符合標(biāo)準(zhǔn)，該項(xiàng)性能的數(shù)據(jù)將顯示為紅色。

指標(biāo)診斷結(jié)果

指標(biāo)診斷結(jié)果顯示為兩個(gè)有著具體數(shù)量的分類(lèi)：建議優(yōu)化項(xiàng)、通過(guò)項(xiàng)。

每項(xiàng)診斷結(jié)果均給出了診斷標(biāo)準(zhǔn)，也可點(diǎn)擊展開(kāi)按鈕查看診斷詳情。

對(duì)于建議優(yōu)化項(xiàng)，將給出相應(yīng)的優(yōu)化建議，開(kāi)發(fā)者可進(jìn)行針對(duì)性?xún)?yōu)化。

Timeline

該數(shù)據(jù)區(qū)域以時(shí)間軸的形式展示，監(jiān)測(cè)小程序運(yùn)行的整個(gè)周期，主要提供三部分?jǐn)?shù)據(jù)：

• MEMORY(MB)、CPU(%)、FPS：以時(shí)間軸形式展示內(nèi)存、CPU、FPS的變化情況；
• Network（網(wǎng)絡(luò)請(qǐng)求）：展示小程序所有網(wǎng)絡(luò)請(qǐng)求的 URL 以及具體耗時(shí)；
• MiniApp（函數(shù)調(diào)用）：主要包含 OpenAPI 函數(shù)調(diào)用情況、App 生命周期函數(shù)調(diào)用情況、各個(gè)頁(yè)面的函數(shù)調(diào)用情況，以及各函數(shù)的具體耗時(shí)。

技術(shù)支持

如有其它疑問(wèn)，可釘釘掃描下方二維碼，獲取技術(shù)支持。