如何收集前端頁面性能參數(shù)？
一、請求時間統(tǒng)計
上圖是performance.timing監(jiān)測到的特定于用戶的計時器，通過這些屬性的組合搭配，可以獲取到特定的時間數(shù)據(jù)。
垂直角度的度量順序圖：
1）performance
設(shè)置好插件中全局的performance對象，以及方法now，獲取當(dāng)前時間戳。
2）Document.readyState
上圖中的“domComplete”、“domInteractive”和“domLoading”，就是Document。readyState的3種狀態(tài)loading, interactive或complete發(fā)生的時間。
3）getTimes()
在這個方法中計算各個參數(shù)之間的值。
在網(wǎng)上參考了很多資料，再結(jié)合了一點自己的理解，有些參數(shù)的理解可能有誤，具體的計算方式可以查看源碼“primus.js”。
loadTime：加載總時間，這幾乎代表了用戶等待頁面可用的時間
unloadEventTime：Unload事件耗時
loadEventTime：執(zhí)行 onload 回調(diào)函數(shù)的時間
domReadyTime：用戶可操作時間
firstScreen：首屏?xí)r間，用戶在沒有滾動時候看到的內(nèi)容渲染完成并且可以交互的時間，記錄載入時間最長的圖片
parseDomTime：解析 DOM 樹結(jié)構(gòu)的時間，期間要加載內(nèi)嵌資源
initDomTreeTime：請求完畢至DOM加載耗時
readyStart：準(zhǔn)備新頁面時間耗時
redirectTime：重定向的時間
appcacheTime：DNS緩存耗時
lookupDomainTime：DNS查詢耗時
connectTime：TCP連接耗時
requestTime：內(nèi)容加載完成的時間
requestDocumentTime：請求文檔時間，開始請求文檔到開始接收文檔
responseDocumentTime：接收文檔時間，開始接收文檔到文檔接收完成
TTFB（Time To First Byte）：讀取頁面第一個字節(jié)的時間
二、資源載入信息
performance對象中有個 getEntries 方法，通過此方法可以將頁面中的資源載入情況記錄下來。
可以繪制出像下圖那樣的瀑布圖。
然而此方法兼容性非常差，我在紅米手機(jī)中測試，UC不行，自帶的瀏覽器倒是可以將信息打印出來。
在插件中也稍微封裝了一個方法“getEntries”，在兼容的瀏覽器中可以采集到相關(guān)數(shù)據(jù)。
name：資源的完整路徑，例如“http://localhost:63342/web/strick/Primus/ajax/data2.json”
fileName：文件名。例如“data2.json”
duration：資源載入總共消耗的時間
requestStartDelay：開始請求延時時間
lookupDomainTime：DNS 查詢時間
connectTime：TCP 建立連接完成握手的時間
TTFB：讀取資源第一個字節(jié)的時間
requestTime：內(nèi)容加載完成的時間
requestDuration：請求區(qū)間
redirectTime：重定向的時間
在一些商業(yè)性能采集的應(yīng)用中，我看到有瀑布圖的展示，不知道他們是怎么搞的。
三、網(wǎng)絡(luò)狀態(tài)
網(wǎng)絡(luò)狀況 API“navigator.connection”也是個很有用的參數(shù)，然而兼容性也是非常差。
網(wǎng)絡(luò)狀態(tài)就是獲取當(dāng)前是“WIFI 2G 3G 4G”等。
如果能獲取到這個參數(shù)，就能準(zhǔn)確知道頁面在不同網(wǎng)絡(luò)狀態(tài)中展現(xiàn)的情況。
四、網(wǎng)速
沒有專門的API提供當(dāng)前用戶的網(wǎng)速，但可以通過下載某個大文件來計算。
目前只知道這種方法，感覺實用性不是很大。
在index.html中寫了個例子，將圖片放到某個服務(wù)器下面會更準(zhǔn)確一些。
五、AJAX監(jiān)控
現(xiàn)在的頁面上面充斥著大量的ajax請求，可以將請求的信息保存起來有助于分析性能。
在項目中使用Zepto庫、jQuery等封裝好的庫，最后還是會調(diào)用原生的“XMLHttpRequest”
可以重新一下“XMLHttpRequest”對象，在這個對象的幾個步驟中埋入要統(tǒng)計的點。
primus.dpi = function() {return {width:window.screen.width, height:window.screen.height};};
七、異常監(jiān)控
異常監(jiān)控就是監(jiān)聽“window.onerror”事件，在這個事件內(nèi)能夠獲取到錯誤提示信息，行數(shù)，列數(shù)，錯誤地址。
<head><script type='text/JavaScript'>window.primus || (primus={});primus.param = {"token":"dsadasd2323dsad23dsada","backgroundImages":[]};</script><script src="js/primus.js"></script></head>
八、數(shù)據(jù)發(fā)送與引用
1）數(shù)據(jù)發(fā)送
為了更好的跨域，數(shù)據(jù)發(fā)送通過設(shè)置Image對象的src來實現(xiàn)。
簡單的將各個收集過來的數(shù)據(jù)作為URL中的參數(shù)傳過去，代碼中可能有BUG。
發(fā)送以后就是保存數(shù)據(jù)了，可以將數(shù)據(jù)保存在Hadoop中。
2）Primus的引用
由于要計算白屏?xí)r間，dom時間等，所以位置不能隨便放，得要放在head的最后面。
如果要做點初始化配置也是完全OK的。
<span https:="" mmbiz.qpic.cn="" mmbiz_svg="" vljdym7pibyjwxprtwbcd0zmkibrvo8mgpuz35gvkoqexfy3wiciccfckqitxc9gubz21jkystkrfwlguhzyah1icrsins8i1ct1j="" 640?wx_fmt="svg")" 10px="" 40px="" no-repeat="" rgb(40,="" 44,="" 52);height:="" 30px;width:="" 100%;margin-bottom:="" -7px;border-radius:="" 5px;"=""><head><script type='text/JavaScript'>window.primus || (primus={});primus.param = {"token":"dsadasd2323dsad23dsada","backgroundImages":[]};</script><script src="js/primus.js"></script></head>
本文完~
學(xué)習(xí)更多技能
請點擊下方公眾號
