支付寶小程序擴展能力 附錄 3：性能調(diào)試工具

簡介

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

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

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

設(shè)計目的

• 用于檢測首頁啟動耗時、首頁流量消耗、首頁平均內(nèi)存三項數(shù)據(jù)；

其中首頁啟動耗時由于機型單一，易受網(wǎng)絡(luò)影響，故不以首頁啟動耗時為標(biāo)準(zhǔn)；

• 圖片資源檢測；

• js 函數(shù)耗時檢測，

環(huán)境要求

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

調(diào)試流程

打開調(diào)試面板

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

掃碼調(diào)試

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

開始分析

• 掃碼進入調(diào)試模式后，客戶端會打開小程序，并自動開始收集小程序性能數(shù)據(jù)。

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

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

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

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

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

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

再次分析（可選）

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

停止調(diào)試

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

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

分析結(jié)果

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

診斷建議

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

首頁加載性能

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

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

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

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

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

對于建議優(yōu)化項，將給出相應(yīng)的優(yōu)化建議，開發(fā)者可進行針對性優(yōu)化。