首屏演算法說明
首屏即 頁面首次渲染滿屏內容,是用於計算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統計的首屏鋪滿判定