支付寶小程序 性能體驗評測規(guī)范

1. 首頁啟動耗時檢測

首屏內(nèi)容全部顯示出來的時間，代表了用戶可以感受到的頁面加載完成、可進行交互的時間，耗時過長會導致用戶看到的都是白屏或者內(nèi)容有缺失，用戶會一直等待內(nèi)容加載完成。建議檢查加載過程中的所有操作，看是否存在請求數(shù)據(jù)耗時過長或者一次性渲染數(shù)據(jù)過大的情況。

2. 渲染界面耗時過長檢測

渲染界面的耗時過長會讓用戶覺得卡頓，體驗較差，出現(xiàn)這一情況時，需要校驗是否同時渲染的區(qū)域太大。

3. setData 調(diào)用頻率檢測

避免頻繁觸發(fā) setData 或者 $spliceData。需要頻繁觸發(fā)重新渲染時，避免使用頁面級別的 setData 和 $spliceData， 將這一塊封裝成自定義組件，然后使用組件級別的 setData 或 $spliceData 觸發(fā)組件重新渲染。長列表數(shù)據(jù)觸發(fā)渲染時，使用 $spliceData 多次追加數(shù)據(jù)，而不用傳遞整個列表。復雜頁面建議封裝成自定義組件，減少頁面級別的 setData。詳情請參見 優(yōu)化 setData 邏輯方案明細。

4. setData 數(shù)據(jù)量檢測

setData 數(shù)據(jù)不宜過大，避免一次性傳遞過長的列表。首屏請勿一次性構造太多節(jié)點，服務端可能一次請求傳遞大量數(shù)據(jù)，請勿一次性 setData，可先 setData 一部分數(shù)據(jù)，然后等待一段時間（比如 400ms，具體需要業(yè)務調(diào)節(jié)）再調(diào)用 $spliceData 將其他數(shù)據(jù)傳輸過去。

5. AXML 節(jié)點數(shù)檢測

建議一個頁面使用少于 1000 個節(jié)點、節(jié)點樹深度少于 30 層、子節(jié)點數(shù)不大于 60 個，一個過大的 DOM 樹會引起內(nèi)存消耗增長，樣式計算時間過長，與復雜的樣式規(guī)則相結合可能會嚴重減慢渲染速度。

6. JS 函數(shù)耗時檢測

頁面打開期間調(diào)用的 js 函數(shù)較多，如果多個函數(shù)執(zhí)行耗時都較長，那串行起來會更長，會嚴重影響用戶體驗，因此建議對耗時較長的函數(shù)進行優(yōu)化。

7. 請求耗時過長檢測

請求的耗時太長會讓用戶一直等待甚至離開，應優(yōu)化好服務器處理時間，可減少回包大小，可服務端 rpc/mtop/http 等網(wǎng)絡請求預加載，讓請求快速響應。

8. 短時間內(nèi)發(fā)起太多請求檢測

短時間內(nèi)發(fā)起太多請求會觸發(fā)小程序并行請求數(shù)量的限制，同時太多請求也可能導致加載慢等問題，應合理控制請求數(shù)量，甚至做請求的合并等。

9. 短時間內(nèi)發(fā)起太多圖片請求檢測

短時間內(nèi)發(fā)起太多圖片請求會觸發(fā)瀏覽器并行加載的限制，可能導致圖片加載慢，用戶一直處理等待。應該合理控制數(shù)量，可考慮使用雪碧圖技術或在屏幕外的圖片使用懶加載。

10. JSAPI 調(diào)用耗時過長檢測

JSAPI 調(diào)用耗時過長，會影響 JSAPI 調(diào)用性能，應縮短單個 API 接口的耗時時長。

11. JSAPI 同步調(diào)用檢測

同步 JSAPI 的調(diào)用過多將造成進程的阻塞，影響后續(xù)業(yè)務邏輯的執(zhí)行。建議盡量避免同步調(diào)用，getSystemInfo、getStorage、getLocation、getCities 是同步調(diào)用的高發(fā)區(qū)。

12. JSAPI 重復調(diào)用檢測

多次調(diào)用同一個 JSAPI，會增加無用耗時，應減少單頁面同一 JSAPI 調(diào)用次數(shù)，采用緩存方式處理前一執(zhí)行接口后的結果數(shù)據(jù)，減少調(diào)用次數(shù)。

13. 圖片分屏檢測

加載當前屏幕中暫時不需要展示的圖片，會影響頁面加載耗時，增大內(nèi)存消耗，建議分屏懶加載。

14. 圖片緩存檢測

開啟 HTTP 緩存控制后，下一次加載同樣的圖片，會直接從緩存讀取，大大提升加載速度。

15. 圖片大小檢測

圖片過大會導致網(wǎng)絡請求耗時增加，使用戶等待交互的時間過長，應盡量控制圖片大小，建議進行壓縮或合理剪裁。圖片過大會影響包資源大小和加載耗時，應避免使用大圖，合理壓縮圖片尺寸，圖片格式建議轉化成 SVG/webp，必要的大圖從 CDN 渠道上傳。

16. 圖片尺寸檢測

圖片太大而有效顯示區(qū)域較小時會增加內(nèi)存的消耗，應根據(jù)顯示區(qū)域大小合理控制圖片大小。

17. 頁面重復請求檢測

發(fā)起請求總會讓用戶等待，可能造成不好的體驗，應盡量避免多余的請求，比如對同樣的請求進行緩存。

18. 頁面請求域名收斂檢測

頁面多個請求的域名建議盡量收斂在一起，如果域名太過分散，DNS 和鏈接復用率低，影響資源的加載速度，同時也需要考慮同域資源是否有并行加載的能力。

19. 首頁流量消耗檢測

應避免頁面加載對用戶造成過大的流量開銷，可以考慮使用資源合并、壓縮等技術方案來降低流量開銷。

20. 圖片壓縮檢測

圖片建議使用 webp、hevc 等壓縮格式，這樣不僅能提升網(wǎng)絡傳輸效率和加載體驗，同時也可以減少內(nèi)存消耗和包體積。

21. 文本資源壓縮檢測

建議使用 gzip/deflate 等壓縮技術來降低文件的網(wǎng)絡傳輸負載，以提升資源傳輸速度。