讀了這篇文章,你將變身web分析大師

騰訊雲+社群發表於2018-11-14

歡迎大家前往騰訊雲+社群,獲取更多騰訊海量技術實踐乾貨哦~

本文由shirishiyue發表於雲+社群專欄

1、工具介紹

​ 這是一個非常詳細且專業的web頁面效能分析工具,而且開源的!如果你打不開其官網,或者擔心安全問題,你可以自己拿原始碼搭建這個平臺工具。

​ 效能分析極其詳細,包含你所知道的所有新能引數指標,還有一些這個工具自己的指標引數,比如speed index,更能從人的角度看待一個頁面體驗是否良好。提供了多種主流瀏覽器的訪問效能,提供了全球多個地點的測試效能,還有視訊錄影功能可以返回體驗。這個視訊功能極好的用於直觀的對比演示。總之,優點非常之多,沒有理由不嘗試一下。

​ 入口在 這裡,長這樣,

img

​ 上面三輸入框,,,第一行,輸入你的頁面url。

​ 第二行,選擇你的訪問點,比如你想測一下北京的使用者訪問速度,那麼你選擇北京。

​ 第三行,選擇什麼瀏覽器訪問。

​ 右邊,點選START TEST,,,,耐心等待。

​ 分析的結果時存下來的,比如,我的三個url分析結果如下,可以反覆進入查閱。

頁面1:test.igame.qq.com/pvp/acts/a2…分析結果

頁面2:http://134.175.16.24/vuessr/act/act1/index/hero,分析結果

頁面3:http://134.175.16.24/newcss/act/act1/index.html/hero,分析結果

2、結果使用和分析

​ 分析完後,結果長這樣,

img

​ 總共跑了三次。每一次都是First View(就是相當於新使用者,首次開啟頁面,沒有任何快取)。

​ Performance Result 就是指標總覽,列舉了一些主要的新能指標的平均值。


指標解析: 從輸入url按enter開始的,達到下面節點的時間。

▲ Load Time

​ 頁面完全載入完時間(不等待圖片下載,iframe下載,css更新完),此時,window.onload 事件此時觸發。同 Document complete time.

▲ DOM Content Loaded

​ HTML DOM 骨架完全下載和解析,包括

相關文章