推薦一款前端性能測試工具:WebPageTest


??工具介紹
WebPageTest這是一個非常詳細且專業(yè)的web頁面性能分析工具,而且開源的!如果你打不開其官網(wǎng),或者擔心安全問題,你可以自己拿源碼搭建這個平臺工具。
性能分析極其詳細,包含你所知道的所有新能參數(shù)指標,還有一些這個工具自己的指標參數(shù),比如speed index,更能從人的角度看待一個頁面體驗是否良好。提供了多種主流瀏覽器的訪問性能,提供了全球多個地點的測試性能,還有視頻錄像功能可以返回體驗。這個視頻功能極好的用于直觀的對比演示??傊?,優(yōu)點非常之多,沒有理由不嘗試一下。
入口在 這里,長這樣,

上面三輸入框,,,第一行,輸入你的頁面url。
第二行,選擇你的訪問點,比如你想測一下北京的用戶訪問速度,那么你選擇北京。
第三行,選擇什么瀏覽器訪問。
右邊,點擊START ?TEST,,,,耐心等待。
分析的結果時存下來的,比如,我的三個url分析結果如下,可以反復進入查閱。
頁面1:http://navo.top/zEJRj2,分析結果。
頁面2:http://navo.top/vU7fye,分析結果。
頁面3:http://navo.top/Iryiyy,分析結果。
??結果使用和分析
分析完后,結果長這樣,

總共跑了三次。每一次都是First View(就是相當于新用戶,首次打開頁面,沒有任何緩存)。
Performance Result 就是指標總覽,列舉了一些主要的新能指標的平均值。
指標解析:?從輸入url按enter開始的,達到下面節(jié)點的時間。
▲ Load Time
頁面完全加載完時間(不等待圖片下載,iframe下載,css更新完),此時,window.onload 事件此時觸發(fā)。同 Document complete time.
▲ DOM Content Loaded
HTML DOM 骨架完全下載和解析,包括
