讀了這篇文章，你將變身web分析大師
本文由shirishiyue發表於雲+社區專欄
1、工具介紹
? 這是一個非常詳細且專業的web頁面性能分析工具，而且開源的！如果你打不開其官網，或者擔心安全問題，你可以自己拿×××這個平臺工具。
? 性能分析極其詳細，包含你所知道的所有新能參數指標，還有一些這個工具自己的指標參數，比如speed index，更能從人的角度看待一個頁面體驗是否良好。提供了多種主流瀏覽器的訪問性能，提供了全球多個地點的測試性能，還有視頻錄像功能可以返回體驗。這個視頻功能極好的用於直觀的對比演示。總之，優點非常之多，沒有理由不嘗試一下。
? 入口在 這裏，長這樣，
? 上面三輸入框，，，第一行，輸入你的頁面url。
? 第二行，選擇你的訪問點，比如你想測一下北京的用戶訪問速度，那麽你選擇北京。
? 第三行，選擇什麽瀏覽器訪問。
? 右邊，點擊START TEST，，，，耐心等待。
? 分析的結果時存下來的，比如，我的三個url分析結果如下，可以反復進入查閱。
頁面1：https://test.igame.qq.com/pvp/acts/a201807/herotool.php?op=2，[分析結果](https://www.webpagetest.org/result/181108_4G_011f6c33da1e7f199f8a1ecd03ef0728/)。
頁面2：http://134.175.16.24/vue***/act/act1/index/hero，[分析結果](https://www.webpagetest.org/result/181108_XY_92f54bd829b1b6f02634774294491736/)。
頁面3：http://134.175.16.24/newcss/act/act1/index.html/hero，[分析結果](https://www.webpagetest.org/result/181108_2D_20fc46a11de58d60dde7421b6d3be954/)。
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
相關閱讀
【每日課程推薦】機器學習實戰！快速入門在線廣告業務及CTR相應知識
此文已由作者授權騰訊雲+社區發布，更多原文請點擊
搜索關註公眾號「雲加社區」，第一時間獲取技術幹貨，關註後回復1024 送你一份技術課程大禮包！
海量技術實踐經驗，盡在雲加社區！
讀了這篇文章，你將變身web分析大師