支付寶小程式效能分析

jafeney 發表於 2021-10-15

首屏演算法說明

首屏即 頁面首次渲染滿屏內容,是用於計算T2的關鍵節點。簡單說就是,在頁面載入的過程中,記錄所有的渲染幀,在頁面載入結束之後,回溯檢查每一幀,圖片渲染面積首次達到最大值的那一幀記為T2

T2計算起點

T2的時間起點為 PerformanceTiming.naviagtionStart, 即 HTML主 文件開始載入的時間。在WebView載入頁面的場景,與WebView.loadUrl 的時機非常接近

T2開始記錄渲染幀

T2開始記錄渲染幀的時間點為 FirstFullScreenLayout ,即排版高度大於一屏。在這個時間點之前,頁面一般不會有內容展示,所以沒有必要記錄渲染幀

T2結束計算的條件

常見的T2結束計算的條件有以下幾種:

  • 頁面退出。比如,使用者關閉頁面
  • 頁面不可見。比如,app切到後臺
  • 有使用者互動。比如,使用者點選或者滑動頁面
  • T2計算耗時超時。T2幀記錄的計算不能消耗太多時間,超出50ms的閥值會結束計算,不再記錄後續的幀
  • T2幀數超出閥值。T2幀不能記錄太多,也會損耗效能,超出50幀的閥值會結束計算,不再記錄後續的幀
  • WebView所在的Window失去焦點。比如,頁面有Native彈框
需特別注意的是:T2結束計算的時間點不一定是T2的時間終點,而且極有可能是不一樣的。T2結束計算之後,還要回溯檢查,找出圖片渲染面積首次達到最大值的那一幀,才記為T2

影響耗時的因素

核心耗時

  • 包大小過大:包括整包/主包(分包)的壓縮包 以及 內部bundle檔案(worker)過大。包檔案會包含一些靜態資源。相對來說,後者影響更大,因為每次執行會有worker的解析過程
  • 同步api呼叫(my.Sync),阻塞執行。
  • uc冷啟:支付寶首頁首屏小程式的uc冷啟(init_uc)耗時佔比會偏高,因為App雖然已經做了啟動uc初始化,但是在首頁的小程式訪問時來不及完成初始化肯定會更多(想減少耗時就申請預設踢出支付寶首頁)。

    • 核心耗時階段,uc冷啟比熱啟耗時要多出145%(餓了麼小程式)。

業務耗時

  • 主鏈路耗時:免登,主介面呼叫到頁面渲染,序列鏈路。
  • 首屏內容不足:主介面資料模組不足。
  • 渲染Data資料量:setData次數&內容過多,影響渲染效率
  • 圖片過大過多:直接影響T2統計的首屏鋪滿判定