歡迎大家前往騰訊雲+社區,獲取更多騰訊海量技術實踐乾貨哦~
本文由shirishiyue發表於雲+社區專欄
1、工具介紹
這是一個非常詳細且專業的web頁面性能分析工具,而且開源的!如果你打不開其官網,或者擔心安全問題,你可以自己拿×××這個平臺工具。
性能分析極其詳細,包含你所知道的所有新能參數指標,還有一些這個工具自己的指標參數,比如speed index,更能從人的角度看待一個頁面體驗是否良好。提供了多種主流瀏覽器的訪問性能,提供了全球多個地點的測試性能,還有視頻錄像功能可以返回體驗。這個視頻功能極好的用於直觀的對比演示。總之,優點非常之多,沒有理由不嘗試一下。
入口在 這裏,長這樣,
上面三輸入框,,,第一行,輸入你的頁面url。
第二行,選擇你的訪問點,比如你想測一下北京的用戶訪問速度,那麼你選擇北京。
第三行,選擇什麼瀏覽器訪問。
右邊,點擊START TEST,,,,耐心等待。
分析的結果時存下來的,比如,我的三個url分析結果如下,可以反覆進入查閱。
2、結果使用和分析
分析完後,結果長這樣,
總共跑了三次。每一次都是First View(就是相當於新用戶,首次打開頁面,沒有任何緩存)。
Performance Result 就是指標總覽,列舉了一些主要的新能指標的平均值。
指標解析: 從輸入url按enter開始的,達到下面節點的時間。
▲ Load Time
頁面完全加載完時間(不等待圖片下載,iframe下載,css更新完),此時,window.onload 事件此時觸發。同 Document complete time.
▲ DOM Content Loaded
HTML DOM 骨架完全下載和解析,包括<script>元素。(等待圖像下載,css更新,iframe更新等)。此時,DOMContentLoaded 事件觸發。(你在預加載數據的時候,可以在這個事件時會更合適些,而不是上面的dom ready)
▲ Time to First Byte
首字節時間。瀏覽器接收到第一個字節的時間。包括服務器處理以及網絡傳輸,DNS尋址時間+建立連接時間(Socket) + SSL認證時間等。
▲ Start Render
白屏後首次出現內容的時間。
▲ Speed Index
速度指數,頁面呈現出來的平均時間。比Start Render更人性化的指標。詳細計算方式參考:Speed Index 。主要
▲ Time to Interactive
首次可交互時間。頁面可以開始響應用戶輸入事件。(因爲頁面呈現過程中,其實還是不可交互的。)
▲ Requests
瀏覽器針對頁面上的內容(圖片,javascript,css等)發出的請求數。
▲ Bytes In
瀏覽器加載頁面下載的數據量。它通常也被稱爲“頁面大小”。
過程詳細:
▲ 中間的Waterfall可以看到瀑布流圖,點進去,跟你使用chrome tool一樣。不多介紹。
▲ Screen Shot,網頁快照,保存了從輸入url到頁面fully loaded的全稱快照。
▲ Video 整個過程的視頻。這個非常好,你可以和幾個視頻放在一起,非常直觀的看哪一個快哪一個慢。
▲ 各種 breakdown 拆分統計,包括 Contents,Processing,Domains等等,,,,,比如,Contents 拆分統計如下,
▲ domains breakdown,and, request map,,,可統計請求域名情況,域名越多,明顯對時間要求更多。
▲ 性能表現總量,可以優化性能的指標完成情況。
這裏面列出了可使用的性能點,如:
- First Byte Time (back-end processing): 51/100
- Use persistent connections (keep alive): 100/100
- Use gzip compression for transferring compressable responses: 42/100
- Compress Images: 100/100
- Leverage browser caching of static assets: 14/100
- Use a CDN for all static assets: 0/100
此文已由作者授權騰訊雲+社區發佈,更多原文請點擊
搜索關注公衆號「雲加社區」,第一時間獲取技術乾貨,關注後回覆1024 送你一份技術課程大禮包!
海量技術實踐經驗,盡在雲加社區!