摘要：頁(yè)面，分析結(jié)果。每一次都是就是相當(dāng)于新用戶，首次打開(kāi)頁(yè)面，沒(méi)有任何緩存。此時(shí)，事件觸發(fā)。白屏后首次出現(xiàn)內(nèi)容的時(shí)間。主要首次可交互時(shí)間。它通常也被稱為頁(yè)面大小。性能表現(xiàn)總量，可以優(yōu)化性能的指標(biāo)完成情況。

歡迎大家前往騰訊云+社區(qū)，獲取更多騰訊海量技術(shù)實(shí)踐干貨哦~

本文由shirishiyue發(fā)表于云+社區(qū)專欄

1、工具介紹

? 這是一個(gè)非常詳細(xì)且專業(yè)的web頁(yè)面性能分析工具，而且開(kāi)源的！如果你打不開(kāi)其官網(wǎng)，或者擔(dān)心安全問(wèn)題，你可以自己拿源碼搭建這個(gè)平臺(tái)工具。

? 性能分析極其詳細(xì)，包含你所知道的所有新能參數(shù)指標(biāo)，還有一些這個(gè)工具自己的指標(biāo)參數(shù)，比如speed index，更能從人的角度看待一個(gè)頁(yè)面體驗(yàn)是否良好。提供了多種主流瀏覽器的訪問(wèn)性能，提供了全球多個(gè)地點(diǎn)的測(cè)試性能，還有視頻錄像功能可以返回體驗(yàn)。這個(gè)視頻功能極好的用于直觀的對(duì)比演示?？傊瑑?yōu)點(diǎn)非常之多，沒(méi)有理由不嘗試一下。

? 入口在 這里，長(zhǎng)這樣，

? 上面三輸入框，，，第一行，輸入你的頁(yè)面url。

? 第二行，選擇你的訪問(wèn)點(diǎn)，比如你想測(cè)一下北京的用戶訪問(wèn)速度，那么你選擇北京。

? 第三行，選擇什么瀏覽器訪問(wèn)。

? 右邊，點(diǎn)擊START TEST，，，，耐心等待。

? 分析的結(jié)果時(shí)存下來(lái)的，比如，我的三個(gè)url分析結(jié)果如下，可以反復(fù)進(jìn)入查閱。

頁(yè)面1：https://test.igame.qq.com/pvp/acts/a201807/herotool.php?op=2，分析結(jié)果。

頁(yè)面2：http://134.175.16.24/vuessr/act/act1/index/hero，分析結(jié)果。

頁(yè)面3：http://134.175.16.24/newcss/act/act1/index.html/hero，分析結(jié)果。

2、結(jié)果使用和分析

? 分析完后，結(jié)果長(zhǎng)這樣，

? 總共跑了三次。每一次都是First View（就是相當(dāng)于新用戶，首次打開(kāi)頁(yè)面，沒(méi)有任何緩存）。

? Performance Result 就是指標(biāo)總覽，列舉了一些主要的新能指標(biāo)的平均值。

指標(biāo)解析： 從輸入url按enter開(kāi)始的，達(dá)到下面節(jié)點(diǎn)的時(shí)間。

▲ Load Time

? 頁(yè)面完全加載完時(shí)間（不等待圖片下載，iframe下載，css更新完），此時(shí)，window.onload 事件此時(shí)觸發(fā)。同 Document complete time.

▲ DOM Content Loaded

? HTML DOM 骨架完全下載和解析，包括元素。（等待圖像下載，css更新，iframe更新等）。此時(shí)，DOMContentLoaded 事件觸發(fā)。（你在預(yù)加載數(shù)據(jù)的時(shí)候，可以在這個(gè)事件時(shí)會(huì)更合適些，而不是上面的dom ready）

▲ Time to First Byte

? 首字節(jié)時(shí)間。瀏覽器接收到第一個(gè)字節(jié)的時(shí)間。包括服務(wù)器處理以及網(wǎng)絡(luò)傳輸，DNS尋址時(shí)間+建立連接時(shí)間(Socket) + SSL認(rèn)證時(shí)間等。

▲ Start Render

? 白屏后首次出現(xiàn)內(nèi)容的時(shí)間。

▲ Speed Index

? 速度指數(shù)，頁(yè)面呈現(xiàn)出來(lái)的平均時(shí)間。比Start Render更人性化的指標(biāo)。詳細(xì)計(jì)算方式參考：Speed Index 。主要

▲ Time to Interactive

? 首次可交互時(shí)間。頁(yè)面可以開(kāi)始響應(yīng)用戶輸入事件。（因?yàn)轫?yè)面呈現(xiàn)過(guò)程中，其實(shí)還是不可交互的。）

▲ Requests

? 瀏覽器針對(duì)頁(yè)面上的內(nèi)容（圖片，javascript，css等）發(fā)出的請(qǐng)求數(shù)。

▲ Bytes In

? 瀏覽器加載頁(yè)面下載的數(shù)據(jù)量。它通常也被稱為“頁(yè)面大小”。

過(guò)程詳細(xì)：

▲ 中間的Waterfall可以看到瀑布流圖，點(diǎn)進(jìn)去，跟你使用chrome tool一樣。不多介紹。

▲ Screen Shot，網(wǎng)頁(yè)快照，保存了從輸入url到頁(yè)面fully loaded的全稱快照。

▲ Video 整個(gè)過(guò)程的視頻。這個(gè)非常好，你可以和幾個(gè)視頻放在一起，非常直觀的看哪一個(gè)快哪一個(gè)慢。

▲ 各種 breakdown 拆分統(tǒng)計(jì)，包括 Contents，Processing，Domains等等，，，，，比如，Contents 拆分統(tǒng)計(jì)如下，

▲ domains breakdown，and， request map，，，可統(tǒng)計(jì)請(qǐng)求域名情況，域名越多，明顯對(duì)時(shí)間要求更多。

▲ 性能表現(xiàn)總量，可以優(yōu)化性能的指標(biāo)完成情況。

? 這里面列出了可使用的性能點(diǎn)，如：

• 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

相關(guān)閱讀
【每日課程推薦】機(jī)器學(xué)習(xí)實(shí)戰(zhàn)！快速入門(mén)在線廣告業(yè)務(wù)及CTR相應(yīng)知識(shí)

此文已由作者授權(quán)騰訊云+社區(qū)發(fā)布，更多原文請(qǐng)點(diǎn)擊

搜索關(guān)注公眾號(hào)「云加社區(qū)」，第一時(shí)間獲取技術(shù)干貨，關(guān)注后回復(fù)1024 送你一份技術(shù)課程大禮包！

海量技術(shù)實(shí)踐經(jīng)驗(yàn)，盡在云加社區(qū)！