摘要：頁面，分析結果。每一次都是就是相當于新用戶，首次打開頁面，沒有任何緩存。此時，事件觸發。白屏后首次出現內容的時間。主要首次可交互時間。它通常也被稱為頁面大小。性能表現總量，可以優化性能的指標完成情況。

歡迎大家前往騰訊云+社區，獲取更多騰訊海量技術實踐干貨哦~

本文由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 骨架完全下載和解析，包括元素。（等待圖像下載，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 送你一份技術課程大禮包！

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