歡迎大家前往 "騰訊雲+社區" ，獲取更多騰訊海量技術實踐乾貨哦~ 本文由 "shirishiyue" 發表於 "雲+社區專欄" 1、工具介紹 這是一個非常詳細且專業的web頁面性能分析工具，而且開源的！如果你打不開其官網，或者擔心安全問題，你可以自己拿源碼搭建這個平臺工具。 性能分析極其詳 ...
歡迎大家前往騰訊雲+社區，獲取更多騰訊海量技術實踐乾貨哦~
本文由shirishiyue發表於雲+社區專欄
1、工具介紹
這是一個非常詳細且專業的web頁面性能分析工具，而且開源的！如果你打不開其官網，或者擔心安全問題，你可以自己拿源碼搭建這個平臺工具。
性能分析極其詳細，包含你所知道的所有新能參數指標，還有一些這個工具自己的指標參數，比如speed index，更能從人的角度看待一個頁面體驗是否良好。提供了多種主流瀏覽器的訪問性能，提供了全球多個地點的測試性能，還有視頻錄像功能可以返回體驗。這個視頻功能極好的用於直觀的對比演示。總之，優點非常之多，沒有理由不嘗試一下。
入口在 這裡，長這樣，
上面三輸入框，，，第一行，輸入你的頁面url。
第二行，選擇你的訪問點，比如你想測一下北京的用戶訪問速度，那麼你選擇北京。
第三行，選擇什麼瀏覽器訪問。
右邊，點擊START TEST，，，，耐心等待。
分析的結果時存下來的，比如，我的三個url分析結果如下，可以反覆進入查閱。
頁面1：https://test.igame.qq.com/pvp/acts/a201807/herotool.php?op=2，分析結果。
頁面2：http://134.175.16.24/vuessr/act/act1/index/hero，分析結果。
頁面3：http://134.175.16.24/newcss/act/act1/index.html/hero，分析結果。
2、結果使用和分析
分析完後，結果長這樣，
總共跑了三次。每一次都是First View（就是相當於新用戶，首次打開頁面，沒有任何緩存）。
Performance Result 就是指標總覽，列舉了一些主要的新能指標的平均值。
指標解析： 從輸入url按enter開始的，達到下麵節點的時間。
▲ Load Time
頁面完全載入完時間（不等待圖片下載，iframe下載，css更新完），此時，window.onload 事件此時觸發。同 Document complete time.
▲ DOM Content Loaded
HTML DOM 骨架完全下載和解析，包括
