JS每日一題：前端效能監控你會監控哪些資料? 如何做?
20190318期
前端效能監控你會監控哪些資料? 如何做?
開始之前給大家推薦兩個檢查網頁效能的地址
為什麼要做效能監控
對於公司來說，效能在一定程度上與利益直接相關
為什麼效能會影響公司的收益呢？根本原因還是在於效能影響了使用者體驗。載入的延遲、操作的卡頓等都會影響使用者的使用體驗。尤其是移動端，使用者對頁面響應延遲和連線中斷的容忍度很低。想象一下你拿著手機開啟一個網頁想看到某個資訊卻載入半天的心情，你很可能選擇直接離開換一個網頁。谷歌也將頁面載入速度作為 SEO 的一個權重
哪些點需要監控
我們可以分為以下幾個點來進行監控
- 白屏時間
- 首屏時間
- 使用者可操作時間
- 總下載時間
白屏時間
白屏時間是使用者首次看到內容的時間，也叫做首次渲染時間，chrome 高版本有 firstPaintTime 介面來獲取這個耗時，但大部分瀏覽器並不支援，必須想其他辦法來監測。仔細觀察 WebPagetest 檢視分析發現，白屏時間出現在頭部外鏈資源載入完附近，因為瀏覽器只有載入並解析完頭部資源才會真正渲染頁面。基於此我們可以通過獲取頭部資源載入完的時刻來近似統計白屏時間
程式碼理解
<!DOCTYPE HTML> <html> <head> <meta charset="UTF-8"/> <script> var start_time = +new Date; //測試時間起點，實際統計起點為 </script> <script src="js"></script> <script> var end_time = +new Date; //時間終點 var headtime = end_time - start_time; //頭部資源載入時間 console.log(headtime); </script> </html>
首屏時間
首屏時間的統計比較複雜，因為涉及圖片等多種元素及非同步渲染等方式。觀察載入檢視可發現，影響首屏的主要因素的圖片的載入。通過統計首屏內圖片的載入時間便可以獲取首屏渲染完成的時間。統計流程如下
首屏位置呼叫 API 開始統計 -> 繫結首屏內所有圖片的 load 事件 -> 頁面載入完後判斷圖片是否在首屏內，找出載入最慢的一張 -> 首屏時間
可操作時間
使用者可操作預設可以統計domready時間，因為通常會在這時候繫結事件操作。對於使用了模組化非同步載入的 JS 可以在程式碼中去主動標記重要 JS 的載入時間，這也是產品指標的統計方式
總下載時間
總下載時間預設可以統計onload時間，這樣可以統計同步載入的資源全部載入完的耗時。如果頁面中存在很多非同步渲染，可以將非同步渲染全部完成的時間作為總下載時間
總結
- 白屏時間指head內資源載入完成
- 首屏時間指可視區域內最後一張圖片載入完成的時間
- 可操作時間指Document.onready時間
- 總下載時間指Document.onload時間
關於JS每日一題
JS每日一題可以看成是一個語音答題社群
每天利用碎片時間採用60秒內的語音形式來完成當天的考題
群主在次日0點推送當天的參考答案
- 注 絕不僅限於完成當天任務，更多是查漏補缺，學習群內其它同學優秀的答題思路