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