前端性能指標--首屏時間統計
Labs 導讀
隨著公司的高速發展，業務需求越來越多，用戶和公司對于頁面的穩定性、性能也有了更高的訴求。根據Aberdeen Group的調研發現從瀏覽器輸入地址開始訪問到頁面展示的最佳時間為3秒內，每多一秒的延遲會使客戶滿意度降低16%。
Part 01、 白屏和首屏時間
? 白屏：從用戶請求頁面開始到顯示第一個字符的時間。中間包括DNS查詢、建立TCP鏈接、發送首個HTTP請求、返回HTML文檔、HTML文檔head解析完畢。通常認為瀏覽器開始渲染<body>標簽或者解析完<head>標簽的時刻就是頁面白屏結束的時間點。
? 首屏：指用戶打開網站開始，到瀏覽器首屏內容渲染完成的時間，對于用戶體驗來說，首屏時間是用戶對一個網站的重要體驗因素。
Part 02、 PerformanceTiming
performance.timing記錄了用于分析頁面整體性能指標的關鍵時間點，包含網絡、解析等一系列的時間數據。最好在頁面完全加載完成之后再使用，因為很多值必須在頁面完全加載之后才能得到。最簡單的辦法是在window.onload（vm.$nextTick 或 react hooks useEffect）事件中讀取各種數據。
在瀏覽器控制臺，console輸入performance可以查看到performance.timing相關時間節點：
通過PerformanceTiming不僅可以幫助我們省去繁瑣的手動打點操作，還可以幫助我們獲取很多其他數據，對于整個時間節點的對應關系：下圖顯示了PerformanceTiming中定義的所有時間戳屬性。
比較有用的頁面性能數據大概包括如下幾個：
- 重定向耗時：redirectEnd - redirectStart
- DNS查詢耗時：domainLookupEnd - domainLookupStart
- TCP鏈接耗時：connectEnd - connectStart
- HTTP請求耗時：responseEnd - responseStart
- 解析dom樹耗時：domComplete - domInteractive
- 白屏時間：responseStart - navigationStart
- DOM ready時間：domContentLoadedEventEnd - navigationStart
- onload時間：loadEventEnd - navigationStart
Part 03、MutationObserver API
MutationObserver API讓我們能監聽DOM樹變化，在首屏的加載中，會涉及到DOM的增加、修改、刪除，所以會觸發多次MutationObserver。
1）利用MutationObserver監聽document對象，每當dom變化時觸發回調函數
2）判斷監聽的dom是否在首屏內，如果在首屏內，將該dom放到指定的數組中，記錄下當前dom變化的時間點
3）在MutationObserver的callback函數中，通過防抖函數，監聽document.readyState狀態的變化
4）當document.readyState === 'complete'，停止定時器和 取消對document的監聽
5）遍歷存放dom的數組，找出最后變化節點的時間，就是首屏加載完成的時間
監聽container外層容器的變化 ，當觸發回調函數時，判斷對應的事件類型以及新增加的子dom是否是首屏展示的dom節點。
圖片
盡管現在的MutationObserver 在移動端兼容性比較好，但為了更好的兼容，我們可以另外引入 MutationEvents API。
Part 04、 webview里H5頁面首屏時間
圖片
4.1 WebView初始化階段
該階段包括幾個主要步驟：
(1)開始解析Url（Url中可能包含${}需要解析的字段）
(2)完成解析Url
(3)開始校驗Url是否可以打開
(4)結束校驗Url
(5)開始加載Url到webview容器和家親app jsbridge提供了getPerformInfo方法可以幫助我們獲取WebView性能數據：
WebViewUrlLoaded WebView加載url時間：startLoadUrl（開始加載Url到webview容器） - startProcessUrl（開始解析Url）；
4.2 HTTP請求服務階段
該階段包括幾個主要步驟：
(1)DNS查詢
(2) 等待 TCP 隊列
(3) TCP鏈接
(4) 發起http請求和響應
(5) 服務器端處理 HTTP 請求 ，服務器端處理 HTTP 請求,瀏覽器得到html代碼
(6) 開始head解析
該階段的時間從webview容器開始加載Url開始到完成head解析，可以使用window.performance.timing.responseStart - startLoadUrl（開始加載Url到webview容器）
4.3 靜態資源下載
該階段包括幾個主要步驟：
(1)head解析 并開始請求靜態資源（如js、css、圖片等）
(2) 靜態資源下載完成
(3) 開始解析靜態資源
該階段的時間從開始請求靜態資源，到開始解析靜態資源（比如 JS），我們可以在js文件開始自定義JscriptLaunch字段，并賦值給window.preformance對象，(window.PerformInfo || (window.PerformInfo = {})).JscriptLaunch = new Date().getTime(); 以便于我們統計該階段的時間：window.PerformInfo.JscriptLaunch - window.performance.timing.responseStart。
4.4 API調用和首屏dom渲染
該階段包括幾個主要步驟：
(1) 開始解析靜態資源，請求API
(2) 響應數據
(3) 下載資源并渲染dom
(4) 首屏內容加載完成
利用MutationObserver監控DOM的變化，獲取首屏dom加載完成的時間，用該時間點 減去window.PerformInfo.JscriptLaunch，就獲得了該階段的時間。
Part 05、 數據上報
將統計到的數據以圖片打點、fetch請求或Beacon等形式進行上報，可以幫助我們后續進行分析和優化。
- 直接發請求上報
直接將數據通過 ajax 發送到后端有一個問題，就是在頁面卸載或刷新時進行上報的話，請求可能會在瀏覽器關閉或重新加載前還未發送至服務端就被瀏覽器 cancel 掉，導致數據上報失敗。
- 利用圖片上報
服務器端并不關心具體的數據上報方式，無論是請求image文件還是請求其他普通文件(JS)或者是請求接口,可以進行數據上報，
使用image有幾個優點：
- 圖片的src屬性并不會跨域,不會出現跨域問題；
- 大部分瀏覽器會延遲卸載（unload）文檔以加載圖像，可以避免第一種方法的問題
- 只要在js中new出Image對象就能發起請求，不用插入dom中，可以防止阻塞頁面加載，影響用戶體驗
- 相比PNG/JPG，GIF的體積最小，最適合進行上報，一般采用1*1像素的透明 gif 進行上報
- 通過css定義content，按鈕點擊就會上報，但是不能動態傳入一些變量
圖片
- Beacon
Beacon可將數據異步發送至服務端，且可能保障在頁面卸載實現前發送申請（解決頁面卸載會終止請求的問題）
圖片
Part 06、 總結
頁面首屏加載時間是個重要的性能指標，通過上面的方式對首屏時間進行統計分析，可以幫助我們有針對性的進行性能優化。同時頁面性能的提升，帶給用戶更好的產品體驗，這樣才會得到好的產品反饋，給企業帶來價值。
