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

歡迎你們前往騰訊雲+社區，獲取更多騰訊海量技術實踐乾貨哦~

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

一、工具介紹

​ 這是一個很是詳細且專業的web頁面性能分析工具，並且開源的！若是你打不開其官網，或者擔憂安全問題，你能夠本身拿源碼搭建這個平臺工具。

​ 性能分析極其詳細，包含你所知道的全部新能參數指標，還有一些這個工具本身的指標參數，好比speed index，更能從人的角度看待一個頁面體驗是否良好。提供了多種主流瀏覽器的訪問性能，提供了全球多個地點的測試性能，還有視頻錄像功能能夠返回體驗。這個視頻功能極好的用於直觀的對比演示。總之，優勢很是之多，沒有理由不嘗試一下。

​ 入口在 這裏，長這樣，

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

​ 第二行，選擇你的訪問點，好比你想測一下北京的用戶訪問速度，那麼你選擇北京。

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

​ 右邊，點擊START TEST，，，，耐心等待。

​ 分析的結果時存下來的，好比，個人三個url分析結果以下，能夠反覆進入查閱。

頁面1：https://test.igame.qq.com/pvp...，分析結果。

頁面2：http://134.175.16.24/vuessr/a...，分析結果。

頁面3：http://134.175.16.24/newcss/a...，分析結果。

二、結果使用和分析

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

​ 總共跑了三次。每一次都是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

相關閱讀
【每日課程推薦】機器學習實戰！快速入門在線廣告業務及CTR相應知識

此文已由做者受權騰訊雲+社區發佈，更多原文請點擊

搜索關注公衆號「雲加社區」，第一時間獲取技術乾貨，關注後回覆1024 送你一份技術課程大禮包！

海量技術實踐經驗，盡在雲加社區！