如何在 H5 和小程式項目中計算白屏時間和首屏時間#前端面試

題目：如何在 H5 和小程式項目中計算白屏時間和首屏時間

思路：

白屏時間=頁面開始展示的時間點-開始請求時間點。

開始請求時間點可以通過Performance Timing.navigation Start 。那麼頁面開始展示的時間點怎麼擷取呢。已經知道渲染過程是逐漸完成的，而且頁面解析是按照文檔流從上至下解析的，是以一般認為開始解析body的時間點就是頁面開始展示的時間。是以可以通過在head标簽的末尾插入script來統計時間節點作為頁面開始展示時間節點。但是這種方式需要打點，是以也有很多項目為了簡化白屏時間的擷取會選擇忽略head解析時間直接用Performance Timing.dom Loading 來表示頁面開始展示的時間，即使用domloading-navigation Start來表示白屏時間。

首屏時間=首屏内容渲染結束時間點-開始請求時間點。

同樣開始請求時間點可以通過Performance Timing.navigation Start擷取。首屏内容渲染結束的時間點通常有以下幾種方法擷取：

（1）首屏子產品标簽标記法

适用于于首屏内容不需要通過拉取資料才能生存以及頁面不考慮圖檔等資源加載的情況。通過在 HTML 文檔中對應首屏内容的标簽結束位置，使用内聯的 JavaScript 代碼記錄目前時間戳作為首屏内容渲染結束的時間點。

（2）統計首屏内加載最慢的圖檔的時間

通常首屏内容加載最慢的就是圖檔資源，是以可以把首屏内加載最慢的圖檔加載完成的時間作為首屏時間。由于浏覽器對每個頁面的 TCP 連接配接數有限制，使得并不是所有圖檔都能立刻開始下載下傳和顯示。是以在 DOM樹 建構完成後會通過周遊首屏内的所有圖檔标簽，并且監聽所有圖檔标簽 onload 事件，最終周遊圖檔标簽的加載時間擷取最大值，将這個最大值作為首屏時間。

（3）自定義首屏内容計算法

由于統計首屏内圖檔完成加載的時間比較複雜。是以在項目中通常會通過自定義子產品内容，來簡化計算首屏時間。例如忽略圖檔等資源加載情況，隻考慮頁面主要 DOM；隻考慮首屏的主要子產品，而不是嚴格意義首屏線以上的所有内容。

可互動時間=使用者可以正常進行事件輸入時間點-開始請求時間點。

PerformanceTiming有一個domInteractive屬性，代表了DOM結構結束解析的時間點，就是Document.ready State屬性變為“interactive”